ARIA 101

Nicolas Steenhout

ARIA

Accessible Rich Internet Application

ARIA

Accessible Rich Internet Application

A technical spec by the W3C to help increase accessibility of the web, particularly dynamic content and user interfaces.

More errors with ARIA

Roles, Properties, States

• ARIA lets you add attributes to elements.
• Add a role. e.g. button, presentation, img
• Change properties. e.g. checked, expaneded, haspopup
• Use values well. e.g. true, text strings, id's

First rule of ARIA

Don't use ARIA

First rule of ARIA

Don't use ARIA

Unless there is no way do to what you want to do in native HTML

Second rule of ARIA

Don't change semantics

Second rule of ARIA

Don't change semantics

Unless you really have to

Third rule of ARIA

All interactive elements need to be keyboard friendly

Third rule of ARIA

All interactive elements need to be keyboard friendly

If you reinvent an element, like a button, you have to intentionally add keyboard interactions

Fourth rule of ARIA

Role="presentation" is a no go on interactive elements

Fourth rule of ARIA

Role="presentation" is a no go on interactive elements

That role removes the semantic of the element. The element no longer exists for screen readers. Same with role="none". Same with aria-hidden="true"

Fifth rule of ARIA

All interactive elements must have an accessible name

Fifth rule of ARIA

All interactive elements must have an accessible name

Avoid empty elements. Ensure programmatic name is available

Live regions

<div aria-live="off">

Live regions

<div aria-live="assertive">

Live regions

<div aria-live="polite">

Live regions

aria-atomic

<div aria-live="polite" aria-atomic="true">

Present the live region as a whole, or only the bits that changed.

Not a thing!

				    aria-role
		    

Non unique ID

		            <input aria-describedby="someid">
          
		            <p id="someid">One thing</p>
          
		            <p id="someid">A different thing</p>
		            

Not quite the same thing

aria-label

vs.

aria-labelledby

aria-labelledby

		            <input aria-labelledby="label1">
          
		            <p id="label1">Some label<p>
		            

• Requires a separate element's ID
• Useful if content already exists on the page

aria-label

		           <input aria-label="Some label">
		           

• Requires a text string
• Useful if content not already on the page

Does this thing work?

A11ysupport.io

• Good first stop to get a feel for things
• Some compatibility tests are too old
• May need to run your own test (add results to the page!!!

Intentionality

Be deliberate in what elements you use, and why you use them.

Ensure what you did matches the intentions.

Test to avoid unintended consequences.

Questions?    Thank you!

Nicolas Steenhout

• nic@incl.ca
• @vavroom
• A11y Rules Soundbites