Upload
scott-williams
View
490
Download
0
Embed Size (px)
Citation preview
Accessible Web Scott WilliamsOffice of Institutional [email protected]@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
Even more stats
8.3% of the U.S. population have 2 or more disabilities
40,000 people the in U.S are both deaf and blind
41 percent of adults 65 and older have a disability
8.7 million people with disabilities are poor
70% of disabled are unemployed
Most influential disabled user?
Google, “the blind billionaire” — Jeffery Zeldman
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 out
Smart money: 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
Screen reader demo
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
Document 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
Paciallo Group’s ARIA examples :(http://hanshillen.github.com/jqtest/)
CodeTalks website(http://wiki.codetalks.org/)
AOL Developer Network accessibility website(http://dev.aol.com/topic/accessibility)
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://www.achecker.ca/ http://wave.webaim.org/