Accessibility
(a11y)
And how to build accessible components
Slides :
Who am I ?
@KeziahMoselle
Front-end Developer
@ HOME
What are we going to learn ?
What is Accessibility ?
An introduction to ARIA
Create accessible components
Bonus (quick tips)
What is Accessibility ?
ANYONE
with ANYTHING
"Accessibility is about people.
Accessibility is about including and protecting people in minoritized groups."
- Lindsey Kopacz
WCAG recommendations
Web Content Accessibility Guidelines
4 Principles
Perceivable
Operable
Understandable
Robust
3 levels of compliance
A (Essential)
AA (Ideal)
AAA (High-level)
Accessibility Tree
Image source:
Bare minimum
Color contrast
Do not remove :focus outline
Images [alt] needs to be descriptive
Add labels to inputs
DOM order matters
An introduction to
ARIA
Accessible Rich Internet Applications
Introduction
Context
User
ARIA
Extra
informations
Rule #1
Avoid ARIA if possible
Prefer semantic HTML
Non semantic HTML is too much work !
Do I need ARIA ?
Illustration of the problem
<div
id="saveChanges"
tabindex="0"
role="button"
>
Save
</div><button id="saveChanges">
Save
</button>A button made with ARIA
A button
ARIA Roles
Categories
- Widgets (tab)
- Composite (tablist)
- Structure (list)
- Landmark (banner)
- Live region (status)
- Window (dialog)
States
Properties
Example
role="button"
aria-pressed
aria-expanded
aria-label
aria-labelledby
...
Associated states
Associated properties
ARIA
States and properties
States
Properties
aria-relevant
aria-readonly
aria-labelledby
...
aria-checked
aria-expanded
aria-hidden
...
Common Patterns
Accessible components
BONUS
(quick tips)
ARIA-LIVE
Skip navigation
<!-- This will skip the <nav> and go to the main content -->
<a class="visually-hidden" href="#main">
Skip to main content
</a>
<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<main id="main" role="main">
<!-- page specific content -->
</main>.visually-hidden
<a class="visually-hidden" href="#main">
Skip to main content
</a>/* Old way */
.visually-hidden {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}/* Modern way */
.visually-hidden {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}MEDIA QUERY
prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
@media (prefers-reduced-motion: no-preference) {
button {
animation: akeyframe 0.3s;
}
}MEDIA QUERY
Programmatically
window.matchMedia('(prefers-reduced-motion: reduce)')
/*
{
media: "(prefers-reduced-motion: reduce)"
matches: false
onchange: null
}
*/Reduced motion example
Ressources
Tools
Icons:
Thank you !
Slides :
Questions ?
An introduction to Accessibility in React and Vue
By Keziah MOSELLE