1 / 146

Web Accessibility: Laws, Coding Practices, and Testing Tools

Web Accessibility: Laws, Coding Practices, and Testing Tools. Greg Kraus (Temporarily Able-Bodied). EDUCAUSE Live! Webinar. Free Accessibility for CIOs and Campus Leaders Wednesday, 12:45PM (1:00-2:00) UNC-W, Teaching Laboratory Building, Room 1053 Visitor parking lot next to the building.

kalona
Download Presentation

Web Accessibility: Laws, Coding Practices, and Testing Tools

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Accessibility: Laws, Coding Practices, and Testing Tools Greg Kraus (Temporarily Able-Bodied)

  2. EDUCAUSE Live! Webinar • Free • Accessibility for CIOs and Campus Leaders • Wednesday, 12:45PM (1:00-2:00) • UNC-W, Teaching Laboratory Building, Room 1053 • Visitor parking lot next to the building

  3. What do you think of when you hear “accessible web site?”

  4. Types of Disabilities • Physical • Auditory • Visual • Cognitive • (Age-Related)

  5. What Percentage of People in the US have a disability? • 5% • 10% • 20% • 30%

  6. Speech Recognition Software

  7. Mouth Stick

  8. Braille Display

  9. Sip and Puff Switch

  10. Types of Assistive Technologies • Screen Reader • Screen Magnifier • High Contrast Mode • Speech Recognition Software • Keyboard Only Access • Sticky Keys • Literacy Software

  11. What is accessibility? • All people, regardless of any impairment, can interact with your content • Can your Web page be translated to work with these technologies?

  12. Universal Design "… the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” –Ron Mace, Center for Universal Design, NC State University

  13. Curb Cuts

  14. Automatically Opening Doors

  15. Closed Captioning

  16. Anticipating the User’s Need

  17. Accessibility Requirements In general, which Web accessibility lawsand standards do Universities have to follow? • Section 504 • Section 508 • Americans with Disabilities Act • WCAG 2

  18. Accessibility and the Law • Section 504 • Americans with Disabilities Act (ADA)

  19. Section 504 • No otherwise qualified individual with a disability in the United States…shall, solely by reason of her or his disability, be excluded from the participation in, be denied the benefits of, or be subjected to discrimination under any program or activity receiving Federal financial assistance…

  20. Definition of “accessibility” in regards to communication An individual can access and acquire the same information, engage in the same interactions and enjoy the same services that the device/technology offers non-disabled individuals with substantially the equivalent ease of use

  21. Universities Must Provide… • ...an environment for all participants that is • Timely • Equally effective • Equally integrated • reasonable accommodations to qualified students with disabilities

  22. Americans with Disabilities Act • ADA builds off of Section 504 • Title I – Employment • Title II – Public Entities • Title III – Public Accommodations (and Commercial Facilities) • Title IV – Telecommunications • Title V – Miscellaneous Provisions

  23. 504 and ADA • Define what “accessible” means in broad terms • They do not define a technical standard for what is accessible

  24. Accessibility and Standards • Section 508 • Web Content Accessibility Guidelines 2.0

  25. Section 508 • You don’t have to follow Section 508 unless you have to follow Section 508 • Procurement and development requirement for Federal agencies • Released in 1998 • 16 criteria • 381 words long • Does not tell you how to technically do any of it

  26. Web Content Accessibility Guidelines 2.0 (WCAG 2) • Standard published by the Web Accessibility Initiative (WAI) within the W3C • Released in 2008 • 14,000 words in the standard • 300,000 words of support documentation

  27. Future of the Laws and Standards • Section 508 Refresh • Most likely will mirror WCAG 2.0 Level AA Conformance • Release, imminent? • ADA • May define a technical standard, either • The refreshed Section 508, or • WCAG 2.0, Level AA Conformance • Release, at least 1-2 years away

  28. Recent OCR Settlements • South Carolina Technical College System • “Shall follow” Section 508 • They had already opted to follow Section 508 but had not adhered to it • “Recommended” to follow WCAG 2 for issues not addressed in Section 508

  29. State of North Carolina • North Carolina State Technical Architecture • http://www.ncsta.gov/ • Minimum accessibility … full compliance with WCAG 1.0, Priority 1 or WCAG 2, “Level 1” • (They probably mean “Level A Conformance”) • Not clear that these requirements apply to higher education

  30. Web Standards • The meeting point between your Web page and the assistive technology vendor

  31. The Future Standard • (Looks like) WCAG 2.0 Level AA

  32. WCAG 2 – Structure • Principles • Guidelines • Success Criteria • Guide to Understanding the Success Criteria • Techniques for Meeting Success Criteria

  33. WCAG 2 – Principles (POUR) Perceivable Operable Understandable Robust Can I “see” it? Can I “touch” it? Can I understand it? Can I break it?

  34. Rank of Most Accessible Formats(The Easiest to Make Accessible) • HTML • Video/Audio • Office Documents • PDF • Rich Multimedia (i.e. Flash)

  35. HTML • It is viewable on a multitude of devices • It provides an easy way to create rich semantics to describe Web pages • It can be transformed into other formats to meet people's individual needs • Content can readily be made accessible • Even though HTML offers the highest level of accessibility support, there are certain technologies that must be implemented with care to ensure accessibility • Some technologies such as JavaScript can be made quite accessible, but additional planning is needed

  36. Video/Audio • You need • A synchronized transcript (captions) for video • A transcript for audio • A media player that people with disabilities can interact with

  37. Office Documents • Microsoft Office has many accessibility features built-in

  38. PDF • Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools. • The second PDF you have to make accessible is a real pain.

  39. Rich Multimedia • Flash, Silverlight, and Java • Can be made accessible, but it takes extra intentional work • HTML Canvas • New technology without great accessibility options yet

  40. Accessible Coding Practices • Accessibility Handbook • http://go.ncsu.edu/accessibility-handbook

  41. Language • HTML5 <html lang="en-US"> • XHTML <html lang="en" xml:lang="en" xmlns= "http://www.w3.org/1999/xhtml">

  42. Multiple Languages <!doctype html> <html lang="en-US">… <body> <h1>Welcome!</h1> <p>Lots of text in English...</p> <p lang="fr">Une petite quantité de texte en français...</p> </body> </html>

  43. Language of the DOCTYPE • Does not set the language of the document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  44. Language Demonstration • http://www.youtube.com/watch?v=NP94u7y_KkQ

  45. Valid Code • Browsers are very forgiving • Not all assistive technologies are • http://validator.w3.org/ • Some errors are false positives – ARIA

  46. Headings - Make an “Outline” <h1>Our News Site</h1> <h2>World News</h2> <h2>National News</h2> <h3>Hot Topics</h3> <h3>Politics</h3> <h2>Science</h2> <h3>Health</h3> <h3>Environment</h3> <h3>Technology</h3> <h2>Entertainment</h2>

  47. Heading Styles <style> h1 {font-size:1.4em; font-weight:bold; color:#000;} h2 {font-size:1.2em; font-weight:bold; color:#222;} h3 {font-size:1em; font-weight:bold; color:#444;} </style>

  48. General Rules for Headings • Your <h1> should be where the unique main content of your page begins, which usually means it will come after your navigation system. • It is fine if your first heading on the page is not an <h1>, such as a having an <h2> come before your first <h1> • You should have only 1 <h1> per page. If you feel you must, you can use a second <h1> for the title of your page. • Don’t obsess over making the first heading on your page an <h1>. • Don’t pick a heading level simply for font sizing purposes. Pick a level that corresponds roughly to the outline of the page. • It is not usually necessary to skip heading levels, going from an <h1> directly to an <h3>. • There are always exceptions to rules. Just make sure you are breaking the rules for a good reason.

  49. Traditional Navigation <div id="nav"> <ul> <li>Home</li> <li>Products</li> <li>Support</li> </ul> </div>

  50. ARIA • Collection of techniques which adds additional accessibility functionality to Web pages, beyond what standard HTML elements can do • No single way to apply ARIA techniques • ARIA Landmarks • ARIA States and Properties • ARIA Live Regions

More Related