Your SlideShare is downloading. ×
0
Web Accessibility for the 21st Century            Denise Paolucci, Dreamwidth Studios                        denise@dreamw...
Slides, resources, andexamples downloadable     at end of talk!
What do we mean by  “accessibility”?
“Accessibility” is aboutmaking websites workwith assistive tech, not       against it.
Multiple standards• W3C’s Web Content Accessibility  Guidelines• WebAIM (Web Accessibility in Mind)• US Government’s Secti...
:(• Standards/guidelines are all very high level• And have specific ideas about what  accessibility needs people have• Peop...
People think of:• Blind/low-vision users using screenreaders  (Jaws, NVDA,VoiceOver)• Users unable to type using dictation...
It’s not just about   screenreaders (or dictation, or  keybord input)
What’s the most  commonly usedassistive technology?
Larger text size is themost common assistive  tech on the internet(even if you don’t think    it’s assistive tech)
Also:•   Stylish                  •   Disabling autoplay/sound•   NoScript                 •   AdBlock•   NoSquint        ...
• Migraineurs• People with cognitive disabilities• Dyslexic users• Colorblind users• Deaf users
So how do you serveall these accessibility        needs?
...sometimes you don’t            :(    (but you can try!)
Don’t make a specialversion: it never works
Universal Design• Improves accessibility• Improves your cross-platform support• And your search engine visibility• Everybo...
A light speed tour of  Universal Design    (this will not be on the exam)
Universal Design        Principles• NC State University’s Center for Universal  Design has 7 principles• Not all of them a...
1. Equitable Use
1. Equitable Use2. Flexibility in Use
1. Equitable Use     2. Flexibility in Use3. Simple and Intuitive Use
1. Equitable Use     2. Flexibility in Use3. Simple and Intuitive Use4. Perceptible Information
1. Equitable Use     2. Flexibility in Use3. Simple and Intuitive Use4. Perceptible Information   5. Tolerance for Error
those are REALLY high   level guidelines :(
• There are a lot of checklists for  implementing the high-level guidelines• Many of them disagree• A lot of the advice is...
<i>Lets</i> be <b>ACCESSIBLE!</b>
<i>Lets</i> be <b>ACCESSIBLE!</b><em>Lets</em> be <strong>ACCESSIBLE!</strong>
Let’s be ACCESSIBLE!
Let’s be ACCESSIBLE!Let’s be ACCESSIBLE!
Semantic markup isn’t      wrong...
But most screenreaders   don’t differentiate
(because most of the    web doesn’t    differentiate)
you are in a maze of   twisty little bestpractices, all competing
and automated testing  tools don’t catch      everything
31 Quick Techniques To Make Your Site BetterThese are all downloadable at the end, with exercises                and furth...
1. Make sure all images   have alt attributes,   height, and width
Bad:<img src="image.png" />
Better:<img src="image.png" height=480width=600 alt="Woman laughingwith salad" />    (writing good alt text is an art, not...
2. Use blank alt text for   purely decorative         images
Bad:<img   src="spacer-left-red.gif"   /><img   src="spacer-left-red.gif"   /><img   src="spacer-left-red.gif"   /><img   ...
Just as bad:<img src="spacer-left-red.gif"       alt="spacer" /><img src="spacer-left-red.gif"       alt="spacer" /><img s...
Better:<img src="spacer-left-red.gif"          alt="" /><img src="spacer-left-red.gif"          alt="" /><img src="spacer-...
Best: Use CSS to place purely decorativeimages, not <img>
3. Use header tags(<h1>, <h2>, etc)Screenreaders use those as jump-to points
4. Add skip links             liberally(Screenreaders use headers for navigation, but skip links still save the time of sk...
5. In your source:Content first, chrome        after  (and then position it visually using CSS)
6. Use CSS to hidescreenreader-useful things from visual     browsers Use negative margins, not “display: none”
7. Write link text   descriptively
Bad:To manage your account, <ahref="link">click here</a>.
Better:Visit <a href="link"> AccountManagement</a> to change yoursettings.
8. Don’t rely on tooltips      or title textInformation in title tooltips is missed by large numbers                     o...
9. Don’t rely on alt         text, eitherIt’s nearly impossible to reach in most visual browsers
10. Make title text and  alt text the sameThis is controversial, since standards say they must be different, but it’s the ...
11. Explicitly label all        form fieldsAnd put any important instructions inside the form, not              in a note o...
Bad:<form>Name: <input type="text"name="name" /></form>
Better:<form><label for="name">Name:</label> <input name="name"id="name" type="text" /></form>
Best:<form><label for="name">Name:</label><input name="name" id="name"type="text" aria-labelledby="Name:"/></form>
Best:<form><label for="name">Name:</label><input name="name" id="name"type="text" aria-labelledby="Name:"/></form>
ARIA or WAI-ARIA• Web Accessibility Initiative-Accessible Rich  Internet Applications• Labels and describes page content a...
12. Use WAI-ARIA      landmark rolesClient implementation is getting better and better, and           there’s zero downsid...
13. Use existing      JavaScript librariesDon’t reinvent the wheel: JQuery isn’t 100% accessible,         but it’s better ...
14. Make sureeverything has a   tabindex
15. Put important things earlier in the tabindexUse this VERY SPARINGLY, but less-used items can belater in the tabindex. ...
16. Don’t hide anyvisible element from    the keyboard
Wikipedia’s article rating widgetUnreachable via the keyboard :(
17. Never use tables unless presenting    tabular data
18. And if you need tables, use <th>headers (and ARIA      roles)
19. Use <ul> or <ol>instead of image based        bullets
Bad:<img src="bullet.gif">Item One<img src="bullet.gif">Item Two<img src="bullet.gif">Item Three
Better:<ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul>      (then add the image with CSS)
20. Define all sizes in  em, not px or pt
21. Restrict large blocks of text to a narrower          width
22. Check your color       contrastStandards say no less than 4.5:1 and recommend 7:1, but if possible, offer high-contras...
23. Avoid large blocks     of pure whitebackground (cream or    grey is better)
24. Provide light-on-dark and dark-on-light        options
25. Use at least two  ways of highlightinginformation or errors
Remember earlier?<form><label for="name">Name:</label><input name="name" id="name"type="text" aria-labelledby="Name:"/></f...
Forms of Highlights• Color• Outline• Underline• Text change• ARIA label (role="alert")
26. Retain user input     after errors
27. Don’t change thescreen without user       action
28. And if you dodynamic content, letpeople turn it off --   permanently
29. Don’t use Flash or PDFs: use plain text
30. Caption all audioand video (by people,   not machines)
31. Consideralternatives to  CAPTCHA
• Honeypot form field (with meaningless  name, informative label, and display:none)• Server-side checks (referer, secret to...
And finally...
0. Test it yourselfYou aren’t going to be as skilled with the assistive tech  as an experienced user, but you can approxim...
• Double your font size and see what breaks• Unplug your mouse and see what you can’t  reach or access• Set your screen to...
Thank you!           Resourceshttp://denise.dreamwidth.org/tag/a11y(that’s A, number one, number one, Y)
Web Accessibility for the 21st Century
Web Accessibility for the 21st Century
Web Accessibility for the 21st Century
Web Accessibility for the 21st Century
Web Accessibility for the 21st Century
Web Accessibility for the 21st Century
Web Accessibility for the 21st Century
Web Accessibility for the 21st Century
Web Accessibility for the 21st Century
Web Accessibility for the 21st Century
Web Accessibility for the 21st Century
Upcoming SlideShare
Loading in...5
×

Web Accessibility for the 21st Century

2,287

Published on

You know it's important for your web project to be accessible to people who use all kinds of assistive technology to access the internet. But all the guidelines for web accessibility you can find don't go much beyond "make sure all your images have alt text", and all the resources you can find treat "accessibility" as a synonym for "making your site work in a screen reader". You know there are other things you should be doing and other forms of assistive technology you should be accomodating, but all the best practices documents are a complicated morass of contradicting information (if you can find best practices documents at all.)

Have no fear! This tutorial gives you a number of concrete steps to take to make things more accessible.

This presentation has downloadable notes and exercises available at http://denise.dreamwidth.org/tag/a11y . Video of the talk should be available later.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,287
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Web Accessibility for the 21st Century"

  1. 1. Web Accessibility for the 21st Century Denise Paolucci, Dreamwidth Studios denise@dreamwidth.org http://denise.dreamwidth.org
  2. 2. Slides, resources, andexamples downloadable at end of talk!
  3. 3. What do we mean by “accessibility”?
  4. 4. “Accessibility” is aboutmaking websites workwith assistive tech, not against it.
  5. 5. Multiple standards• W3C’s Web Content Accessibility Guidelines• WebAIM (Web Accessibility in Mind)• US Government’s Section 508 Standards
  6. 6. :(• Standards/guidelines are all very high level• And have specific ideas about what accessibility needs people have• People have more accessibility needs than you think
  7. 7. People think of:• Blind/low-vision users using screenreaders (Jaws, NVDA,VoiceOver)• Users unable to type using dictation software (Dragon)• Users unable to mouse using keyboard-only navigation/mousekeys
  8. 8. It’s not just about screenreaders (or dictation, or keybord input)
  9. 9. What’s the most commonly usedassistive technology?
  10. 10. Larger text size is themost common assistive tech on the internet(even if you don’t think it’s assistive tech)
  11. 11. Also:• Stylish • Disabling autoplay/sound• NoScript • AdBlock• NoSquint • AutoPager• F.lux • Workrave• Disabling animation • TypeAhead Find• “Zap CSS” bookmarks • ....etc
  12. 12. • Migraineurs• People with cognitive disabilities• Dyslexic users• Colorblind users• Deaf users
  13. 13. So how do you serveall these accessibility needs?
  14. 14. ...sometimes you don’t :( (but you can try!)
  15. 15. Don’t make a specialversion: it never works
  16. 16. Universal Design• Improves accessibility• Improves your cross-platform support• And your search engine visibility• Everybody wins!
  17. 17. A light speed tour of Universal Design (this will not be on the exam)
  18. 18. Universal Design Principles• NC State University’s Center for Universal Design has 7 principles• Not all of them apply to web design• The five that do are:
  19. 19. 1. Equitable Use
  20. 20. 1. Equitable Use2. Flexibility in Use
  21. 21. 1. Equitable Use 2. Flexibility in Use3. Simple and Intuitive Use
  22. 22. 1. Equitable Use 2. Flexibility in Use3. Simple and Intuitive Use4. Perceptible Information
  23. 23. 1. Equitable Use 2. Flexibility in Use3. Simple and Intuitive Use4. Perceptible Information 5. Tolerance for Error
  24. 24. those are REALLY high level guidelines :(
  25. 25. • There are a lot of checklists for implementing the high-level guidelines• Many of them disagree• A lot of the advice is outdated and not very helpful
  26. 26. <i>Lets</i> be <b>ACCESSIBLE!</b>
  27. 27. <i>Lets</i> be <b>ACCESSIBLE!</b><em>Lets</em> be <strong>ACCESSIBLE!</strong>
  28. 28. Let’s be ACCESSIBLE!
  29. 29. Let’s be ACCESSIBLE!Let’s be ACCESSIBLE!
  30. 30. Semantic markup isn’t wrong...
  31. 31. But most screenreaders don’t differentiate
  32. 32. (because most of the web doesn’t differentiate)
  33. 33. you are in a maze of twisty little bestpractices, all competing
  34. 34. and automated testing tools don’t catch everything
  35. 35. 31 Quick Techniques To Make Your Site BetterThese are all downloadable at the end, with exercises and further reading :)
  36. 36. 1. Make sure all images have alt attributes, height, and width
  37. 37. Bad:<img src="image.png" />
  38. 38. Better:<img src="image.png" height=480width=600 alt="Woman laughingwith salad" /> (writing good alt text is an art, not a science.)
  39. 39. 2. Use blank alt text for purely decorative images
  40. 40. Bad:<img src="spacer-left-red.gif" /><img src="spacer-left-red.gif" /><img src="spacer-left-red.gif" /><img src="spacer-left-red.gif" /><img src="spacer-left-red.gif" />
  41. 41. Just as bad:<img src="spacer-left-red.gif" alt="spacer" /><img src="spacer-left-red.gif" alt="spacer" /><img src="spacer-left-red.gif" alt="spacer" /><img src="spacer-left-red.gif" alt="spacer" /><img src="spacer-left-red.gif" alt="spacer" />
  42. 42. Better:<img src="spacer-left-red.gif" alt="" /><img src="spacer-left-red.gif" alt="" /><img src="spacer-left-red.gif" alt="" /><img src="spacer-left-red.gif" alt="" /><img src="spacer-left-red.gif" alt="" />
  43. 43. Best: Use CSS to place purely decorativeimages, not <img>
  44. 44. 3. Use header tags(<h1>, <h2>, etc)Screenreaders use those as jump-to points
  45. 45. 4. Add skip links liberally(Screenreaders use headers for navigation, but skip links still save the time of skipping through all the headers.)
  46. 46. 5. In your source:Content first, chrome after (and then position it visually using CSS)
  47. 47. 6. Use CSS to hidescreenreader-useful things from visual browsers Use negative margins, not “display: none”
  48. 48. 7. Write link text descriptively
  49. 49. Bad:To manage your account, <ahref="link">click here</a>.
  50. 50. Better:Visit <a href="link"> AccountManagement</a> to change yoursettings.
  51. 51. 8. Don’t rely on tooltips or title textInformation in title tooltips is missed by large numbers of your readers
  52. 52. 9. Don’t rely on alt text, eitherIt’s nearly impossible to reach in most visual browsers
  53. 53. 10. Make title text and alt text the sameThis is controversial, since standards say they must be different, but it’s the only way to avoid information being unreachable.
  54. 54. 11. Explicitly label all form fieldsAnd put any important instructions inside the form, not in a note outside the form
  55. 55. Bad:<form>Name: <input type="text"name="name" /></form>
  56. 56. Better:<form><label for="name">Name:</label> <input name="name"id="name" type="text" /></form>
  57. 57. Best:<form><label for="name">Name:</label><input name="name" id="name"type="text" aria-labelledby="Name:"/></form>
  58. 58. Best:<form><label for="name">Name:</label><input name="name" id="name"type="text" aria-labelledby="Name:"/></form>
  59. 59. ARIA or WAI-ARIA• Web Accessibility Initiative-Accessible Rich Internet Applications• Labels and describes page content and advanced “rich technology” like DHTML, Ajax, JavaScript• Client implementation spotty, but...
  60. 60. 12. Use WAI-ARIA landmark rolesClient implementation is getting better and better, and there’s zero downside to using it
  61. 61. 13. Use existing JavaScript librariesDon’t reinvent the wheel: JQuery isn’t 100% accessible, but it’s better than rolling your own
  62. 62. 14. Make sureeverything has a tabindex
  63. 63. 15. Put important things earlier in the tabindexUse this VERY SPARINGLY, but less-used items can belater in the tabindex. (But don’t interrupt visual flow.)
  64. 64. 16. Don’t hide anyvisible element from the keyboard
  65. 65. Wikipedia’s article rating widgetUnreachable via the keyboard :(
  66. 66. 17. Never use tables unless presenting tabular data
  67. 67. 18. And if you need tables, use <th>headers (and ARIA roles)
  68. 68. 19. Use <ul> or <ol>instead of image based bullets
  69. 69. Bad:<img src="bullet.gif">Item One<img src="bullet.gif">Item Two<img src="bullet.gif">Item Three
  70. 70. Better:<ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul> (then add the image with CSS)
  71. 71. 20. Define all sizes in em, not px or pt
  72. 72. 21. Restrict large blocks of text to a narrower width
  73. 73. 22. Check your color contrastStandards say no less than 4.5:1 and recommend 7:1, but if possible, offer high-contrast and low-contrast options, or let the user set their own colors
  74. 74. 23. Avoid large blocks of pure whitebackground (cream or grey is better)
  75. 75. 24. Provide light-on-dark and dark-on-light options
  76. 76. 25. Use at least two ways of highlightinginformation or errors
  77. 77. Remember earlier?<form><label for="name">Name:</label><input name="name" id="name"type="text" aria-labelledby="Name:"/></form>
  78. 78. Forms of Highlights• Color• Outline• Underline• Text change• ARIA label (role="alert")
  79. 79. 26. Retain user input after errors
  80. 80. 27. Don’t change thescreen without user action
  81. 81. 28. And if you dodynamic content, letpeople turn it off -- permanently
  82. 82. 29. Don’t use Flash or PDFs: use plain text
  83. 83. 30. Caption all audioand video (by people, not machines)
  84. 84. 31. Consideralternatives to CAPTCHA
  85. 85. • Honeypot form field (with meaningless name, informative label, and display:none)• Server-side checks (referer, secret token, length of time it took to submit)• TextCaptcha.com: word-based CAPTCHA problems
  86. 86. And finally...
  87. 87. 0. Test it yourselfYou aren’t going to be as skilled with the assistive tech as an experienced user, but you can approximate
  88. 88. • Double your font size and see what breaks• Unplug your mouse and see what you can’t reach or access• Set your screen to black and white and see what’s unclear or invisible• Have a screenreader read you the page and see what’s frustrating or missing
  89. 89. Thank you! Resourceshttp://denise.dreamwidth.org/tag/a11y(that’s A, number one, number one, Y)
  1. A particular slide catching your eye?

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

×