Actual effect of using WAI ARIA?

Question

I'm trying to dig into ARIA and make my websites more accessible. I understood using ARIA attributes is a good start but I'd like to understand the actual effects of doing so.

If, for instance, I add a role="navigation" on my nav tag used as a menu, what effect will this have for the user?

What will its screenreader (or any app helping him) do? Is it really useful to add this if I'm already using a nav tag, which obviously is already telling the user that this is a navigation item?

Thanks!

Answer 1

The way I understand it is that adding ARIA roles will create a taxonomy of semantics (called landmarks) on your site that a user can navigate to using keyboard shortcuts (key bindings) defined by screen readers with ARIA support.

For example, instead of jumping through actionable elements like buttons/links, the user can use a different key binding to jump to ARIA landmarks instead.

Semantic tags such as "nav" should be handled by the screen reader client by default (and have a specific key binding to do so - usually "tab"). ARIA roles - in this scenario - just add another level of semantics and, by extension, an alternate method for navigating through the page.

A link to the WAI-ARIA Roles Model W3C spec.

Answer 2

In simple terms WAI-ARIA allows developers to talk to the platform accessibility API through HTML mark-up. Platform accessibility API is the way how operating systems expose information about objects on the screen to the assistive technologies.

When you set role="navigation" on an HTML element what happens in the background is, user-agent maps this information to the correct accessibility API on user's operating system. As a result, the assistive technology receives the right semantics about your HTML element.

For example for the "navigation" role user-agent maps this to "AXLandmarkNavigation" on Mac OS X. You can find the full list of mapping of ARAI roles to accessibility APIs on WAI-ARIA 1.0 User Agent Implementation Guide.