Is your website ADA-compliant?

Download Is your website ADA-compliant?

Post on 22-Jun-2015




0 download


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


  • 1. Is your website ADA-compliant?Laura SolomonLibrary Services ManagerOPLIN

2. DISCLAIMERSIANALThe law isnt clearIm primarily a codegeek hereI cant cover it allIm not perfect,either 3. Wht well cover: Why web accessibility? Current accessibility guidelines Online validators Getting into the guts of Section508 (**CODE WARNING**) 4. Accessibility versus usability 5. BONUS! 6. What are the standards? WCAG 2 (W3C/WAI) Section 508 7. WCAG 2.0 A (26 criteria) AA (23 criteria) AAA (23 criteria) More info? 8. 4 principles of WCAG 2.0PerceivableOperableUnderstandableRobustness 9. Problems with standards 10. Online validators Cynthia Says ( AChecker ( )Need more? Complete list of web accessibility validationtools, maintained by WAI: 11. Only true accesibility test Elderly Learning disabilities Physical disabilities Low vision Blind 12. Divinginto thecode 13. Stop using these: Flash Frames ortags AJAX menus Tables forlayout 14. Use withextremecaution: Iframes Drop-downmenus Image maps Video/multimedia Javascript 15. Make sure your code validates!Photo credit: Sebastian Bergmann 16. Use the attribute Syntax: 17. Without: 18. With: 19. Alternative textGOOD:BAD: 20. What is longdesc? 21. Meaningful imagesPhoto from Westville Public Library, NJ( ) 22. Alt vs. title 23. Fixed vs. proportional fonts BAD: Font-size: 12px; Font-size: 12pt; GOOD: Font-size: 1.3em; Font-size: .78em; 24. Use header tags correctlyBAD:This is a Level-2 HeaderThis is a Level-3 HeaderGOOD:This is a Level-1 HeaderThis is a Level-2 Header 25. FormsForm picture & following 2 examples from the Veterans Health Administration 26. Form labels Bad Checkboxes: Please rate yourexperience with ourservices

Excellent! Spectacular! Good Checkboxes: Please rate yourexperience with our services

good Excellent Spectacular 27. Text input fieldsBad text input:Full Name
Good text input:Full Name
for=first>FirstM.I.Last 28. Tab indexExample from 29. Meaningful link textClick hereversusMore bestsellers 30. Duplicate link text 31. TablesBAD table markup:FruitVegetablesBananasCeleryApplesLettuceGOOD table markup:FruitBananasCeleryApplesLettuceFruit VegetablesBananas CeleryApples Lettuce 32. PDFs need a link to Adobe Reader 33. Use of colorCant be the only indicator of meaning 34. Some notes about NVDA Download: 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: 35. Resources Official Section 508 website: Website Accessibility Under Title II of the ADA(from the DoJ) Writing great alt text Web accessibility no longer an afterthoughtCNN, 2009 36. you!


View more >