Who is Eevis?
- Accessibility Specialist, Senior Software Developer at Oura
- Blogger, speaker, disabled person
- Kayaker, hiker
Agenda
- A couple of words about accessibility
- Let’s Keep Our Promises: ARIA
- Let's Keep Our Promises: Keyboard Navigation
A couple of words about accessibility
- Digital accessibility = Anyone, despite of disabilities or impairments, can use the digital product
Let's keep our promises: ARIA
No ARIA is better than bad ARIA
Principle 1: A role is a promise
<div
role="button"
className="button">
I'd like to be a button
</div>
Principle 2: ARIA can both cloak and enhance, creating both power and danger
<section ariaHidden>
<h2>An important section</h2>
<p>Important content</p>
<button>
Button, vital to business
</button>
</section>
How to keep our promises: ARIA
- If you can, use semantic HTML
- When you use ARIA, know what you’re doing
- Remember to add keyboard event listeners
Let's keep our promises: Keyboard Navigation
Styles should match the underlying component
<a
href="/url"
className="button">
I'm a link looking like a button
</a>
Remember keyboard event listeners for custom components
<div
role="button"
tabIndex={0}
className="button">
I'd like to be a button
</div>
How to keep our promises - keyboard navigation
- Style the component to look like the underlying component
- For custom components, remember to add the keyboard event listeners
Thanks!
Twitter: @EevisPanula Website: https://eevis.codes