Is your website ADA-compliant?
•Download as PPT, PDF•
0 likes•628 views
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
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (13)
Similar to Is your website ADA-compliant?
Similar to Is your website ADA-compliant? (20)
Recently uploaded
Recently uploaded (20)
Is your website ADA-compliant?
- 1. Is your website ADA-compliant? Laura Solomon Library Services Manager OPLIN
- 2. DISCLAIMERS •IANAL •The law isn’t clear •I’m primarily a code geek here •I can’t cover it all •I’m not perfect, either
- 3. Wht we’ll cover: • Why web accessibility? • Current accessibility guidelines • Online validators • Getting into the guts of Section 508 (**CODE WARNING**)
- 6. BONUS!
- 7. What are the standards? • WCAG 2 (W3C/WAI) • Section 508
- 8. WCAG 2.0 • A (26 criteria) • AA (23 criteria) • AAA (23 criteria) • More info? http://www.w3.org/WAI/intro/wcag
- 9. 4 principles of WCAG 2.0 •Perceivable •Operable •Understandable •Robustness
- 12. Online validators • Cynthia Says (http:// www.cynthiasays.com) • AChecker ( http://achecker.ca/checker/index.php ) Need more? Complete list of web accessibility validation tools, maintained by WAI: http://www.w3.org/WAI/RC/tools/complete
- 18. “Only true accesibility test” • Elderly • Learning disabilities • Physical disabilities • Low vision • Blind
- 20. Stop using these: • Flash • Frames • <blink> or <marquee> tags • AJAX menus • Tables for layout
- 21. Use with extreme caution: • Iframes • Drop-down menus • Image maps • Video/multimedia • Javascript
- 22. Make sure your code validates! Photo credit: Sebastian Bergmann
- 23. Use the <lang> attribute • Syntax: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang=“en" xml:lang=“en">
- 26. Alternative text GOOD: <img scr=“http://www.oplin.org/panda.jpg” alt=“Panda bear relaxing on a large rock” /> BAD: <img scr=“http://www.oplin.org/panda.jpg” alt=“Panda” />
- 27. What is longdesc? <img src="graph.gif" longdesc="graph.html" ALT="3D pie chart of funding statistics">
- 28. Meaningful images Photo from Westville Public Library, NJ (https://secure.flickr.com/photos/njla/4015734912/sizes/z/in/photostream/ )
- 29. Alt vs. title
- 30. Fixed vs. proportional fonts • BAD: – Font-size: 12px; – Font-size: 12pt; • GOOD: – Font-size: 1.3em; – Font-size: .78em;
- 31. Use header tags correctly BAD: <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>
- 32. Forms Form picture & following 2 examples from the Veterans Health Administration http://www.webjunction.org/accessibility/-/articles/content/98661533
- 33. Form labels • Bad Checkboxes: • <LABEL>Please rate your experience with our services</label> • <P> • <INPUT id=good type=checkbox value=good name=good><br> • Good • <INPUT id=excellent type=checkbox value=excellent name=excellent> • <br>Excellent! • <INPUT id=spectacular type=checkbox value=spectacular name=spectacular> • Spectacular! • Good Checkboxes: • <legend>Please rate your experience • with our services</legend> • <P> • <INPUT id=good type=checkbox value=good name=good><LABEL for=good>good</label> • <INPUT id=excellent type=checkbox value=excellent name=excellent><LABEL for=excellent>Excellent</LABEL> • <INPUT id=spectacular type=checkbox value=spectacular name=spectacular><label for=spectacular>Spectacular</lab el>
- 34. Text input fields Bad text input: Full Name<BR> <INPUT name=first> <INPUT maxLength=1 size=1 name=MI> <INPUT id=last size=25 name=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“>
- 35. Tab index Example from http://webdesign.about.com/od/examples/l/bl_aa071105.htm
- 36. Meaningful link text “Click here” versus “More bestsellers”
- 38. Tables BAD 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 Vegetables Bananas Celery Apples Lettuce
- 39. PDFs need a link to Adobe Reader
- 40. Use of color •Can’t be the only indicator of meaning
- 41. 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 reader is reading • Getting started guide: http://webaim.org/articles/nvda/
- 42. 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 text http://webdesign.about.com/od/accessibility/a/gr eat_alt_text.htm • “Web accessibility no longer an afterthought”— CNN, 2009 http://www.cnn.com/2009/TECH/12/15/cnet.web. accessibility/index.html