Accessible Web Scott WilliamsWalt StoverOffice for Institutional Equityswims@umich.edu@swimsy

Disabilities and the web

Visual: blindness, low-vision, color-blindness Hearing: partial to total deafness Motor: inability to use a mouse or physical

keyboard, slow response time, limited fine motor control

Cognitive: Learning disabilities, distractibility, dyslexia, inability to remember or focus on large amounts of information

1in 5 people have a disability

People with disabilities in the U.S: 54.4 million

People in U.S. with disabilities that impede them using the internet: 24 million

People age 15 and older having difficulty hearing a normal conversation: 8 million. Completely deaf: 1 million

People age 15 and older having difficulty reading ordinary newsprint (even with glasses): 8 million. Completely blind: 1.8 million

More stats Cognitive disabilities

Greater number than physical and perceptual disabilities combined

Adults with ADD/ADHD: 16 million 38% of soldiers, 31% of Marines and 49% of National Guard

members returning from combat report psychological conditions such as TBI and PTSD

Mobility issues—8 million Americans have difficulty using their arms or hands

11 million people 6 and older need assistance with everyday activities

8.3% of the U.S. population have 2 or more disabilities

Most influential disabled user?

Google, “the blind billionaire” — Jeffery Zeldman

What’s good for accessibility is good for SEO

The web offers unprecedented opportunities for disabled

Education News Commerce Social Web is an enabling technology

Legal

Rehabilitation Act of 1973 and Americans with Disabilities Act of 1991, both of which prohibit colleges and universities from discriminating against students, faculty, and staff with disabilities

Users with disabilities must have the full and equal enjoyment of all goods, programs, and activities

If users with disabilities are forced to use separate access, it must be equally effective

Legal cont’d DOJ is in the process of revising Title II and III of the ADA

to include online resources of state and local entities ETA of revised rules: 2 years??? Will be based on W3C WCAG 2.0 Level A or AA DOJ not interested in the budgetary or logistical reasons

for why you are violating someone’s civil rights Case law—individuals or entities can file civil rights

complaints, e.g., PSU, Google, JetBlue, Target, Southwest Airlines, Priceline.com, Ramada, Kindle, and LSAC

NFB (the heat)

National Federation of the Blind Litigates educational institutions who violate

civil rights and to get to non-compliant companies

“My job for the foreseeable future is to travel around to universities with a torch and a can of gasoline and start as many fires as possible!”—Dan Goldstein, chief litigator for the NFB

PSU received notice without warning on Christmas Eve

How to keep Dan away

Procurement policies must include accessibility requirements

New technology must be tested before purchasing to verify accessibility claims

Self audit Remediation plan Policy Accessibility coordinator

What is web accessibility?

Making the web accessible for the widest possible audience

Inseparable from usability: improve one and you improve the other

Best way to accomplish accessibility? Adherence to standards

WCAG 2.0

W3C Web Content Accessibility Guidelines De facto standard world-wide. Cited in U.S case law.

Adopted by governments. Future basis for ADA and Section 508 compliance.

WCAG 2.0 is principle-, not technology-based The four principles (POUR):

Perceivable Operable Understandable Robust

Perceivable

Provide text alternatives for images and form elements

Provide captions and transcripts for video and audio

Use correct semantic markup so content can be presented in different ways

Make it easier for users to see content by using good color contrast

Avoid movement and distractions on page

Operable

All functionality is available from the keyboard!

Users have control over timing and limits Do not cause seizures (don’t flash content) Provide ways to help users navigate, find

content, and determine where they are

Understandable

Economical and plain use of language Text supplemented with illustrations, videos,

and other formats where appropriate (i.e., use good Universal Design)

Navigation, information structure are discernable and consistent

Make pages operate in predictable ways Help users avoid and correct mistakes

Robust

Functional across various technologies Syntax errors that don’t affect visual

presentation may hamper assistive technology and accessibility evaluation tools

Adhering to W3C standards ensures future compatibility

Validate your code at validator.w3c.org

Best Practices

1. Navigation

Navigation

Navigation is a critical aspect of accessibility Information being apparent isn’t enough Sighted users have tried and true visual cues to

orient them on a page Banner Search box Main navigation box Content well

Blind and low-vision users rely on proper coding of page for orientation

What if you can’t see?

Title of page lets you know what page you’re on when page loads

Proper heading placement and hierarchy conveys organization of page and allows SR users to skip navigation

Link descriptions need to be unique and make sense out of context

ARIA document landmark roles highlight geographic regions of webpage

Browser “find function” used as well

Skip-to-content links

Not just for screen reader users Allows those who cannot use a mouse to avoid

tabbing through entire menu and sidebar. Need to be visible when they receive focus

Place at top of document; limit to 3 Jump to <h1> tag, which should always directly

precede main content Should be visible on keyboard focus so sighted

keyboard users will know it is there

Proper headings

Screen readers can find and list headings <h1> heading uniquely identifies the page in

the website Should be placed directly in front of the main

content of the page The <h1> header should also match at least a

subset of the the page <title> Other headings convey content organization

Meaningful link text

Screen readers can find and list links Descriptions for the links must be meaningful

out of context, via tabbing or presented in a list

Don’t use “here”, “click here”, “read this”, and “more”

Don’t use URL as a link description—will sound like gibberish, unless very short and intuitive

Accessible menus

Main navigation needs to be operable using the keyboard only

Subcategories should be visible on keyboard focus

Main menu items link to index pages that list subcategories

Complex menus with multiple columns and headings have negative effect on those with cognitive impairments, low vision, and motor impairments

ARIA landmark roles

They do what good visual layout does for sighted users—call out main geographic areas of web page: Banner Navigation Search Main content Auxiliary content Posted content Footer information

<div id="maincontent" role="main"></div>

2. Text equivalents

All informative non-text elements must be accompanied by text equivalents Informative images graphical representations of text (including drop

caps, equations, and symbols) form controls and text fields graphical buttons and links audio files and podcasts Videos

<img src="mlogo.gif" alt="University of Michigan Block M logo">

   3. Forms

Use <label> tag to describe form fields and controls to screen reader users (is a form of alternative text)

Use <fieldset> and <legend> tags when necessary to group form elements together (not for layout)

Keep form labels close to their associated controls

Make sure the form is operable using just the keyboard

Form example

Label attribute matches input id — not name

4. Data Tables

Provide a table summary Use table headings Use the scope attribute to indicate columns

and rows

5. Scripting

Using javascript does not necessarily make your site inaccessible

Most screen readers can interact with javascript

Most SR users (98%) have Javascript enabled Ensure that users can operate widgets using

the keyboard only Ensure that updated page content is apparent

to a screen reader

Mouse-dependent Event Handlers

onClick onMouseOver and onMouseOut OnMouseDown onChange used with onSelect onHover (must die)

AJAX and ARIA ARIA = Accessible Rich Internet Applications The use of AJAX introduces new challenges in

accessibility Updating information on a page without a page

refresh can disorient assistive tech users or leave them unable to view the updated content

ARIA roles and properties are a means of making AJAX widgets accessible and info apparent

The scope of ARIA role and property code is limited to assistive technologies

ARIA resources

WAI-ARIA Overviewhttp://www.w3.org/WAI/intro/aria/

Mozilla Developer Networkhttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/

Paciallo Group’s ARIA examples :(http://hanshillen.github.com/jqtest/)

Open Ajax Alliancehttp://oaa-accessibility.org/examples/

6. Color

An often overlooked aspect of web accessibility Many more people are visually impaired or

color blind than are legally blind There are tools that quantify the contrast

between text and its background Check your web templates’ color contrast

during design phase

What is color contrast?

You intuitively know when something has poor contrast

There is an algorithm for determining a numerical value

Ratio of foreground luminance to background luminance

Big is good: 4.5:1 or greater for Level AA

Don’t use color alone to convey meaning

Test in gray scale …

Accessibility Resources

U-M: http://umich.edu/webaccess/ WebAIM: http://webaim.org Online accessibility checkers:

http://wave.webaim.org/ http://www.achecker.ca/

Questions?