how ARIA ROLES and landmarks affect the user Experience
Zoltan Hawryluk, zoltan.dulac@gmail.com
ARIA ROLES
Used by Assistive Technologies (like screen readers) to:
- Announce what type of interactive component the user is focusing on
- Announce what kind of components are on a page in reading mode
- Announce the structure of the document of to a user so s/he can jump around a page quickly (these are called landmarks)
The FIVE EIGHT ARIA LANDMARKS
| banner | <header> | A region that contains mostly site-oriented content, rather than page-specific content. |
|---|---|---|
| main | <main> | The main content on a page |
| navigation | <nav> | any item that is used to navigate throughout a web page or web site (e.g. a menu) |
| complementary | <aside> | (e.g. a sidebar) |
| contentinfo | A large perceivable region that contains information about the parent document. | |
| form | <form> | Contains a series of inputs that are used to collect information from the user. |
| search | An area that has a search widget | |
| application | N/A | A web application that overrides normal keyboard/screenreader behaviour and has its own unique user interface. If you don't know what this means, don't use it. |
Demo of how they work in screen readers.
other types of roles
live roles
interactive roles
The FIVE RULES OF ARIA
1. THOU SHALT USE NATIVE HTML ELEMENTS WHENEVER POSSIBLE.
why?
-
Don't ask questions! Just do it!That's a good question! - Let's look at an example: role='listbox'
EXCEPTIONS?
2. THOU SHALT not change the semantics of native HTML elements unless absolutely necessary.
DON't
<h2 role="tab">heading tab</h2>
DO
<div role="tab"><h2>heading tab</h2></div>
3. Thou shalt ensure All ARIA controls are usable with a keyboard
4. Thou shalt never use role="presentation" or aria-hidden="true" on a visible focusable element
don't
<button role="presentation"> press me </button>
don't
<button aria-hidden="true"> press me </button>
do
<button
style="opacity: 0" tabindex="-1"
aria-hidden="true" > press me </button>
do
<button
style="display: none" aria-hidden="true" > press me </button>
5. thou shalt ensure All interactive elements have an accessible name.
DON'T
user name <input type="text">
DON'T
<label>user name</label> <input type="text">
DO
<label for="uname">user name</label> <input type="text" id="uname">
How ARIA Roles and Landmarks Affect UX
By Zoltan Hawryluk
How ARIA Roles and Landmarks Affect UX
- 163
