1 / 86

Web Accessibility I

Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2009-04-09 Overview The User Experience Legal Issues affecting CSUCI Section 508 – 16 Guidelines Accessibility Check Tools & Resources The User Experience “Keeping Web Accessibility In Mind”

bernad
Download Presentation

Web Accessibility I

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 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>

More Related