Accessible Web

Scott WilliamsOffice for Institutional Equityswims@umich.edu

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: 60 million

People in U.S. with disabilities that impede them using the internet: 27 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

Legal

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

DOJ is in the process of revising Title II and III of the ADA to include online resources of state and local entities

DOJ not interested in the budgetary or logistical reasons for why a billion dollar business is violating someone’s civil rights

Case law—individuals or entities can file civil rights complaints, e.g., Penn State, NYU, Northwestern, Target, Southwest Airlines, Priceline.com, Ramada, Kindle, and LSAC

What is accessibility?

Web Accessibility

Making the web accessible for the widest possible audience

Inseparable from usability, mobile, SEO: improve one and you improve the others

Best way to accomplish accessibility? Adherence to standards.

WCAG 2.0

W3C Web Content Accessibility Guidelines

De facto standard world-wide. Adopted by governments. Cited in U.S case law. 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 (e.g., headings and lists) 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., support various learning modalities)

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 http://validator.w3c.org

Biggest barriers to AT users

CAPTCHA – images, presenting text used to verify that you are a human user (& reCAPTCHA)

Inaccessible Flash content

Cryptic Links or buttons

Images with missing or improper descriptions (alt text)

Complex or difficult forms

Lack of keyboard accessibility

Screens or parts of screens that change unexpectedly

Missing or improper headings

Too many links or navigation items

Complex data tables

Lack of "skip to main content" or "skip navigation" links

Inaccessible or missing search functionality

Top 5 Web Best Practices

1. Proper <h1> heading

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>

2. Proper heading hierarchy

Headings need to be properly nested to convey organization of the page

<h2> tags follow the <h1> tag, the <h3> tags follow the <h2> tags, etc.

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

4. Text equivalents

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

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

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

5. Keyboard accessibility

Make sure that form widgets can be operated using the keyboard only

Make sure tab order is logical and intuitive and visible

Source order = tab order

Use source order, not tabindex attribute, to program tab order

Accessible Wordpress

Themes: http://wp-accessible.org/themes/

Plugins: http://wordpress.org/plugins/tags/accessibility

Wordpress Accessibility Group:http://make.wordpress.org/accessibility/

Joe Dolson: http://profiles.wordpress.org/joedolson

Accessible MS Word

As in the web environment, navigation and orientation key

Create structured documents Use heading formatting for headings Use table-of-contents utility for large documents

to provide navigation

Provide alternative text for images

Use table utility to create tables

Use proper styles for formatting text

Format Headings

Alt text for images

Use the Description Field

Add alt text to the Description field. Leave the Title field blank.

JAWS reads combined Title + Description fields

Of the two fields, Description is the only field that is backwards-compatible. If you add a Title in Office 2010 and open the document in an earlier version, the Title is lost.

Third-party tools that export or convert Office documents utilize only the Description field, not the Title field

Use table utility—not tabs

Accessible PDFs

HTML format is always preferable for assistive technology

PDFs have 2 layers: presentation and logical Presentation: information for display purposes

only; not apparent to assistive technology Logical: information for assistive technology only;

does not affect display information

A “tagged” PDF will have this logical layer and be apparent to screen readers. Complex PDFs may not have correct reading order or alternative text for images, however.

Creating accessible PDFs

Adobe PDF Maker add-in is no longer required for Office 2010

However, if you check the option to “Minimize size (publishing online)”, you will lose all structure tags

When minimizing, you must also check the “Document structure tags for accessibility” checkbox

Office 2011 for Mac

Office for Mac 2011 can save as PDF, but it doesn’t produce a tagged PDF

Accessibility information, including heading structure and alt text, is lost in the conversion

Do not use Mac version for PDF creation

Checking PDF Accessibility

Using Adobe Reader, select the menu pick:Document > Accessibility Quick Check

Pop-up window will let you know if PDF is untagged.

Virtually all PDF accessibility checkers only detect if a PDF is tagged, not if it is actually readable.

Netcentric’s PAW handy for creating accessible Word documents

Netcentric’s CommonLook necessary for formal remediation of complex PDF document

Word & PDF Resources

http://www.webaim.org/techniques/word/

http://www.webaim.org/techniques/powerpoint/

http://www.webaim.org/techniques/acrobat/converting.php

http://www.commonlook.com/commonlook-office-overview

PowerPoint

Use predefined layouts. They are accessible.

Add alternative text to images

Edit hyperlinks

Use the PowerPoint Accessibility Checker

If converting to HTML, do not use PPT save-as-web feature, use Lecshare: http://lecshare.com/

Use alt text for images

Do not use URLs for link text

Use the accessibility checker

YouTube

Automatic captioning does not provide adequate captions. Error rate is too high!

However, auto-captions do provide good first draft to work from. Use the YouTube editor to clean up the caption track: http://goo.gl/bVPr3z

Patty Bradley put together a nice tutorial:http://goo.gl/QIeXOf

Accessibility Resources

For assistance, email: swims@umich.edu

U-M: http://umich.edu/webaccess/

WebAIM: http://webaim.org/

Online accessibility checkers: http://www.achecker.ca/ http://wave.webaim.org/

Questions?