A Web With No Mouse:

Why Your Site ~~Should~~ Needs To Be Accessible

@johnbhartley

Deuteranopia

Red-green color blindness defect in 1% of the male population

What is accessibility?

So What is a11y then?

Should we stop using it?

Acronyms!

ADA - Americans with Disabilities Act
WCAG - Web Content Accessibility Guidelines
WAI - Web Accessibility Initiative
ARIA - Accessible Rich Internet Applications

WCAG Compliance

It is widely accepted that AA compliance is what sites should be able to hit

A - Lowest level, this is a must
AA - Level that sites will eventually be held to (presumably)
AAA - No one has to, but should strive to hit it

What is a disability?

Blindness or Low Vision

National

Eye

Institute

Deaf / Hearing Loss

Physical Disability

Keeping Web Accessibility In Mind

Cognitive Disability

Who Cares?

These folks weren't proactive

Using Assistive Technology

Braille Display

JAWS

(Job Access With Speech)

Freedom Scientific ~ $900

Large community

50% of AT users

Down 25% from 2009

Best Browser: IE

Started in

NVDA

(NonVisual Desktop Access)

Freeeeeeeee

Large community

19% of AT users

Gaining traction

Best Browser: Firefox

Started in 2006

Others: WindowEyes, Orca (Linux), Voiceover (Mac)

Death of Screen Reader Innovation

Why do you keep explaining what all of the images are?

Common Mistakes

No Skip Nav Links

Try it

So says the WCAG

outline: none;

Used :hover

not :focus

tabindex'ed all the things

No context on links

Bad or no alt tags on images

Poor Color Contrast

Modal Inception

.on('click')

$('button').on('click keypress', function (e) {
    if(e.type === 'click' || e.which === 13) {
        // do stuff
    }
});

Example

Accessibility in WordPress

Genesis appears to be leading the way

Some Plugins/Themes

WP Accessibility Plugin

Enable skip links with WebKit support by adding JavaScript support to move keyboard focus.
Add skip links with user-defined targets. (Customizable targets and appearance.)
Add language and text direction attributes to your HTML attribute
Add an outline to the keyboard focus state for focusable elements.
Add a toolbar toggling between high contrast, large print, and desaturated (grayscale) views of your theme.
Add a long description to images. Use the image's "Description" field to add long descriptions.
Enforcement for alt attributes on images.