introduction to web accessibility
TRANSCRIPT
Introduction to Web Accessibility
Jonathan Whiting Plain Talk 2012
Overview
• Web accessibility standards and laws • Principals of web accessibility • How users with disabilities interact with
web technologies • Evolution of accessibility implementation • Evaluating accessibility (time permitting)
The Evolution of Web Accessibility Guidelines
• WCAG 1.0 (1999) • Section 508 of the Rehabilitation Act
(2001) • WCAG 2.0 (2008)
WCAG 1.0
• Finalized in 1999 • Checkpoint driven • Priority 1, 2, and 3 (Level A, AA, and AAA) • Specific to HTML
Section 508
• Legalistic - easy to verify compliance • Applies to federal government • Very limited in scope. The de facto
standard. • Many states have adopted the guidelines • Currently being updated
Americans with Disabilities Act
• Pre-dates the web • “Places of public accommodation” • Current proposal to define ADA
accessibility standards
“The ADA’s promise to provide an equal opportunity for individuals with disabilities...will be achieved in today’s technologically advanced society only if it is clear to State and local governments, businesses, educators, and other public accommodations that their websites must be accessible.”
Department of Justice, 2010
WCAG 2.0
• Finalized December 2008 • Principles based • Technology agnostic • Maintains levels (A, AA, and AAA)
POUR
• Perceivable • Operable • Understandable • Robust
From Web Content Accessibility Guidelines (WCAG) 2.0
Ensure POUR Content Across Disability Types
• Hearing - Deaf and hard-of-hearing • Vision - Blind, low vision, color-blind • Motor - Difficulty using a mouse or
keyboard • Cognitive • Seizure
Perceivable Operable Understandable Robust
Auditory Disabilities
From webaim.org/intro/
Blindness
Headings
The Wrong way to do headings: • HTML-<p class=“heading2”>Big text (usually) resized
with CSS</p> • PPT and MS Word- Plain text enlarged
The Right way to do headings: • HTML- <h2>Use true headings</h2> • PPT- Use slide templates • Word- Use styles panel
Alternative Text • Read by screen readers • Alternative to images when images
are disabled or not supported • Provides semantic meaning and
description to images • Used by search engines
What is equivalent alt text?
CONTENT and FUNCTION
VERY RARELY Description
Alternative Text
Alternative Text
Alt=“Center for Health Literacy Conference: Plain Talk in Complex Times 2012”
A. "Minivan" B. An empty alt attribute (alt="") will suffice C. "Image of blue vehicle" D. "Link to minivans" E. The image does not need an alt attribute
Meaningful Link Text
For more information on this topic, read Essentials of Online Course Design: A Standards-Based Guide- http://www.amazon.com/Essentials-Online-Course-Design-Standards-Based/dp/0415873002/ref=sr_1_11?s=books&ie=UTF8&qid=1329661475&sr=1-11
Form Labels
<label for=”firstname”>First Name:</label> <input type=”text” id=”firstname” name=”firstname” />
First Name:
Text boxes, text areas, select menus, checkboxes, and radio buttons
Table Headers
Class Name Course Number Location
Advanced Website Development BIS 5650 B105
Database Management BIS 3330 B220
Class Schedule
Screen Reader Surveys
Screen Reader Survey Highlights • Headings are very important
– Over 60% of users navigate by headings first on lengthy pages
– Over 80% of users find heading levels (h1, h2, etc.) useful • 99% of users have JavaScript enabled • Top five issues
– The presence of inaccessible Flash content – CAPTCHA - images presenting text used to verify that you
are a human user – Links or buttons that do not make sense – Images with missing or improper descriptions (alt text) – Screens or parts of screens that change unexpectedly
Google is blind
...and deaf ...and can’t use a mouse
Low Vision Use good contrast and adequate font size. As you can see poor contrast and smaller font size make it much more difficult to read text. Also, remember that you should not use images for ...
Color Blindness
`
Color Blindness
The green mushrooms listed here are okay to eat. The red mushrooms will kill you.
– Amanita – Chanterelle – Porcini – Shitake – Tylopilus
Color Blindness
The green mushrooms listed here are okay to eat. The red mushrooms will kill you.
– Amanita – Chanterelle – Porcini – Shitake – Tylopilus
Perceivable Operable Understandable Robust
The Secret to Everlasting Happiness
Please finish reading this text – it will give you the secret to everlasting happiness. The secret is simple, all you need to do is to stop worrying about the key to everlasting happiness and enjoy the moment.
Sorry! Time’s up! Better luck next time!
Separate content/functionality from visual design
Web Developer Toolbar for Firefox
Speech Recognition
Perceivable Operable Understandable Robust
Understandable
• Be careful with movement and other distractions (including transitions)
• Semantic organization (headings, lists, etc.)
• Be consistent • Simplify , Simplify
Robust
Perceivable Operable Understandable Robust
Browser Support
Standards
Device-Independence
POUR (again)
• Perceivable • Operable • Understandable • Robust
Evolution of Accessible Design
Accommodation
Accommodation
• “People with disabilities don’t visit our site.”
• Not ‘timely’ (e.g., call a phone number or mail in a form)
• Not ‘equivalent’ (text-only or ‘accessible’ versions)
• “It’s not my job.”
Retrofitting
Retrofitting
• Accessibility is ‘bolted on’ to an existing product
• More expensive and time-consuming, at least initially
• “We can’t make it accessible so we’re not going to build it.”
Accessible Design
Accessible Design
• Accessibility is addressed throughout the design process (requirements, mockups, design, development, QA, etc.)
• Developers have training and support • Product is more usable and accessible for
everyone
How do you get to accessible design?
1. A shared commitment 2. A concrete policy and plan 3. Sufficient support for personnel 4. Ongoing evaluation
Preferred Formats for Web Content
HTML > PDF > Doc/PPT > Anything else
...except PPT slides, then PDF is usually better