Web Accessibility

1. Web Accessibility Breaking Down Barriers David Holstius May 7, 2002 http://webaccess.msu.edu/ Revised by Joann SilsbyJuly 2008

2. Web Accessibility Is… “Maximizing the ability of users to access information, services, and resources.”

3. Video: “Introduction to the Screen Reader”

4. Disabilities & The Web • Four main types of disability affect web access • Visual • Mobility • Cognitive • HearingAnd now the fifth one that could be added is: Aging • Equivalent “functional limitations” • Limited display (cellphones/PDAs; printed pages) • Restricted input (no mouse) • Distracting environment • Lack of speakers (workplace; microlabs)

5. Implication Accessibility can be helping anyone at anytime. • Around 10% of users • Disability is not planned • Effects of aging

6. Visual Barriers L • Unreadable content (low vision) • Due to size / color / contrast • Dependence on graphics • To convey information • To interact with a page • Visually designed pages / tables / forms • Presume ability to grasp page “all at once”

7. Visual Breakthroughs J • Flexible, customizable layouts • Core technique: Cascading Style Sheets (CSS) • Meaningful text equivalents • ALT text • Video captioning • Accessible tables & forms • Coding • Design

8. Mobility Barriers L • Dependence on mouse input • Time limits • Forms • Page redirects • Difficult navigation • Small “click” targets; or • Numerous clicks required

9. Mobility Breakthroughs J • Keyboard compatibility • Basic level of accessible input • Control over time limits • Option to extend time • Reasonable navigation • Search engines: “elevators vs. stairs”

10. Cognitive Barriers L • Inconsistent layouts • “Where am I?” • Confusing navigation • “Where does this go?” • Unclear / dense wording • “What does this mean?”

11. Cognitive Breakthroughs J • Consistent, predictable layouts • “I am at site X” • Reasonable navigation • Search engine; site index; organization by “areas” • Understandable content • Use of headers and lists • Illustrations to accompany text

12. Hearing Barriers L • Uncaptioned audio • Audio cues • Example: Form errors • Parallel to visual barriers

13. Hearing Breakthroughs J • Captioned audio • Or transcripts • Visual cues

14. Inclusive Design • Recognize wide range of users • Wide range of hardware and software • Wide range of skill levels (beginner -> expert) • Giving power and choice to users • Accommodate preference of: • Browser / platform • Mode of presentation • Means of interaction • Skill level required

15. Summary: Benefits to Users • Users with: • Functional limitations • Due to situation, ability, technology, or a combination • Different skills, preferences • Can choose own style of: • Presentation • Interaction

16. Benefits to YOU - 1 of 2 • Reduce server load • Style sheets cached locally • Clear navigation = fewer content misses • Text alternatives = fewer Mb served • Repurpose content more easily • Core Technique: Separate structure from presentation • Allows device independence with less maintenance

17. Benefits to YOU - 2 of 2 • Improve search engine rank • Metadata (pages, tables, headers) = higher priority • ALT text, table summaries = spider comprehension • Reach broader audience • Approximately 50 million AmericansAccording to the U. S. Census Bureau, about 49.7 million Americans have a disability, which includes people of all ages. About two-thirds of these individuals have a severe disability. • According to http://www.WebAim.org :Most studies find that about one fifth (20%) of the population have some kind of disability • Internationalization • Almanac: 67% of web users outside US (2000) • Translation services

18. Other Considerations • Ethical responsibility • Modern education & the Internet • Simple fixes provide enormous benefits • Reduced legal liability • Section 504 of the Rehabilitation ActAct of 1973 is a national law that protects qualified individuals from discrimination based on their disability. • ADA, Titles II and IIIADA -- It prohibits discrimination against disabled citizens and mandates the removal of barriers limiting their full participation within American society. (ADA bans discrimination in employment, and requires full access to government facilities, services and public transportation. It also prohibits privately owned businesses from excluding or discriminating against people with disabilities.) • Emerging technologies

19. Summary: Part I • Barriers vs. breakthroughs • Visual, mobility, cognitive, hearing • Functional limitations = anyone, anytime • Benefits of accessibility • Serve broadest possible spectrum of users • Decrease server load, increase search rankings • Internationalization

20. Who’s Who • World Wide Web Consortium (W3C)http://w3.organd http://w3.org/WAI (Web Accessibility Initiative) • WCAG (Web Content Accessibility Guidelines) 1.0http://www.w3.org/TR/WCAG10/ • Software Applications and Operating Systems (1194.21)http://www.access-board.gov/sec508/guide/1194.21.htm • Web-based Intranet and Internet Information and Applications (1194.22) http://www.access-board.gov/sec508/guide/1194.22.htm

21. Who’s Who • Online organizations • WebAIM -- Web Accessibility In Mindhttp://www.webaim.org • AWARE Center -- Accessible Web Authoring Resources and Educationhttp://www.awarecenter.org/ • WebAblehttp://www.icdri.org/WebAccess/webable.htm • TRACE Center (U-Wisc) -- http://trace.wisc.edu/ • Section508 – http://section508.govhttp://www.access-board.gov/sec508/guide/1194.22.htm (a thru L are client side machine / m – p server side )

22. Why Guidelines? • Vast range of browsers, platforms • User testing impractical • Good place to start • Centralized and official • Important: WCAG not enforcedWCAG = Web Content Accessible Guidelineshttp://www.w3.org/TR/WCAG10/

23. Guidelines Overview • May 1999: W3C issues WCAG 1.0 • 14-point recommendation • Foundation for most other initiatives • WCAG 2.0 in draft • Section 508 • Federal (procurement) – based on WCAG 1.0 • Corporate and University guidelines • CA community colleges (1999)

24. Section 508 § 1194.22 • Procurement-based • Potential indirect impact on University • 16 guidelines, (a) through (p) • Clear, implementation-focused language • Closely follows WCAG Level “A” • Some elements beginning to be outdated

25. 508 (a) Equivalents • A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). • Text = universal alternative • Doesn’t mean “no pictures!” • What’s an equivalent? (equal or comparative)

26. 508 (b) Synchronization • Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. • Example: www.rcpd.msu.edu/captioned/EC201.html • MAGpie • SMIL

27. 508 (c) Color • Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. • “Items in red are on sale” • 5% colorblind • Printers and PDAs Note: For Mobile Web Device information, check the Web site:http://www.w3.org/TR/mwbp-wcag/ • Potential barrier: • All items in red are on sale: • MX400A $13.99 • MX400B $15.99 • MZ500A $24.99

28. 508 (d) Style sheets • Documents shall be organized so they are readable without requiring an associated style sheet. • Power of CSS • Flexible interfaces as designers we demand... as designers we demand... ~2~ ~2~ the ability to control the presentation of a Web document...

29. 508 (e) Image maps • Redundant text links shall be provided for each active region of a server-side image map. • Client-side vs.server-side The browser itself is the client.The server is our web server running on some remote machine. There is only the one way to ensure that all your scripts will run the way you want them to, and that is to run them on your server. The obvious downside to this is the extra server load of processing the scripts and the extra time it takes your visitors to learn that their input was invalid. Colorado Texas Rhode Island Washington, D.C. Oregon California Arizona

30. 508 (f) Image maps - again • Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. Colorado Texas Rhode Island Washington, D.C. Oregon California Arizona

31. 508 (g) Tables • Row and column headers shall be identified for data tables. • <TD> and <TH> • Screen readers, PDAs • Separation of structure and presentation • Tables for layout? • Linearization … “Date: October 29, Time: 8:30-11:30 am, Location: Room B100C Wells Hall Date: November 7, Time: 8:30-11:30 am, Location: Room B100C Wells Hall” …

32. 508 (h) Tables - again • Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. • Scope, headers, colgroup • W3C example

33. 508 (i) Frames • Frames shall be titled with text that facilitates frame identification and navigation. • <frame title=“Table of Contents” … > • Avoids confusion

34. 508 (j) Flickering • Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. • Seizure triggers • Light to darkFlicker Demo: http://ncam.wgbh.org/richmedia/media/flicker_demo.html

35. 508 (k) Last resorts • A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. • Synchronized! • Separate but equal?

36. 508 (l) Scripting • When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. • Javascript menus • Logical event handling

37. 508 (m) Plugins • When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). • Acrobat, Flash?

38. 508 (n) Forms • When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. • Keyboard access • Title input fields • Sensible layout • “Required” fields

39. 508 (o) Navigation • A method shall be provided that permits users to skip repetitive navigation links. • “Skip navigation” • “Click here” = ?

40. 508 (p) Time limits • When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. • Redirects • Forms

41. Summary: Part II • Guidelines overview • WCAG • Section 508 • Section 508 • (a) through (p) • Text, examples, discussion

42. Site Reform • Read about, experience assistive technologies • IBM Home Page Reader • Fix top 10-20% of pages first • Main entrance, search engine, critical content • Validate templates, then pages • Manual checklists are ABSOLUTELY necessary at this time

43. Tools • Verification & repair • HTML validation (validator.w3.org) • Bobby (www.cast.org/bobby) • Cynthia Says - ttp://www.icdri.org/test_your_site_now.htm • A-Prompt - http://aprompt.snow.utoronto.ca/ • AccVerify / AccRepair - http://www.hisoftware.com/access/newvindex.html • Design integration • ATAG (Authoring Tool Accessibility Guideline) • FrontPage, Dreamweaver

44. Other Software • Captioning • MAGpie • SMIL • PDFs • Acrobat 6.0 + and up: “Make Accessible” plugin • access.adobe.com

45. Best Resources • Book: Constructing Accessible Web Sites • www.WebAIM.org/Training2002/ • www.ittatc.org (HTML examples; free) • www.w3c.org/WAI/ (Web Accessibility Initiative) • RCPD -- http://www.rcpd.msu.edu/ • Lab Exercises • To your P:\Web folderor to the C:\class folder

46. Conclusion • Part I: Introduction to Accessibility • Visual, mobility, cognitive, hearing • Barriers vs. breakthroughs • Functional limitations = anyone, anytime • Inclusive design • Wide variety of needs, preferences • Benefits to YOU • Part II: Guidelines • WCAG • Section 508 • Part III: Practicing accessibility • Tools overview • Exercises • Text Equivalents • Tables • Forms • Hover /Highland command