Who’s afraid
of ARIA?
Rian Rietveld
WordCamp Nordic 2019

Artwork: kait cooper

Rian Rietveld
@RianRietveld
Find me on twitter
Senior Accessibility Consultant at Level Level
Teacher at the Level Level Academy

slideshare.net/rianrietveld
Slides on

In this talk
What is ARIA
First rule of ARIA
Examples of how to use ARIA
Good resources

WAI-ARIA
WAI = Web Accessibility Initiative
ARIA = Accessible Rich Internet Applications Suite

ARIA defines a way to make Web
content and Web applications more
accessible to people with disabilities.

It’s all about feedback
What happens on the page?
What does this mean?
How can I interact?

First rule of ARIA…
Don’t use ARIA!

Don’t use ARIA to
fix meaningless or
incorrect HTML5

Hamburgers!
For example:

<div
id=“menu”
>
Menu
</div>

<div
id=“menu”
tabindex=“0”
>
Menu
</div>

<div
id=“menu”
tabindex=“0”
role=“button”
>
Menu
</div>

<div
id=“menu”
tabindex=“0”
role=“button”
aria-pressed=“false”
>
Menu
</div>

<button
id=“menu”
>
Menu
</button>

Semantics gives
you it all for free

It’s all about feedback
What happens on the page?
What does this mean?
How can I interact?

How to use ARIA
Examples!

Codepen:
bit.ly/wcno-aria

aria-expanded
Is this open or closed?

aria-live
Tell me what’s changing

wp.a11y.speak()
Let WordPress speak

aria-label and
.screen-reader-text
What you hear is what you get

aria-labelledby &
aria-describedby
What do I need to know?

Demo time!
Codepen: bit.ly/wcno-aria

Resources

Free online ARIA Widgets Code Library
at dequeuniversity.com

Make it work
before you make it nice

slideshare.net/rianrietveld
Codepen: bit.ly/wcno-aria
@rianrietveld