1 of 45

Principles of Accessibility

OpenWest 2014

2 of 45

Introductions

Dallas Despain

Developer at ThomasArts

Slides and intro: https://joind.in/talk/view/10975

Examples: https://github.com/pandaPowder/accessibility-demos

3 of 45

Improving lives

The Internet is the most important single development in the history of human communication since the invention of call waiting. -Dave Barry http://bit.ly/16MUUsx

Internet is a game changer for everyone

especially for disabled people

It’s about impacting people
Higher Purpose

4 of 45

Why worry about it?

5 of 45

Roadmap

Overview
Disability types
Assistive technology
Principles
Laws
Testing
Alt Text Basics
Forms Basics
HTML5, ARIA and fancy pants

6 of 45

What is it?

“…the development of information systems flexible enough to accommodate the needs of the broadest range of users … regardless of age or disability.” [3]

Parallels in the physical world

Wheelchair ramps
Parking spaces
Accessible restrooms
Sign Language Interpreters
Captioning on TV/DVD’s

7 of 45

Who needs it?

What percentage of people are impacted by disabilities?

15-20% of people consider themselves disabled [1]

Photo Credit: knowyourmeme.org

8 of 45

Types of Disabilities

What types of disabilities can you think of?

Visual
Auditiory
Cognitive
Motor
Seizures

9 of 45

Assistive Technology

Disabled users use technology to help them access the internet

Output

Screen readers

JAWS, Window Eyes, NVDA, VoiceOver, Talkback

Braille devices
Screen Magnifiers

10 of 45

“How quaint”

11 of 45

Input Devices

Beyond keyboard

Joysticks/ mouth sticks
foot pedals
eye tracking
speech recognition

12 of 45

A wider audience

Accessibility issues affect “us” too!

glasses, aging - good contrast
Demo site inaccessible to keyboard

"Google is, for all intents, a blind user. A billionaire blind user with tens of millions of friends, all of whom hang on his every word. I suspect Google will have a stronger impact than [laws] in building accessible websites."...

-Karsten M. Self

13 of 45

Accessibility and Usability

The aims of future friendly content/adaptive web support the aims of accessibility
Good accessibility helps usability

“Good design and a good user experience go a very long way toward making a site more accessible

-Clarissa Peterson, UX Designer [2]

14 of 45

15 of 45

Laws

16 of 45

Section 508

U.S. Only
1998, Part of Rehabilitation Act
Limited scope
Applies to federal government and many states
Refresh some time soon (Fall 2014)?

17 of 45

WCAG 2.0

Internationally accepted
Finalized December 2008
Principles based
Easier to verify compliance
Technology agnostic

18 of 45

Principles (WCAG2)

Perceivable
Operable
Understandable
Robust

19 of 45

Perceivable

Discoverable through sight, hearing or touch
Text alternatives

Text can be easily changed to another format
Alt text on images, captions on video/audio

Mark up relationships and structure to preserve them when format changes

Lists, headings, paragraphs, labels, headers for tables
Don’t rely on visual location/proximity for this

20 of 45

Perceivable Example

http://wearecolorblind.com/example/readability/

21 of 45

Operable

Keyboard operable!

Generally ensures operability with any alternative input device (avoid “click here”)

Allow user control over time-sensitive functionality
Avoid flashing that might cause seizures
Provide ways to navigate, find content, and determine where they are

Labels on forms, bread crumbs, consistent navigation, skip navigation

22 of 45

Understandable

Both content and functionality need to make logical sense
Readability, Plain Language writing, avoid technical jargon
Navigation should be consistent, and well organized
Input assistance/error recovery
Hard to verify without manual testing

23 of 45

Understandable Example

24 of 45

Robust

25 of 45

Evaluating Accessibility

Automated Tools

•Wave, Cynthia Says, Total Validator, AccVerify, Web Accessibility Toolbar (IE)
Online or desktop, one page at a time or crawl site

Manual Testing

Keyboard only!
Use JAWS or NVDA and turn off monitor
If possible ask disabled users to test

26 of 45

Demo wave evaluation

27 of 45

Alt Text Essentials

Every image needs an alt attribute!

Even if it is “null” (alt=“”)

Alternative text can be presented two ways:

Within the alt attribute
By the surrounding context

Alt text shouldn’t be redundant

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

28 of 45

More Alt Text

Linked images must have alt text

otherwise, the user has no idea where the link might go.

Images that are purely decorative and convey no information should be set to alt=””
If the image contains text then it definitely conveys information

29 of 45

Zeratul

Total boss
Cloaked
Blink
Void prism ability

30 of 45

Label Essentials

Every form field needs a label
…<label for=“firstName”>… <input id=“firstName” />
If several form fields make up one control, use <fieldset> and <legend> to group them together
Placeholder is really cool, but it’s not a label!

http://bit.ly/1uvAW3g

31 of 45

Fieldsets

With fieldset and legend

Without fieldset and legend

Which is easier?

32 of 45

But what about my beautiful design?

You can hide stuff offscreen and screen readers will still read it.

Use with caution

Could this benefit

everyone?

33 of 45

Form Validation

Don’t rely on Javascript alone for validation
Clearly identify validation errors

Don’t rely on color alone
use aria-invalid
use html5 required attribute

Make it easy to recover from a failed submission

http://webaim.org/techniques/formvalidation/

34 of 45

Semantic markup

use <th> and scope on data tables
proper use of lists

don’t style a bunch of divs to look like a list

Proper headings

One and only one <h1> per page
try not to put <h3> before <h2> etc...

Don’t sacrifice semantics for visual design
Separate content and presentation
<em> and <strong> vs <i> and <b>

Photo Credit: http://www.flickr.com/photos/dullhunk/3525013547/

35 of 45

Javascript Event handlers

device independent handlers

Stars have mouse hover effects
Implemented using mouseover and mouseout
Not keyboard accessible without focus and blur backups

36 of 45

ARIA

Accessible Rich Internet Applications
Seeks to expose same info to AT as desktop apps do
Allows for richer controls such as menus, dialogs, sliders, trees, etc…
Reminds me of Jedi mind tricks
Only works in FF3+, Chrome (limited) and IE8+ Use jQueryUI widgets when possible (YUI and Dojo are better)
http://www.w3.org/WAI/intro/aria.php

37 of 45

What about HTML5?

HTML5 is the ideal but...
Until support is better you should use both ARIA and HTML5
ARIA was designed to supplement native language semantics http://www.w3.org/TR/wai-aria/introduction

38 of 45

ARIA Landmarks

Vs skip links
Breaks document up into sections that are generally applicable to any site
Makes it very quick for users to jump around the site to quickly find information.
Can be combined with HTML5 elements.

http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/

39 of 45

Landmark Demo

40 of 45

Landmarks

Landmark	Purpose	Sister HTML5 Tag
banner	Logo, main heading, etc..	<header>
complementary	Supporting content (ads, stock ticker…)	<aside>*
contentinfo	metadata	<footer>
form	Section containing forms. Don’t put it on a div containing forms, not on forms itself.
main	main content. (no more than one)	<article>?
navigation		<nav>*
search	search box