Making A11y Easy
A presentation at Concatenate in in Lagos, Nigeria by Ire Aderinokun
Making A11y Easy ConcatenateConf 2018
Ire Aderinokun
Why
is
Accessibility Important?
- Accessible Site’s are
Great for Everyone
“Abled” or “Disabled”?
???
Temporary and Situational
Disabilities
Vision “Abled” Temporarily Disabled Situationally Disabled “Disabled”
Hearing “Abled” Temporarily Disabled Situationally Disabled “Disabled”
- The web,
by default
,
is Accessible
http://motherfuckingwebsite.com
#UseThePlatform
<header> <button> <main> <footer> <input type=“password”> <a>
Using a <button> < button onClick =“ openModal(e) ”
Open Modal
</
button
What you get for free • Focusable via the keyboard or screen reader • Clickable by mouse , enter key and space bar
• Accessible name and state provided to assistive tech • An interaction is expected when clicked
Using a <div> < div
onClick =“ openModal(e) ”
Open Modal </ div
Extra Work < div
tabindex =“ 0 ”
role =“ button ”
onKeyPress =“ handleBtnKeyPress(e) ”
onClick =“ openModal(e) ”
Open Modal </ div
More Extra Work function handleBtnKeyPress (e) {
// Check to see if space or enter were pressed
if ( e.keyCode === 32 || e.keyCode === 13) {
// Open modal dialog
openModal(e);
} } Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
Even More Extra Work [ role =“button”] { align-items: flex-start; text-align: center; cursor: default; color: buttontext; background-color: buttonface; box-sizing: border-box; padding: 2px 6px 3px; border-width: 2px; border-style: outset; border-color: buttonface; border-image: initial; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; margin: 0em; font: 11px system-ui; -webkit-appearance: button; }
– A Wise Person on Twitter “HTML is, by
default , accessible . As developers, it is our job to not fuck that up.”
- The web is for everyone
- It doesn’t have to be hard
< button
Open Modal
</
button
< div
Open Modal
</
div
Accessible vs Inaccessible
How
Do I Get Started
With Accessibility?
https://www.w3.org/TR/WCAG20 https://www.w3.org/TR/WCAG20
Perceivable
Information and user interface
components must be presentable to
users in ways they can perceive
Operable
User interface components and
navigation must be operable
Understandable
Information and the operation of user
interface must be understandable
Robust
Content must be robust enough
that it can be interpreted reliably
by a wide variety of user agents,
including assistive technologies
Perceivable
Information and user interface
components must be presentable to
users in ways they can perceive
Operable
User interface components and
navigation must be operable
Understandable
Information and the operation of user
interface must be understandable
Robust
Content must be robust enough
that it can be interpreted reliably
by a wide variety of user agents,
including assistive technologies
< img
src =“ire.png” alt =“Ire Aderinokun Illustration”> Text Alternatives
Contrast Ratio http://leaverou.github.io/contrast-ratio
Perceivable
Information and user interface
components must be presentable to
users in ways they can perceive
Operable
User interface components and
navigation must be operable
Understandable
Information and the operation of user
interface must be understandable
Robust
Content must be robust enough
that it can be interpreted reliably
by a wide variety of user agents,
including assistive technologies
Keyboard Accessible
Perceivable
Information and user interface
components must be presentable to
users in ways they can perceive
Operable
User interface components and
navigation must be operable
Understandable
Information and the operation of user
interface must be understandable
Robust
Content must be robust enough
that it can be interpreted reliably
by a wide variety of user agents,
including assistive technologies
Specify Language < html
lang =“en”>
Provide Instructions
Perceivable
Information and user interface
components must be presentable to
users in ways they can perceive
Operable
User interface components and
navigation must be operable
Understandable
Information and the operation of user
interface must be understandable
Robust
Content must be robust enough
that it can be interpreted reliably
by a wide variety of user agents,
including assistive technologies
Write Valid Code <! doctype
html
< html
lang =“en”> < head
<
meta
charset =“UTF-8”> < title
My Web Page</ title
</ head
< body
<
h1
My Web Page</ h1
</ body
</ html
Label Elements < label
for =“username”> Username </ label
< input
name =“username” id =“username”
type =“text”> < button
aria-label =“Cancel”> X </ button
Lighthouse
Chrome Developer Tools > Audits > Perform an Audit
pa11y
npm install -g pa11y pa11y example.com
https://bitsofco.de/pa11y https://github.com/ireade/bitsofcode-pa11y
Inclusive components
Re-usable components Cards Data Tables Content Slider Tabs Tooltips & Toggletips Notifications
Chrome Extensions
Alix https://github.com/ireade/alix
Accessibility Developer Tools https://chrome.google.com/webstore/detail/ accessibility-developer-t/ fpkknkljclfencbdbgkenhalefipecmb
HTML5 Outliner https://chrome.google.com/webstore/detail/ html5-outliner/ afoibpobokebhgfnknfndkgemglggomo/ reviews
No Coffee https://accessgarage.wordpress.com/ 2013/02/09/458/
User Research
https://www.youtube.com/watch?v=d3VuWAdBq9g
Test it Yourself!
Go Keyboard-Only
Try a Screen Reader
System Preferences > Accessibility > VoiceOver > “Enable VoiceOver”
https://www.chromevox.com
How
Can I Make
Accessibility Easy?
Make Accessibility a
First Class Citizen
Make Accessibility Everyone ’s Job
http://accessibility.voxmedia.com
Accessibility is only
hard when you do it
last
– Leonie Watson “Accessibility doesn't have to be perfect, it just needs to be a little bit better than yesterday.”
Thank You! @IreAderinokun www.ireaderinokun.com
for free. You
can too.
