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?

Acronyms!

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

Deaf / Hearing Loss

Physical Disability

Cognitive Disability

Who Cares?

These folks weren't proactive

Using Assistive Technology

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)

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

Common Mistakes

No Skip Nav Links

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
    }
});

Accessibility in WordPress

Genesis appears to be leading the way

Some Plugins/Themes

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

Other Plugins/Themes

  • 12 listed under "a11y"
  • 1,000 for "accessibility"
    • very few
  • 45 for "genesis accessibility"
  • Theme Forest
  • Code Canyon

Tools/Resources

Browser

Command Line

People

Groups

Some Live Sites

Thanks!

@johnbhartley

repo

deck

By John Hartley

deck

  • 1,614
Loading comments...