The Web is for Everyone

An Introduction to Accessibility

Jon Kuperman

@jkup

Today we’ll be covering

• Types of disabilities
• Assistive technologies
• Keyboard Navigation
• Focus Control
• Working with screen readers
• Semantic HTML
• WAI-ARIA
• Accessibility in color and design

Similar Fields

Web accessibility means that people with disabilities can use the Web.

More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.

Let’s Talk Numbers

About 56.7 million Americans — 19 percent of the population — had a disability in 2010

An estimated 7.9 million persons (age 6 and older) have difficulty seeing words and letters in ordinary newspaper print

Lighthouse International Research Study

Currently around 10 per cent of the total world's population, or roughly 650 million people, live with a disability.

The Web is

​

Already Accessible

even if your website is not

1991

Why

• We’re making it inaccessible
• Human Rights
• Legal Issue
• Reach a larger audience

Developers

should care

WebAIM Checklist

All websites should be

Types of Disabilities

• Attention-Deficit/Hyperactivity Disorders
• Blindness or Low Vision
• Brain Injuries
• Deaf/Hard-of-Hearing
• Learning Disabilities
• Physical Disabilities
• Speech and Language Disabilities

So Many Ways

To Browse The Web

Mouth Sticks

Screen Readers

Magnification

Keyboard shortcuts

​

Keyboard Only

Head Wand and Mouthstick

Single Switch

Screen Reader

Let’s talk about

Keyboards

Keyboard

shortcuts

Twitter

Facebook

Keyboard

navigation

Tabbable

Elements

Shift + Tab Tab

• <a>
• <button>
• <input>
• <select>
• <textarea>
• <iframe>

Tabindex

<div tabindex=“0”>I’m focusable</div>

Tabindex Values

• a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
• 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
• a positive value means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document.

Visible Focus

Skip links

Learn more about skip links

webaim.org/techniques/skipnav/

Setting up our project

github.com/jkup/learn-a11y

Exercise 1: Keyboard Navigation

1. The form at the bottom can’t be submitted with just a keyboard.
2. There is no “skip link” for tabbing straight into the content.

​

github.com/jkup/learn-a11y

bit.ly/2ly0XOJ

Focus

Control

document.activeElement

var currentElement = document.activeElement;

Tabtrapping

• Select your modal
• Find and select all focusable children (https://github.com/jkup/focusable)
• Convert them to an Array
• Find the first and last tabbable item inside the modal
• Listen for keydown event
• Check to see if it’s the tab key
• *Also check if shift is being held down*
• If moving forward and on the last item, focus the first item
• If moving backward and on the first item, focus the last item

Element.focus()

if (document.activeElement === firstTabStop) {

e.preventDefault();

lastTabStop.focus();

}

Exercise 2: Focus Control

1. When the modal appears, you are still able to tab through elements on the main page. Tabbable content should be restricted to the modal.
2. Both hitting the escape key as well as clicking outside the modal should close it.

github.com/jkup/learn-a11y

Screen Readers

Most Popular Desktop Screen Readers

1. JAWS (Windows)
2. ZoomText (Mac and Windows)
3. Window-Eyes (Windows)
4. NVDA (Windows)
5. VoiceOver (Mac)
6. ChromeVox (Browser)

<img alt=“Alternate Text” />

What your users hear

What your users hear

Writing Good Alt Text

• Be accurate
• Be succinct
• Don’t be redundant
• Don’t use "image of" or "graphic of"

http://webaim.org/techniques/alttext/

Interesting Alt text tips

• alt=”” intentionally skip element
• alt=”UPPERCASE” individually reads letters

Hiding things from screen readers

• display: none;
• visibility: hidden;
• <input hidden />

Hide from user but show to screen readers

.screenreader {

position: absolute;

left: -10000px;

width: 1px;

height: 1px;

overflow: hidden;

}

label

<label for="username">Click me</label>�<input type="text" id="username">

aria-labelledby

<div id="billing">Billing Address</div>��<div>� <div id="name">Name</div>� <input type="text" aria-labelledby="billing name"/>�</div>�<div>� <div id="address">Address</div>� <input type="text" aria-labelledby="billing address"/>�</div>

ARIA Roles

HTML5 elements vs ARIA roles

Sometimes it’s nice to have both for older browsers

<article role=“article”>Your Content</article>

HTML5 elements vs ARIA roles

Which they will turn into

<div role=“article”>Your Content</div>

HTML5 elements vs ARIA roles

Exercise 3: Screen Reader

• Your task is to make it so the entire form can be filled out with only the use of a screen reader.

​

github.com/jkup/learn-a11y

Semantic

HTML

There’s an element for that

Semantic Anti Patterns

• <div class=”button”></div>
• <span class=”checkbox”></span>
• <img src=”3443.jpg” />

Elements with inherited functionality

HTML Headers (option + ctrl + u)

Exercise 4: Semantic HTML

• Check the ARIA roles and see if you can find HTML5 elements to replace roles.
• Make sure all items are using the proper elements.

​

github.com/jkup/learn-a11y

ARIA

Accessible Rich Internet Applications

ARIA Example

<span class=“button”>Click Me</span>

Add role

<span role=“button” class=“button”>Click Me</span>

​

Add tabindex

<span tabindex=“0” role=“button” class=“button”>Click Me</span>

Add Interaction

<span

tabindex=“0” role=“button” class=“button”

onclick=“btnClicked()” onKeyUp=“btnClicked()”>

Click Me

</span>

aria-describedby

<button aria-label="Close" aria-describedby="descriptionClose" � onclick="myDialog.close()">X</button>�...�<div id="descriptionClose">Closing this window will discard any information entered and �return you back to the main page</div>

ARIA CSS Selectors

.dropdown[aria-expanded="false"] .icon::after {

content: '▶';

}

.dropdown[aria-expanded="true"] .icon::after {

content: '▼';

}

Live regions

• aria-live - off/polite/assertive
• aria-relevant - additions/removals/text/all

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Exercise 5: Live Regions

1. Write some JavaScript in aria.js to give increment and decrement functionality.
2. Use ARIA live regions so that screen readers announce when the count changes.

github.com/jkup/learn-a11y

Color

Exercise 6: Colors

• Experiment with our demo site and other sites.
• What color schemes seem dangerous to use?

github.com/jkup/learn-a11y

TOOLS

For Accessibility Testing

Chrome Extension

Tenon.io

Accessible Color Palette

JavaScript Frameworks

WAI and WCAG

Web Accessibility Initiative Web Content Accessibility Guidelines

​

WAI publishes WCAG

Web Accessibility Initiative Web Content Accessibility Guidelines

​

3 Things You Can Do Right Now

1. Audit your site
2. Check your color scheme
3. Join the community!

@jkup

Let’s audit some sites!