Is your website ADA-compliant?
Download as PPT, PDF0 likes628 views
The document discusses web accessibility compliance, focusing on understanding guidelines like WCAG 2.0 and Section 508, along with practical advice on coding practices to enhance accessibility. It highlights the importance of using appropriate HTML elements, ensuring the site is perceivable, operable, understandable, and robust. Additionally, it provides resources, validation tools, and examples of proper coding techniques to support users with disabilities.
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