Jared Smith - Introduction to Web Accessibility
-
Upload
plaintalkconf -
Category
Education
-
view
1.269 -
download
1
description
Transcript of Jared Smith - Introduction to Web Accessibility
![Page 1: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/1.jpg)
A Principles-Based Approach to Web
Accessibi l ityJared Smith
http://webaim.org
![Page 2: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/2.jpg)
Test Questions
1. True, False, or I don’t know
My web content is currently accessible.
![Page 3: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/3.jpg)
2. The five main categories of disabilities affected by Internet accessibility barriers are...
![Page 4: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/4.jpg)
3. Web accessibility is easiest to implementA. As the culminating step after user testsB. As an integral part of the design processC. By creating an alternative versionD. After receiving a complaint by a person
with a disability
![Page 5: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/5.jpg)
4.Which of the following is cited most regarding inaccessible web sites?
A. I wasn’t aware of the problemB. Accessibility will hinder the look/feel/
functionalityC. I didn’t know how to make it accessibleD. We don’t have the budget to make it
accessible
![Page 6: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/6.jpg)
5. True or False
Accessible web design benefits only a small percentage of the population.
![Page 7: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/7.jpg)
Accessibility
“Development of information systems flexible enough to
accommodate the needs of the broadest range of users...
regardless of age or disability”
8.5% of the population has a disability that affects computer use
![Page 8: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/8.jpg)
The Evolution of Web Accessibility Guidelines
•WCAG 1.0 (1999)
• Section 508 of the Rehabilitation Act (2001)
•WCAG 2.0 (2008)
![Page 9: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/9.jpg)
WCAG 1.0
• Finalized in 1999
•Checkpoint driven
• Priority 1, 2, and 3 (Level A, AA, and AAA)
• Specific to HTML
![Page 10: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/10.jpg)
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
![Page 11: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/11.jpg)
WCAG 2.0
• Finalized December 2008
• Principles Based
•Technology Agnostic
•Maintains Levels (A, AA, and AAA)
![Page 12: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/12.jpg)
Americans with Disabilities Act
• Pre-dates the web
• “Places of public accommodation”
•Current proposal to expand ADA to include the web
![Page 13: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/13.jpg)
Your site can be compliant, yet inaccessible
![Page 14: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/14.jpg)
Your site can be technically accessible, yet functionally inaccessible
![Page 15: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/15.jpg)
Web Accessibility
... it’s not rocket surgery!
![Page 16: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/16.jpg)
... but don’t bite off more than you can chew.
![Page 17: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/17.jpg)
POUR
![Page 18: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/18.jpg)
POUR
erceivableperablenderstandableobust
![Page 19: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/19.jpg)
Ensure POUR content across disability types
Vision - blind, low-vision, color-blindDeaf and Hard-of-hearingMotorCognitiveSeizure
![Page 20: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/20.jpg)
POUR
erceivableperablenderstandableobust
![Page 21: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/21.jpg)
Perceivable
![Page 22: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/22.jpg)
Perceivable - Auditory Disabilities
•Captions for video & live audio
•Text transcripts for all audio content
![Page 23: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/23.jpg)
Perceivable - Visual Disabilities
• Web pages are linear
• Use meaningful links. Avoid “click here”.
• Alternative text for non-text elements
• Page is readable and functional at a minimum of 2X zoom and 2X font size
![Page 24: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/24.jpg)
Perceivable - Visual Disabilities
• Associate text labels with form elements
• Associate data cells to row/column headers
• Sufficient contrast - http://webaim.org/resources/contrastchecker/
• Ensure that meaning is not conveyed with color alone
![Page 25: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/25.jpg)
You’ve won the lottery! Press the GREEN button to accept your prize and the RED
button to decline.
![Page 26: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/26.jpg)
You’ve won the lottery! Press the GREEN button to accept your prize and the RED
button to decline.
![Page 27: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/27.jpg)
The green mushrooms listed here are OK to eat. The red mushrooms will kill
you.
• Amanita
• Chanterelle
• Porcini
• Shitake
• Tylopilus
http://colorfilter.wickline.org/
![Page 28: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/28.jpg)
The green mushrooms listed here are OK to eat. The red mushrooms will kill
you.
• Amanita
• Chanterelle
• Porcini
• Shitake
• Tylopilus
• Amanita
• Chanterelle
• Porcini
• Shitake
• Tylopilus
http://colorfilter.wickline.org/
![Page 29: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/29.jpg)
Vitally Important Textvs.
![Page 30: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/30.jpg)
POUR
erceivableperablenderstandableobust
![Page 31: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/31.jpg)
Operable
![Page 32: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/32.jpg)
Who does this affect?
• Motor disabilities
• Fine motor control and use of a mouse
• Repetition and fatigue
• Control over timing or moving elements
![Page 33: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/33.jpg)
Be careful with flashing/strobing images
• More than 3 times in any one-second period
• Size, brightness, and red threshold
• Annoying rule
• WARNING: This page can cause seizures - fletchowns.net/what.html
![Page 34: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/34.jpg)
Operable• Ensuring keyboard accessibility
• Don’t remove focus indicators
• Ensure links are clearly distinguishable
• Logical reading/navigation order
• Consistent navigation elements
![Page 35: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/35.jpg)
Operable• Allow user to skip over repetitive and/
or lengthy lists of links
• Error-prevention and recovery mechanisms
• Give user the control over time-sensitive changes
![Page 36: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/36.jpg)
Secret of Everlasting Happiness
![Page 37: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/37.jpg)
Secret of Everlasting Happiness
Please finish reading this text – it will give you the secret to
everlasting happiness. The secretis simple, all you need to do is to stop worrying about the key to everlasting
happiness and enjoy the moment.
![Page 38: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/38.jpg)
Secret of Everlasting Happiness
Sorry! Time’s up!Better luck next time!
![Page 39: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/39.jpg)
![Page 40: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/40.jpg)
![Page 41: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/41.jpg)
Separate content/functionality from visual design
![Page 42: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/42.jpg)
![Page 43: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/43.jpg)
Web Developer Toolbar for Firefox
![Page 44: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/44.jpg)
![Page 45: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/45.jpg)
![Page 46: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/46.jpg)
FAIL!
![Page 47: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/47.jpg)
Can you have too much accessibility?
![Page 48: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/48.jpg)
Direct users to content
![Page 49: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/49.jpg)
POUR
erceivableperablenderstandableobust
![Page 50: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/50.jpg)
Understandable
![Page 51: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/51.jpg)
Who does this affect?
•Cognitive disabilities
• Largest disability group. Larger than all the others put together.
• Everyone!
• Because users vary greatly, we’ll focus on generic recommendations
![Page 52: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/52.jpg)
Understandable•Be careful with movement and
other distracters
• Semantic organization (headings, lists, etc.)
•Be consistent.
• Strive for brevity. Use the simplest language possible.
![Page 53: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/53.jpg)
Understandable
•Focus the user’s attention
• “Chunk” and/or simplify content
•Balance cognitive load vs. funtionality
![Page 54: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/54.jpg)
Understandable
![Page 55: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/55.jpg)
Understandable
![Page 56: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/56.jpg)
POUR
erceivableperablenderstandableobust
![Page 57: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/57.jpg)
Robust
![Page 58: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/58.jpg)
Robust
![Page 59: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/59.jpg)
Robust
![Page 60: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/60.jpg)
Robust
![Page 61: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/61.jpg)
Robust
![Page 62: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/62.jpg)
POUR
erceivableperablenderstandableobust
![Page 63: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/63.jpg)
wave.webaim.org
![Page 64: Jared Smith - Introduction to Web Accessibility](https://reader033.fdocuments.us/reader033/viewer/2022051312/54632ebab1af9f7d228b5338/html5/thumbnails/64.jpg)
Thank You!Jared Smith
http://webaim.orgWeb based forums
E-mail discussion listTutorials, articles, and resources
BlogAccessibility Reference Guide