Web Accessibility I

1. Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2009-04-09

2. Overview • The User Experience • Legal Issues affecting CSUCI • Section 508 – 16 Guidelines • Accessibility Check Tools & Resources

3. The User Experience “Keeping Web Accessibility In Mind” Video available online at: www.webaim.org

4. Types of Disabilities • Visual (blindness, low vision, color-blindness) • Hearing (deafness, hard of hearing) • Physical/Motor (weakness, muscle control, paralysis) • Cognitive/Neurological (dyslexia, intellectual or memory impairments) • Multiple Disabilities (deaf and blind)

5. Legal Issues

6. Section 508(more specific) Section 504(broad, specific to publicsector and education) ADA(very broad,public and private sector) Federal Accessibility Law • Americans With Disabilities Act (ADA) (1990) • Rehabilitation Act (1973) • Section 504 • Section 508

7. State Law & CSU Policy • CA State Senate Bill 302 • Applies Section 508 to CSU System • CSU Chancellor’s Office Executive Order 926 • Confirms application of ADA, Section 504 and Section 508 to CSU system • Effective January 1, 2005

8. What The Law Means to CSUCI • Disability accommodations must be provided quickly and as needed (Section 504) • Technology, web sites and any electronic documents must be accessible from their inception, not ad hoc (Section 508) • Fortunately, Section 508 gives us guidelines!

9. Web Accessibility @ CSUCI • Phase 1: Section 508 standards • In progress since August 2005 • Phase 2: CSU Accessible Technology Initiative (ATI) • Coded Memo AA-2006-41 (Sept. 2006) • 1st Year Plan In Development • All web sites and web applications created after September 1, 2007 must meet Section 508

10. Benefits for CSUCI • Scalability: do it once rather than coordinating accommodations each and every time • Reduces cost for retrofitting • Greater return on investment: non-disabled students will benefit from universal design • Universal Design = Access for All • Multiple means of access to information • Way to reach “digital generation” • Manage Risk (the reactive model often does not result in timely or “as effective as” access)

11. Prep and Review Tools & Ground Rules

12. Tools You’ll Need • Minimum (required) • Windows Notepad (or any plain-text editor) • Firefox web browser ( www.mozilla.com ) • Firefox Web Developer Extension (free) http://chrispederick.com/work/webdeveloper/ • Colour Contrast Analyzer (free)http://www.paciellogroup.com/resources/contrast-analyser.html • Recommended • A WYSIWYG web page editing tool • Examples: Serena Collage or Adobe Dreamweaver

13. Shortcuts • All web design software has shortcuts • Shortcuts make it easier to create good HTML code • All software has different shortcuts, but they are similar • Serena Collage • Adobe Dreamweaver

14. Example Site Mouse College Soccer Program

15. Section 508 Compliance The Sixteen Guidelines, Presented in order of frequency of occurrence

16. 7 Most Frequent Checkpoints (also the most important) Checkpoints A, C, D, G, H, M & O

17. (a) Text description of non-text elements • First determine if each image is meaningful or decorative • If image is meaningful • Write short description (7 to 80 characters long) • Add ALT attribute & description to <img> element • If necessary, add long description using LONGDESC attribute • If image is decorative: • Add “empty” ALT attribute of <img> element

18. Example Image #1 (meaningful)

19. HTML Code for Example Image #1 • WRONG: <img src=“soccer.jpg” /> • WRONG: <img alt=“A baked potato” src=“soccer.jpg” /> • RIGHT: <img alt=“Soccer goalie leaping for ball” src=“soccer.jpg” />

20. Example Image #2 (decorative)

21. HTML Code for Example Image #2 • WRONG: <img src=“soccer.jpg” /> • WRONG: <img alt=“Hands on soccer ball” src=“soccer.jpg” /> • RIGHT: <img alt=“” src=“soccer.jpg” />

22. (a) Using LONGDESC • What LONGDESC is • An attribute of the <img> element • When to use it • When you need 80+ characters or more to describe an image • Probably <5% of all images • How it’s used • <img alt=“My short description” longdesc=“URL to my description” />

23. Long Description located at: http://www.csuci.edu/alzheimer/documents/embryo_to_stem_description.txt Example of Image and Long Description

24. Example Image #3

25. HTML Code for Example Image #3 • WRONG: <img src=“cellstructures.jpg” /> • WRONG: <img alt=“Hands on soccer ball” src=“cellstructures.jpg” /> • RIGHT: <img alt=“Beta-secretase enzyme” longdesc=“http://www.csuci.edu/cs-description.htm” src=“cellstructures.jpg” />

26. (a) Complex Images and Contexts • How (and how much) to describe? • Fine art description example(s):http://www.archimuse.com/mw2001/papers/anable/anable.html • Audio description example: http://www.joeclark.org/access/description/ad-principles.html

27. (a) Also Applies to Video and Audio • Video clips must be captioned • Audio-only clips require a text transcript • Audio-only clips don’t have to be captioned (they are not multimedia) • Contact CSUCI Academic Technology Services for assistance

28. (c) Content can be conveyed without color • Two main issues • Use of color words • Color contrast of foreground/background colors

29. (c) Issue #1 Color Words • Never depend on color alone: you can use color, but not to define sole source of information or meaning • WRONG: • “Items marked in red must be completed” • “Push the green button to start” • CORRECT: • “Items marked with * must be completed” • “Push the button titled “Start” to begin”

30. (c) Issue #1 Color Words • Need to add emphasis? • Use <strong> or <em> to add emphasis instead of color • Can I still use color? • Yes, good use of color = good design

31. (c) Issue #2 Contrast • Check contrast of text and background colors • Desktop tool: Colour Contrast Analyzer • Web based: http://juicystudio.com/services/colourcontrast.php • Highest contrast color scheme? • Black Text, White background!

32. (d) Document should be readable without style sheet • Check #1 (Firefox): • Web Developer Toolbar >CSS button >Disable Styles >All Styles • Check #1 (Internet Explorer): • Use Web Accessibility Toolbar for IE 2.0http://www.paciellogroup.com/resources/wat-ie-about.html

33. (d) Document should be readable without style sheet • Check #1 (Firefox): • Web Developer Toolbar >Information button >View Document Outline • Page sections should be displayed in an organized, outlined form

34. (d) Document should be readable without style sheet • Why is HTML structure important? • Screen reader software reads a page based on the HTML structure, NOT on the visual organization of page content • Checkpoints: • Can the page still be read? • Can the page still be navigated? • Is the organization of the page still clear and easily comprehensible?

35. (d) Guidelines for Repair • Use HTML only for structure your content (not to apply formatting) • Structure your content using headings (<h1>) paragraphs (<p>), lists (<ol>, <ul>, and <li>) and tables • Use Cascading Style Sheets (CSS) to apply formatting and set the look of your page • Do not use HTML elements for purposes other than what they were intended (Example: use <blockquote> only for quotes, not to indent)

36. (g + h) Make tables accessible • Two common table types • Layout tables • Invisible • Used to design layout for (older) web pages • Data tables • Used to display a set of data in columns & rows • Accessibility guidelines apply only todata tables • Check and repair: 4 steps

37. (g + h) How the Sample Table Looks

38. (g + h) Sample Table Code • <table border="1" summary="Lists names and favorite colors"> • <thead> • <tr> • <th scope="col">Name</th> • <th scope="col">Favorite Color</th> • </tr> • </thead> • <tbody> • <tr> • <td>Pat Smith</td> • <td>Red</td> • </tr> • <tr> • <td>Tyler Zipper</td> • <td>Green</td> • </tr> • </tbody> • </table>

39. (g + h) Fixing tables – Step 1 • First, remove non-table data from the table

40. (g + h) Fixing tables – Step 2 • Use <th> (table heading) tags for column and row headings • First data table row should always contain <th> tags • Example: • <th scope=“col”>Name</th>

41. (g + h) Fixing tables – Step 3 • Set “scope” attribute for <th> tags • scope=“col” for column headings • scope=“row” for row headings • Examples: • <th scope=“col”>Name</th> • <th scope=“row”>2007-2008</th>

42. (g + h) Fixing tables – Step 4 • Add a table summary using “summary” attribute • Provides a textual description of the table • Example:<table summary=“List of names and favorite colors”>

43. 1 3 2 (g + h) Complicated tables • If more than 2 levels of logical structure, use “headers” and “id” attributes

44. (g + h) Complicated tables (cont.)

45. (m) Applets, plug-ins and external content – Step 1 • Make your PDF, Word, Excel, PowerPoint, Flash accessible • Similar accessibility techniques apply to these file formats

46. (m) Applets, plug-ins and external content – Step 2 • Provide links to the software used to view/read the document • Examples • PDF • Adobe Acrobat Reader • Word/Excel/PowerPoint • Microsoft Office • OpenOffice • Free Microsoft Office reader

47. (m) Applets, plug-ins and external content – Step 2 (cont) • How it looks when complete:

48. (m) Applets, plug-ins and external content – Step 2 (cont) • Links to common “readers” • Acrobat: • http://www.adobe.com/products/acrobat/readstep2.html • Microsoft Office • http://www.microsoft.com/office/ • Quicktime • http://www.apple.com/quicktime/ • Provide link to other vendor web sites as necessary

49. (o) Skip Navigation Links • Each page must have a link that enables a user to jump to the main body content of a page • Enables skipping of repetitive navigation links • If you use Serena Collage or the CSUCI templates, this issue is resolved

50. (o) Skip Navigation Links How to Fix: 1. Directly after <body> tag, add the following HTML: <div id="skip"><a href=“#back_to_top” name="back_to_top" id="back_to_top"></a><a href="#skip_navigation"><img src=“http://www.csuci.edu/images/spacer.gif" width="1" height="1" border="0" alt="Skip Global Navigation"></a></div>