Skip to main content
All For Web For All

code

GUIDELINE: WAI-ARIA

back

Overview

Code focuses on creating a fully accessible web experience for all users by developing sites that properly convey accessibility semantics and implements common keyboard conventions.

Who is impacted

All users of assistive technologies including screen readers, voice control, and switch devices.

How to test

Validate HTML semantics, check ARIA roles and properties, and test with a screen reader to verify correct announcements.

Resources

Visit W3C WAI-ARIA Authoring Practices and MDN ARIA documentation for detailed guidance.

Semantic HTML

Semantic HTML uses elements that convey meaning about the content they contain. Using elements like nav, main, article, aside, header, and footer provides built-in accessibility by telling assistive technologies what role each section of the page plays. Semantic elements are preferable to generic divs and spans with ARIA roles.

The first rule of ARIA is: do not use ARIA if you can use a native HTML element that already has the semantics and behavior you need. Native elements have built-in keyboard interaction and accessibility support that ARIA cannot fully replicate.

ARIA Landmark Regions

ARIA landmark regions help screen reader users navigate the main sections of a page. Common landmarks include banner (header), navigation, main, and contentinfo (footer). When using semantic HTML elements, these landmarks are automatically applied. Use ARIA landmarks only when semantic HTML cannot achieve the desired result.