Making A11y Easy ConcatenateConf 2018

Ire Aderinokun

Why is
Accessibility Important?

  1. 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”

  1. 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.”

  1. The web is for everyone

  1. 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