Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA)

The Web Accessibility Initiative - Accessible Rich Internet Applications specification 1.1, or WAI-ARIA or ARIA for short, is a technical specification written by the World Wide Web Consortium (W3C). 

If you're developing a website you can use ARIA to build interactive web content accessible to people with disabilities who use screen readers. A screen reader is a software application that announces what's on the screen to people who can't see or understand visual content.

Why you need ARIA

ARIA complements Hyper Text Markup Language (HTML) semantics by providing a set of attributes that allow you to enhance the native roles of HTML elements to build more accessible user experiences. A native role is a default role in HTML, also known as the implicit role.

HTML interface controls are natively accessible to screen readers and include buttons, links, checkboxes and so on. For example, a screen reader can detect an HTML button and announce 'button'.

These interface controls can be enhanced using JavaScript to include dynamic interactions. This gives the user the ability to, for example, select, drag, drop, open and close content. These are non-native to HTML, so screen readers can't detect these changes. This means a screen reader can detect an HTML button but not understand whether it's expanded or collapsed for a menu.

ARIA attributes therefore provide additional semantics to HTML elements. A screen reader can detect these enhancements, which include:

• an element's role, which describes its purpose, for example 'button'
• an element's name or description, which identifies an element, for example 'Settings'
• an element's state, which describes its current condition, for example 'Expanded'

Support for ARIA

ARIA is supported by all commonly used browsers and screen readers. The browsers include Firefox, Chrome, Safari and Edge. The assistive technologies supporting ARIA include JAWS, NonVisual Desktop Access (NVDA), Orca, VoiceOver and the screen reader built into ZoomText. Support may vary, but it's always improving.

When to use ARIA

Always use native HTML elements or attributes rather than ARIA where they're available. This is because screen readers already recognise them and interactive HTML elements are keyboard accessible by default. Some people may also have older browsers and assistive technologies that don't fully support ARIA.

Tips

Follow these tips to improve user experience:

• always use semantic HTML over ARIA when it's available
• do not change native HTML semantics unless you really have to
• use WAI-ARIA Authoring Practices 1.1 as a reference for how to apply role, name, description, state and keyboard behaviour for accessible custom components