Ga naar hoofdinhoud

Accessibility Guide

Ensure Ever Gauzy is accessible to all users.

ARIA Standards​

The Gauzy frontend follows WCAG 2.1 guidelines:

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​

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

Implementation Guidelines​

Buttons​

<!-- 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​

<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​

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

Color Contrast​

ElementMinimum Ratio
Normal text4.5:1
Large text3:1
UI components3:1

Testing​

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