ื“ืœื’ ืœืชื•ื›ืŸ ื”ืจืืฉื™

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