0
A Principles-BasedApproach to Web   Accessibility        Jared Smith     http://webaim.org
Test Questions1. True, False, or I don’t know   My web content is currently   accessible.
2. The five main categories of disabilities   affected by Internet accessibility   barriers are...
3. Web accessibility is easiest to implement A. As the culminating step after user tests B. As an integral part of the des...
4. Which of the following is cited most   regarding inaccessible web sites? A. I wasn’t aware of the problem B. Accessibil...
5. True or False  Accessible web design benefits only  a small percentage of the  population.
Accessibility  “Development of information    systems flexible enough to accommodate the needs of the     broadest range of...
The Evolution of WebAccessibility Guidelines• WCAG 1.0 (1999)• Section 508 of the  Rehabilitation Act (2001)• WCAG 2.0 (20...
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  s...
WCAG 2.0•   Finalized December 2008•   Principles Based•   Technology Agnostic•   Maintains Levels (A, AA, and AAA)
Americans with      Disabilities Act• Pre-dates the web• “Places of public accommodation”• Currentthe web to expand ADA to...
Your site can be compliant, yet  inaccessible
Your site can betechnically accessible, yet functionally inaccessible
Web Accessibility  ... it’s not rocket surgery!
... but don’t bite off more than you can chew.
POUR
P erceivableO perableU nderstandableR obust
Ensure POUR contentacross disability typesVision - blind, low-vision, color-blindDeaf and Hard-of-hearingMotorCognitiveSei...
P erceivableO perableU nderstandableR obust
Perceivable
Perceivable -Auditory Disabilities•Captions for video & live audio• Text transcripts for all audio content
Perceivable - Visual        Disabilities• Web pages are linear• Use meaningful links. Avoid “click here”.• Alternative tex...
Perceivable - Visual        Disabilities• Associate text labels with form elements• Associate data cells to row/column hea...
You’ve won the lottery! Press the GREENbutton to accept your prize and the RED           button to decline.
You’ve won the lottery! Press the GREENbutton to accept your prize and the RED           button to decline.
The green mushrooms listed here areOK to eat. The red mushrooms will kill                 you. •   Amanita •   Chanterelle...
The green mushrooms listed here areOK to eat. The red mushrooms will kill                 you. •   Amanita •   Chanterelle...
vs.Vitally Important Text
P erceivableO perableU nderstandableR obust
Operable
Who does this affect?• Motor disabilities • Fine motor control and use of a mouse • Repetition and fatigue • Control over ...
Be careful with flashing/        strobing images• More than 3 times in any one-second period• Size, brightness, and red thr...
Operable• Ensuring keyboard accessibility• Don’t remove focus indicators• Ensure links are clearly distinguishable• Logica...
Operable•   Allow user to skip over repetitive and/    or lengthy lists of links•   Error-prevention and recovery    mecha...
Secret of Everlasting     Happiness
Secret of Everlasting         Happiness     Please finish reading this text     – it will give you the secret to  everlast...
Secret of Everlasting     Happiness Sorry! Time’s up!Better luck next time!
Separate content/functionality     from visual design
Web Developer Toolbar for Firefox
FAIL!
Can you have too much accessibility?
Direct users to content
P erceivableO perableU nderstandableR obust
Understandable
Who does this affect?• Cognitive disabilities • Largest disability group. Larger than   all the others put together.• Ever...
Understandable• Be careful with movement and  other distracters• Semantic organization (headings,  lists, etc.)• Be consis...
Understandable• Focus the user’s attention• “Chunk” and/or simplify content• Balance cognitive load vs. funtionality
Understandable
Understandable
P erceivableO perableU nderstandableR obust
Robust
Robust
Robust
Robust
Robust
P erceivableO perableU nderstandableR obust
wave.webaim.org
Thank You!       Jared Smith    http://webaim.org       Web based forums      E-mail discussion list Tutorials, articles, ...
Jared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web Accessibility
Upcoming SlideShare
Loading in...5
×

Jared Smith - Introduction to Web Accessibility

1,236

Published on

Copyright 2011 by WebAIM, used with permission. "Introduction to Web Accessibility" was presented at the Center for Health Literacy Conference 2011: Plain Talk in Complex Times by Jared Smith, Associate Director, WebAIM.

Description: This training session will teach the principals of Web accessibility and demonstrate how users with disabilities interact with Web technologies. Participants will also learn about the legal guidelines and international standards for website accessibility compliance.

Published in: Education, Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,236
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Jared Smith - Introduction to Web Accessibility"

  1. 1. A Principles-BasedApproach to Web Accessibility Jared Smith http://webaim.org
  2. 2. Test Questions1. True, False, or I don’t know My web content is currently accessible.
  3. 3. 2. The five main categories of disabilities affected by Internet accessibility barriers are...
  4. 4. 3. Web accessibility is easiest to implement A. As the culminating step after user tests B. As an integral part of the design process C. By creating an alternative version D. After receiving a complaint by a person with a disability
  5. 5. 4. Which of the following is cited most regarding inaccessible web sites? A. I wasn’t aware of the problem B. Accessibility will hinder the look/feel/ functionality C. I didn’t know how to make it accessible D. We don’t have the budget to make it accessible
  6. 6. 5. True or False Accessible web design benefits only a small percentage of the population.
  7. 7. 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 adisability that affects computer use
  8. 8. The Evolution of WebAccessibility Guidelines• WCAG 1.0 (1999)• Section 508 of the Rehabilitation Act (2001)• WCAG 2.0 (2008)
  9. 9. WCAG 1.0• Finalized in 1999• Checkpoint driven• Priority 1, 2, and 3 (Level A, AA, and AAA)• Specific to HTML
  10. 10. Section 508• Legalistic - easy to verify compliance• Applies to federal government• Very limited in scope. The de facto standard.• guidelines. Many states have adopted the• Currently being updated
  11. 11. WCAG 2.0• Finalized December 2008• Principles Based• Technology Agnostic• Maintains Levels (A, AA, and AAA)
  12. 12. Americans with Disabilities Act• Pre-dates the web• “Places of public accommodation”• Currentthe web to expand ADA to include proposal
  13. 13. Your site can be compliant, yet inaccessible
  14. 14. Your site can betechnically accessible, yet functionally inaccessible
  15. 15. Web Accessibility ... it’s not rocket surgery!
  16. 16. ... but don’t bite off more than you can chew.
  17. 17. POUR
  18. 18. P erceivableO perableU nderstandableR obust
  19. 19. Ensure POUR contentacross disability typesVision - blind, low-vision, color-blindDeaf and Hard-of-hearingMotorCognitiveSeizure
  20. 20. P erceivableO perableU nderstandableR obust
  21. 21. Perceivable
  22. 22. Perceivable -Auditory Disabilities•Captions for video & live audio• Text transcripts for all audio content
  23. 23. 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
  24. 24. 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
  25. 25. You’ve won the lottery! Press the GREENbutton to accept your prize and the RED button to decline.
  26. 26. You’ve won the lottery! Press the GREENbutton to accept your prize and the RED button to decline.
  27. 27. The green mushrooms listed here areOK to eat. The red mushrooms will kill you. • Amanita • Chanterelle • Porcini • Shitake • Tylopilus http://colorfilter.wickline.org/
  28. 28. The green mushrooms listed here areOK to eat. The red mushrooms will kill you. • Amanita • Chanterelle • Porcini • Shitake • Tylopilus http://colorfilter.wickline.org/
  29. 29. vs.Vitally Important Text
  30. 30. P erceivableO perableU nderstandableR obust
  31. 31. Operable
  32. 32. Who does this affect?• Motor disabilities • Fine motor control and use of a mouse • Repetition and fatigue • Control over timing or moving elements
  33. 33. 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
  34. 34. Operable• Ensuring keyboard accessibility• Don’t remove focus indicators• Ensure links are clearly distinguishable• Logical reading/navigation order• Consistent navigation elements
  35. 35. 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
  36. 36. Secret of Everlasting Happiness
  37. 37. 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.
  38. 38. Secret of Everlasting Happiness Sorry! Time’s up!Better luck next time!
  39. 39. Separate content/functionality from visual design
  40. 40. Web Developer Toolbar for Firefox
  41. 41. FAIL!
  42. 42. Can you have too much accessibility?
  43. 43. Direct users to content
  44. 44. P erceivableO perableU nderstandableR obust
  45. 45. Understandable
  46. 46. 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
  47. 47. Understandable• Be careful with movement and other distracters• Semantic organization (headings, lists, etc.)• Be consistent.• Strive for brevity. Use the simplest language possible.
  48. 48. Understandable• Focus the user’s attention• “Chunk” and/or simplify content• Balance cognitive load vs. funtionality
  49. 49. Understandable
  50. 50. Understandable
  51. 51. P erceivableO perableU nderstandableR obust
  52. 52. Robust
  53. 53. Robust
  54. 54. Robust
  55. 55. Robust
  56. 56. Robust
  57. 57. P erceivableO perableU nderstandableR obust
  58. 58. wave.webaim.org
  59. 59. Thank You! Jared Smith http://webaim.org Web based forums E-mail discussion list Tutorials, articles, and resources Blog Accessibility Reference Guide
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×