Day 14: ARIA Roles Model, Part 2

Published on 13 Dec 2018

• journal
• resources
• was
• aria

Two weeks of consistent web accessibility studying down! And a total of 24 hours (non-consecutively) spent.

Today I continued on reading through The Roles Model, this time diving deeper into the definitions of each role. 82 roles is a lot. At times I shifted over to informational documentation to get a well-rounded grasp of the use of ARIA, rather than spending a full hour reading straight through the role definitions.

As an added note, learning (memorizing) these roles could take days, if not weeks. In order to stay on my study schedule, I think reinforcing this type of knowledge is best suited in practice. When I begin studying and creating custom interactive controls and widgets (per the WAS Body of Knowledge), I'll circle back around to ARIA roles.

1. Added the Rules of ARIA to my spreadsheet.
2. Read through a few of the role definitions (and accompanying documentation) to get a better grasp of their differences and purpose. The alphabetical list works best for quick research, but I chose to systematically look at roles by type to more easily assimilate them into my own knowledge base. I also focused more on roles that currently do not have an HTML equivalent.

• role="directory" is for static table of contents. I could definitely be using this alongside my aria-label="Table of Contents". Up to now, I've just been using the HTML navigation landmark.
• role="alert" shouldn't be coupled with focus (like a close alert option), but role="alertdialog" does. Key difference. That, and alert is a live region role, while alertdialog is window role. Understanding the role types first is key to helping understand the what and when to use of these roles.
• ARIA only validates on checkers when used in an HTML5 doctype.
• There is a hack for giving alternative text to background images. Not surprising since ARIA feels like a hack anyhow. I'm not going to give the code here, as I think it's just too much of a work around for devs. Just use the HTML img element, please.
• 31 out of the 82 roles are actually the most relevant. Others have HTML5 equivalents (remember the first rule of ARIA?) or are abstract. These seem like the best place to start when learning ARIA, cuts down memorization, and could prevent potential barriers presented to assistive technologies. 🎵 You may say I'm a dreamer, but I'm not the only one... 🎵 (John Lennon)

After all these years the Internet has been alive, why don't we have an HTML search landmark??

• Using ARIA (W3C)