# Accessibility Guide {#accessibility-guide}


Ensure Ever Gauzy is accessible to all users.


## ARIA Standards {#aria-standards}


The Gauzy frontend follows WCAG 2.1 guidelines:


### Keyboard Navigation {#keyboard-navigation}


- All interactive elements are keyboard-focusable
- Tab order follows visual layout
- Focus indicators are visible
- Skip-to-content links available


### Screen Reader Support {#screen-reader-support}


- Proper ARIA labels on interactive elements
- Descriptive alt text on images
- Semantic HTML structure
- Live regions for dynamic updates


## Implementation Guidelines {#implementation-guidelines}



### Buttons {#buttons}


```html
<!-- Good -->
<button aria-label="Delete task" (click)="deleteTask()">
  <mat-icon>delete</mat-icon>
</button>

<!-- Bad -->
<div (click)="deleteTask()">
  <mat-icon>delete</mat-icon>
</div>
```


### Forms {#forms}


```html
<label for="task-title">Task Title</label>
<input
  id="task-title"
  type="text"
  aria-required="true"
  aria-describedby="task-title-help"
/>
<small id="task-title-help">Enter a descriptive task title</small>
```


### Tables {#tables}


```html
<table role="grid" aria-label="Employee list">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Department</th>
    </tr>
  </thead>
</table>
```


## Color Contrast {#color-contrast}


| Element       | Minimum Ratio |
| ------------- | ------------- |
| Normal text   | 4.5:1         |
| Large text    | 3:1           |
| UI components | 3:1           |


## Testing {#testing}


- Use browser DevTools Accessibility tab
- Test with screen readers (NVDA, VoiceOver)
- Run Lighthouse accessibility audit
- Test keyboard-only navigation


## Related Pages {#related-pages}


- [UI Components](https://sourcey-gauzy.pages.dev/frontend/ui-components/index.md) — component library
- [Shared UI Library](https://sourcey-gauzy.pages.dev/frontend/shared-ui-library/index.md) — reusable components