Is your website ADA-compliant?

Download Is your website ADA-compliant?

Post on 22-Jun-2015

495 views

Category:

Design

0 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

<ul><li> 1. Is your website ADA-compliant?Laura SolomonLibrary Services ManagerOPLIN</li></ul> <p> 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?http://www.w3.org/WAI/intro/wcag 8. 4 principles of WCAG 2.0PerceivableOperableUnderstandableRobustness 9. Problems with standards 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. 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:http://www.meanlaura.com/soundfiles/cnn_menu.mp3 18. With:http://www.meanlaura.com/soundfiles/lowes_menu.mp3 19. Alternative textGOOD:BAD: 20. What is longdesc? 21. Meaningful imagesPhoto from Westville Public Library, NJ(https://secure.flickr.com/photos/njla/4015734912/sizes/z/in/photostream/ ) 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 &amp; following 2 examples from the Veterans Health Administrationhttp://www.webjunction.org/accessibility/-/articles/content/98661533 26. Form labels Bad Checkboxes: Please rate yourexperience with ourservices </p> <p> <br /> Good <br />Excellent! Spectacular! Good Checkboxes: Please rate yourexperience with our services </p> <p> good Excellent Spectacular 27. Text input fieldsBad text input:Full Name<br />Good text input:Full Name<br />for=first&gt;FirstM.I.Last 28. Tab indexExample from http://webdesign.about.com/od/examples/l/bl_aa071105.htm 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: 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. 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 afterthoughtCNN, 2009http://www.cnn.com/2009/TECH/12/15/cnet.web.accessibility/index.html 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!</p>