Is your website ADA-compliant?Laura SolomonLibrary Services ManagerOPLIN
DISCLAIMERS•IANAL•The law isn’t clear•I’m primarily a codegeek here•I can’t cover it all•I’m not perfect,either
Wht we’ll cover:• Why web accessibility?• Current accessibility guidelines• Online validators• Getting into the guts of Se...
Accessibility versus usability
BONUS!
What are the standards?• WCAG 2 (W3C/WAI)• Section 508
WCAG 2.0• A (26 criteria)• AA (23 criteria)• AAA (23 criteria)• More info?http://www.w3.org/WAI/intro/wcag
4 principles of WCAG 2.0•Perceivable•Operable•Understandable•Robustness
Problems with standards
Online validators• Cynthia Says (http://www.cynthiasays.com)• AChecker (http://achecker.ca/checker/index.php )Need more? C...
“Only true accesibility test”• Elderly• Learning disabilities• Physical disabilities• Low vision• Blind
Divinginto thecode
Stop using these:• Flash• Frames• <blink> or<marquee>tags• AJAX menus• Tables forlayout
Use withextremecaution:• Iframes• Drop-downmenus• Image maps• Video/multimedia• Javascript
Make sure your code validates!Photo credit: Sebastian Bergmann
Use the <lang> attribute• Syntax:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml...
•Without:http://www.meanlaura.com/soundfiles/cnn_menu.mp3
With:http://www.meanlaura.com/soundfiles/lowes_menu.mp3
Alternative textGOOD:<imgscr=“http://www.oplin.org/panda.jpg”alt=“Panda bear relaxing on a largerock” />BAD:<imgscr=“http:...
What is longdesc?<img src="graph.gif"longdesc="graph.html" ALT="3Dpie chart of funding statistics">
Meaningful imagesPhoto from Westville Public Library, NJ(https://secure.flickr.com/photos/njla/4015734912/sizes/z/in/photo...
Alt vs. title
Fixed vs. proportional fonts• BAD:– Font-size: 12px;– Font-size: 12pt;• GOOD:– Font-size: 1.3em;– Font-size: .78em;
Use header tags correctlyBAD:<h2>This is a Level-2 Header</h2><h3>This is a Level-3 Header</h3>GOOD:<h1>This is a Level-1 ...
FormsForm picture & following 2 examples from the Veterans Health Administrationhttp://www.webjunction.org/accessibility/-...
Form labels• Bad Checkboxes:• <LABEL>Please rate yourexperience with ourservices</label>• <P>• <INPUT id=good type=checkbo...
Text input fieldsBad text input:Full Name<BR><INPUT name=first><INPUT maxLength=1 size=1name=MI><INPUT id=last size=25name...
Tab indexExample from http://webdesign.about.com/od/examples/l/bl_aa071105.htm
Meaningful link text“Click here”versus“More bestsellers”
Duplicate link text
TablesBAD table markup:<table><tr><td><strong>Fruit</strong></td><td><strong>Vegetables</strong></td><tr><td>Bananas</td><...
PDFs need a link to Adobe Reader
Use of color•Can’t be the only indicator of meaning
Some notes about NVDA• Download: http://www.nvda-project.org/• Use it in Firefox• It takes a lot of time to get familiar w...
Resources• Official Section 508 website:http://www.section508.gov/• Website Accessibility Under Title II of the ADA(from t...
http://www.twitter.com/laurasolomonhttp://www.facebook.com/laurasolomonhttp://www.linkedin.com/in/laurasolomonlaura@design...
Is your website ADA-compliant?
Is your website ADA-compliant?
Is your website ADA-compliant?
Is your website ADA-compliant?
Is your website ADA-compliant?
Is your website ADA-compliant?
Is your website ADA-compliant?
Upcoming SlideShare
Loading in …5
×

Is your website ADA-compliant?

585 views

Published on

Library websites are about to become subject to new accessibility legislation. Is yours ready? If you have no idea where to begin, this webinar can help you to get a firm grasp on the basics of preventing legal violations. This presentation looks at what it takes, under the hood, to make a website meet accessibility standards. Web accessibility is about a lot more than just using an "alt" tag.

This is more than an overview--we're going to be getting dirty with actual code. Please note: Attendees will need at least a basic understanding of HTML and/or XHTML to get the most from this session

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

  • Be the first to like this

No Downloads
Views
Total views
585
On SlideShare
0
From Embeds
0
Number of Embeds
290
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Is your website ADA-compliant?

  1. 1. Is your website ADA-compliant?Laura SolomonLibrary Services ManagerOPLIN
  2. 2. DISCLAIMERS•IANAL•The law isn’t clear•I’m primarily a codegeek here•I can’t cover it all•I’m not perfect,either
  3. 3. Wht we’ll cover:• Why web accessibility?• Current accessibility guidelines• Online validators• Getting into the guts of Section508 (**CODE WARNING**)
  4. 4. Accessibility versus usability
  5. 5. BONUS!
  6. 6. What are the standards?• WCAG 2 (W3C/WAI)• Section 508
  7. 7. WCAG 2.0• A (26 criteria)• AA (23 criteria)• AAA (23 criteria)• More info?http://www.w3.org/WAI/intro/wcag
  8. 8. 4 principles of WCAG 2.0•Perceivable•Operable•Understandable•Robustness
  9. 9. Problems with standards
  10. 10. Online validators• Cynthia Says (http://www.cynthiasays.com)• AChecker (http://achecker.ca/checker/index.php )Need more? Complete list of web accessibility validationtools, maintained by WAI:http://www.w3.org/WAI/RC/tools/complete
  11. 11. “Only true accesibility test”• Elderly• Learning disabilities• Physical disabilities• Low vision• Blind
  12. 12. Divinginto thecode
  13. 13. Stop using these:• Flash• Frames• <blink> or<marquee>tags• AJAX menus• Tables forlayout
  14. 14. Use withextremecaution:• Iframes• Drop-downmenus• Image maps• Video/multimedia• Javascript
  15. 15. Make sure your code validates!Photo credit: Sebastian Bergmann
  16. 16. Use the <lang> attribute• Syntax:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang=“en"xml:lang=“en">
  17. 17. •Without:http://www.meanlaura.com/soundfiles/cnn_menu.mp3
  18. 18. With:http://www.meanlaura.com/soundfiles/lowes_menu.mp3
  19. 19. Alternative textGOOD:<imgscr=“http://www.oplin.org/panda.jpg”alt=“Panda bear relaxing on a largerock” />BAD:<imgscr=“http://www.oplin.org/panda.jpg”alt=“Panda” />
  20. 20. What is longdesc?<img src="graph.gif"longdesc="graph.html" ALT="3Dpie chart of funding statistics">
  21. 21. Meaningful imagesPhoto from Westville Public Library, NJ(https://secure.flickr.com/photos/njla/4015734912/sizes/z/in/photostream/ )
  22. 22. Alt vs. title
  23. 23. Fixed vs. proportional fonts• BAD:– Font-size: 12px;– Font-size: 12pt;• GOOD:– Font-size: 1.3em;– Font-size: .78em;
  24. 24. Use header tags correctlyBAD:<h2>This is a Level-2 Header</h2><h3>This is a Level-3 Header</h3>GOOD:<h1>This is a Level-1 Header</h1><h2>This is a Level-2 Header</h2>
  25. 25. FormsForm picture & following 2 examples from the Veterans Health Administrationhttp://www.webjunction.org/accessibility/-/articles/content/98661533
  26. 26. Form labels• Bad Checkboxes:• <LABEL>Please rate yourexperience with ourservices</label>• <P>• <INPUT id=good type=checkboxvalue=good name=good><br>• Good• <INPUT id=excellenttype=checkbox value=excellentname=excellent>• <br>Excellent!• <INPUT id=spectaculartype=checkbox value=spectacularname=spectacular>• Spectacular!• Good Checkboxes:• <legend>Please rate yourexperience• with our services</legend>• <P>• <INPUT id=good type=checkboxvalue=good name=good><LABELfor=good>good</label>• <INPUT id=excellenttype=checkbox value=excellentname=excellent><LABELfor=excellent>Excellent</LABEL>• <INPUT id=spectaculartype=checkbox value=spectacularname=spectacular><labelfor=spectacular>Spectacular</label>
  27. 27. Text input fieldsBad text input:Full Name<BR><INPUT name=first><INPUT maxLength=1 size=1name=MI><INPUT id=last size=25name=last>Good text input:Full Name<br /><label>for=“first“>First</label><input name=“first“ id=“first“ ><label for=MI">M.I.</label><input maxlength=“1“ size=“1“name=“MI“ id=“MI“><label for=“last“>Last</label><input id=“last“ size=“25“name=“last“>
  28. 28. Tab indexExample from http://webdesign.about.com/od/examples/l/bl_aa071105.htm
  29. 29. Meaningful link text“Click here”versus“More bestsellers”
  30. 30. Duplicate link text
  31. 31. TablesBAD table markup:<table><tr><td><strong>Fruit</strong></td><td><strong>Vegetables</strong></td><tr><td>Bananas</td><td>Celery</td></tr><tr><td>Apples</td><td>Lettuce</td></tr></table>GOOD table markup:<table summary=“Fruits & vegetables table”><tbody><tr><th>Fruit</th><th><Vegetables</th><tr><td>Bananas</td><td>Celery</td></tr><tr><td>Apples</td><td>Lettuce</td></tr></tbody></table>Fruit VegetablesBananas CeleryApples Lettuce
  32. 32. PDFs need a link to Adobe Reader
  33. 33. Use of color•Can’t be the only indicator of meaning
  34. 34. Some notes about NVDA• Download: http://www.nvda-project.org/• Use it in Firefox• It takes a lot of time to get familiar with it!• The page may not scroll while the readeris reading• Getting started guide:http://webaim.org/articles/nvda/
  35. 35. Resources• Official Section 508 website:http://www.section508.gov/• Website Accessibility Under Title II of the ADA(from the DoJ)http://www.ada.gov/pcatoolkit/chap5toolkit.htm• Writing great alt texthttp://webdesign.about.com/od/accessibility/a/great_alt_text.htm• “Web accessibility no longer an afterthought”—CNN, 2009http://www.cnn.com/2009/TECH/12/15/cnet.web.accessibility/index.html
  36. 36. http://www.twitter.com/laurasolomonhttp://www.facebook.com/laurasolomonhttp://www.linkedin.com/in/laurasolomonlaura@designforthelittleguy.comhttp://www.meanlaura.comhttp://www.slideshare.net/laurasolomonThank you!

×