Web Accessibility I

Peter Mosinskis

Supervisor of Web Services

CSU Channel Islands

Rev. 2007-08-15

---

Overview

• The User Experience

• Legal Issues

• Section 508 – 16 Guidelines

• Accessibility Check Tools

• Additional Resources

---

The User Experience

“Keeping Web Accessibility In Mind”

Video available online at:

---

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)

---

Legal Issues

---

Federal Accessibility Law

• Americans With Disabilities Act (ADA) (1990)

• Rehabilitation Act (1973)

  • Section 504

  • Section 508

---

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

---

What The Law Means to CSUCI

• Disability accomodations 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!

---

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

---

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)

---

Prep and Review

Tools & Ground Rules

---

Tools You’ll Need

• Minimum

  • Windows Notepad (or any plain-text editor)

  • Firefox web browser ( )

  • Firefox Web Developer Extension (free)

• Recommended

  • A WYSIWYG web page editing tool (such as Collage or Dreamweaver)

---

Shortcuts

• Web design software has shortcuts

• Instructions contained are generic enough to be used with any web design software

  • Serena Collage

  • Adobe Dreamweaver

---

HTML Review

• Hyper Text Markup Language

• Defines the structure of your content using unique, predefined tags

• Headings, paragraphs, links and tables are common structural elements

---

HTML Review (continued)

• How to write HTML: <tag>Content Here</tag>

• HTML elements require a starting tag and closing tag

  • <tag> - starting tag

  • </tag> - ending tag

• Some “standalone” elements (e.g. <img />,
  <br />, <hr />) do not have a closing tag.

• Content goes between starting and closing tags

---

HTML Review (continued)

• Tags can have multiple attributes that add function or information to the tag

• Format:
  <tag attribute1=“value” attribute2=“value”>Content</tag>

  • Example:
    <a href=“http://www.csuci.edu”
    title=“CSUCI Home Page”>CSUCI Home Page</a>

• Order of attributes within tag doesn’t matter

• Tags should only be written in lower-case

---

Example Site

Mouse College Tennis Team

---

Section 508 Compliance

The Sixteen Guidelines,

Presented in order of
frequency of occurrence

---

7 Most Frequent Checkpoints

(also the most important)

Checkpoints A, C, D, G,
H, M & O

---

(a) Text description of non-text elements

• Add ALT and/or LONGDESC attributes to <img> tag

• ALT: descriptions between 7 and 80 characters long

  • WRONG:
    <img src=“mouse.jpg” />

  • WRONG:
    <img alt=“image of shoe” src=“mouse.jpg” />

  • RIGHT:
    <img alt=“Man with tennis racket, sunrise, and cartoon mouse” src=“mouse.jpg” />

---

(a) Text description of non-text elements

• LONGDESC: for 80 characters or more, links to a text file with a longer description

  • Example:
    <img src=“mouse”
    alt=“Man serving tennis ball, sunrise, and cartoon mouse” longdesc=“mouse-desc.htm” />

• Avoid the words “image of” in ALT text for functional images (such as buttons)

• Do use the word “image of”, “diagram of”, or “picture of” for critical (but non-functional) images

• Spacers, decorative and ”non-essential” images that are used as spacers should use: ALT=“” (empty)

---

(a) Text description of non-text elements

• How (and how much) to describe?

  • Fine art description example(s):

  • Audio description example:

---

(a) Text description of non-text elements

• Video clips must be captioned

  • Contact Web Services or Library

• Audio-only clips don’t have to be captioned (they are not multimedia)

• Audio-only clips DO require a text transcript

---

(c) Content can be conveyed without color

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

---

(c) Content can be conveyed without color

• How to Check

  • Ensure sufficient color contrast between text and background

  • Highest contrast color scheme: black text, white background

  • Review page content and layout in black & white

    • Vischeck

  • Check color contrast index

  • Check for “color words” in your content

---

(c) Content can be conveyed without color

• How to Fix

  • Use another method of identification in place of the color reference, such as a text label

  • Consider using <strong> or <em> to add emphasis instead of color

---

(d) Document should be readable without style sheet

• How to Check with Firefox

  • Recommended:
    Web Developer Toolbar >
    CSS button >
    Disable Styles >
    All Styles

  • Alternate:
    Firefox >
    View menu >
    Page Style >
    choose No Style

• No comparable feature in Internet Explorer

---

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

---

(d) Document should be readable without style sheet

• How to Fix:

  • Use HTML only to structure your content (not to apply formatting)

  • Use Cascading Style Sheets (CSS) to apply formatting and style

  • Structure your content using headings (<h1>) paragraphs (<p>), lists (<ol>, <ul>, and <li>) and tables

  • Do not use HTML elements for purposes other than what they were intended (Example: use <blockquote> only for quotes, not to indent)

  • Use CSS to define the look of your structure and content

---

(g + h) Make tables accessible

• 2 types of tables commonly used in HTML

• Layout tables

  • Invisible

  • Used to design layout for web pages

• Data tables

  • Used to display a set of data in columns & rows

• Accessibility guidelines only apply to data tables

• How to Check:

  • Manual check: does your table contain tabular data?

---

(g + h) Make tables accessible

• How to Fix:

  1. Use <th> (table heading) tags to define table column and row headings

     • First table row should always contain <th> tags

     • Use <th> tag attribute “scope”

       • Value “col” for column headings

       • Value “row” for row headings

     • Example:

<th scope=“col”>Name</th>

---

(g + h) Make tables accessible

• How to Fix (cont.):

  2. “summary” attribute of the <table> tag

     • Provides a textual description of the table

     • Example:
       <table summary=“List of names and favorite colors”>

  3. Complicated tables may require both row and column headings

     • “headers” attribute for <td> can be used to define heading information for any given cell

---

(g + h) How the Sample Table Looks

---

(g + h) Sample Table Code

1. <table border="1" summary="Lists names and favorite colors">

2. <thead>

3. <tr>

4. <th scope="col">Name</th>

5. <th scope="col">Favorite Color</th>

6. </tr>

7. </thead>

8. <tbody>

9. <tr>

10. <td>Pat Smith</td>

11. <td>Red</td>

12. </tr>

13. <tr>

14. <td>Tyler Zipper</td>

15. <td>Green</td>

16. </tr>

17. </tbody>

18. </table>

---

(m) Applets, plug-ins and external content

• If your web page requires other software to view the content, you must provide a link to the software

• The content that you link to must pass §508

• The software that you link to must also pass §508!

  • i.e., Microsoft Office, Adobe Acrobat, Internet Explorer all need to be inherently accessible.

---

(m) Applets, plug-ins and external content (continued)

• How to fix:

  • Ensure the file formats you are using are accessible

  • Most reputable software companies will provide instructions/tutorials on making accessible documents (Microsoft, Adobe, Macromedia, etc.)

  • Provide links to the software used to view/read the document

  • Good practice: also provide file size of external content

    • Example: CSUCI 2005 Catalog (PDF, 2.1MB)

    • “PDF” describes document type and links to Acrobat

    • “2.1MB” describes size of the PDF file & download time

---

(m) Applets, plug-ins and external content (continued)

• How it looks when complete:

---

(m) Applets, plug-ins and external content (continued)

• How to fix (continued):

  • Acrobat:

  • Microsoft Office

  • Quicktime

  • Provide link to other vendor web sites as necessary

---

(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

• This issue is automatically addressed for users of Collage content management system and official CSUCI templates

---

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

---

(o) Skip Navigation Links

2. At the start of the actual page body content, add the following HTML code:

<a name="skip_navigation" id="skip_navigation"></a>

---

(o) Skip Navigation Links

3. If you use the CSUCI template and CSS style sheet, you are complete. Otherwise, you must insert some additional CSS code into your page style sheet:

#skip a, #skip a:hover, #skip a:visited {

position:absolute;

left:0px;

top:-500px;

width:1px;

height:1px;

overflow:hidden;

}

#skip a:active {

position:static;

width:auto;

height:auto;

}

---

(o) Skip Navigation Links

• How it looks when complete (with style sheet turned off):

---

Less Frequent Checkpoints

…but no less important…

---

(b) Multimedia presentation alternatives and synchronization

• Captioning must be done in real-time

• Captioning must be synchronized with presentation (not a transcript provided later)

• Webcasts require real-time captioning

• How to Check:

  • Manual check required

• How to Fix

  • Captioning Software (MAGPie; HiCaption)

---

(j) Eliminate screen flicker

• Bad examples:

• People with photosensitive epilepsy can have seizures triggered by flickering or flashing

• Some people with cognitive or visual disabilities can’t read moving text

• Moving text or images can be distracting

• How to fix:

  • Remove blinking or flashing elements on a web page

  • Remove banner text that automatically scrolls

  • Remove animated GIFs – they are a nuisance

---

(k) Text-only page

• If accessibility can’t be accomplished in any other way, text-only page is a possible alternative

• Fact: There are virtually no instances (98%+) where this should be necessary

• Fact: Text-only page by itself does not address accessibility (for example, what happens to content structure?)

---

(k) Text-only page (continued)

• Caveats to text-only page:

  • Text-only page must be updated whenever primary page changes

  • Text-only page must have equivalent information and functionality

• How to Fix

  • Design (or redesign) carefully with accessibility in mind, not as an afterthought

---

(n) Accessible Forms

• Information, field elements, and functionality of HTML forms must be accessible, including directions & cues

• Users should be able to complete and submit the form using assistive technology

---

(n) Accessible Forms

• Form elements which need to be accessible

  • Push buttons
    <INPUT type="button“> or <INPUT type="submit“>

  • Image buttons
    <INPUT type="image"> and <BUTTON>

  • Text entry fields
    <INPUT type="text"> and <TEXTAREA>

  • Radio buttons <INPUT type="radio">

  • Check boxes <INPUT type="checkbox">

  • Select (drop-down or list) menus <SELECT>

---

(n) Accessible Forms

• Push buttons: add “value” attribute

  • <input type="submit" value=“Submit This Form">

• Image buttons: add “alt” attribute

  • <input type="image" name="Go" src="go.gif" alt="Go">

• Text Entry Fields:

  • Add “id” attribute and value to <input> tag

  • Add <label> tag before a text field

  • Add “for” attribute and value to <label> tag; set to “id” value of <input> tag

  • Example:
    <label for=“firstname”>First Name:</label><input type="text" id=“firstname” name=“fn" size=20>

---

(n) Accessible Forms

• Radio buttons & Check Boxes

  • Add <label> right after <input> tag

  • Example:
    <input type=“radio“ id=“age01” value=“Under 40”><label for=“age01”>Under 40</label>

---

(n) Accessible Forms

• Select menus

  • Add <label> right before <select> tag

  • Example:
    <label for=“favcolor”>Favorite Color</label>
    <select title=“Choose Your Favorite Color” name=“favoritecolor” id=“favcolor”>
    <option value=“”>Please select one</option>
    <option value=“”>Blue</option>
    <option value=“”>Red</option>
    </select>

---

(n) Accessible Forms

• How to Check

  • Can you navigate the form using your keyboard?

• Tips for Accessible Forms

  • Use <label> tag when possible

  • Add “title” attribute to <input>, <select>, and <textarea> tags

  • Use <fieldset> to group sets of form elements

  • Use <legend> to provide information on form elements

  • Use <optgroup> to group items in <select> lists

• General Tips for Enhancing Web Forms

  • Using <label> tags you can move around where labels are placed (e.g., label in one cell of table, form field in another)

  • Apply style to forms using CSS

---

Least Frequent Checkpoints

…but still required…

---

(e + f) Image Maps

• Example:

• Image maps let you create clickable, linked areas on an portion of an image in a web page

• (e) You must provide links in your HTML code to all linked map areas for all server-side image maps

• (f) Use client-side image maps instead of server-side image maps

---

(e + f) Image Maps

• How to Fix:

  • Don’t use Server Side image maps (they are deprecated).

  • Reconfigure Server Side image maps as client-side image maps

  • Use ALT text on your image map link areas

---

(i) Frame titles

• Example of a frames page:

• If HTML frames are used for layout, frame titles must be labeled clearly & related directly to frame content

• Use of frames for layout is typically deprecated for layout purposes, mostly because linking can be complex

---

(i) Frame titles (continued)

• How to Fix:

  • 1. <title> tag

    • Each HTML document in a frame should have a <title> tag within the <head> tag

    • Example:

<head>
<title>Navigation Bar</title>

</head>

• • 2. Attributes “name” and “title” for <frame> tag

    • Example:

<frame name=“NavigationBar” title=“Navigation Bar” src=“frame1.htm”>

---

(i) Frame titles (continued)

• Naming Examples

  • BAD: “Left side” or “center frame”

  • GOOD: “Navigation bar” or “Main content”

---

(l) Scripts and functional text

• Any JavaScript should have “functional text”

  • “Functional text” is text that identifies what will happen when a script is activated.

• How to Test:

  • Test JavaScript events without a mouse (keyboard only)

  • Test your site on a screen reader or talking browser

  • Turn JavaScript off, test all elements on page being affected by JavaScript to ensure no information is lost

---

(l) Scripts and functional text

• How to Fix:

  • Add functional text to HTML elements that incorporate Javascript for actions (such as clickable images, image maps, etc.) via tag content or tag attributes such as “title” and “alt”

    • Good: <a href="javascript:myFunction();">Start myFunction</a>

  • If you must use mouse-based event handlers (such as onMouseOver or onMouseDown), use along with keyboard based event handlers (such as onClick, onKeyUp, onKeyPress)

  • Avoid some event handlers altogether (onDblClick, onChange)

  • Design your site so that it will function properly without JavaScript

---

(p) Timed Response

• When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

• How to check:

  • Manual check - does your page require a timed response to a form?

• How to fix:

  • Your web application must have an alerting mechanism so users can request more time

---

Check Your Work!

Remember, some checks
must be done manually

---

Accessibility Check & Repair Tools

• Single Page Check (free, web-based)

  • HiSoftware Cynthia Says -

  • Web Accessibility Toolbar –

  • Watchfire WebXACT -

• Multi-Page Check (campus license)

  • HiSoftware AccMonitor/AccVerify

  • HiCaption

  • To obtain, please contact the Help Desk and
    open a work order

• Web software that can check

  • FrontPage 2003 (campus license)

  • Dreamweaver LIFT accessibility checker

---

Single Page Check

1. Browse to the page in Firefox

2. On the Web Developer Toolbar,
   choose Tools > Validate Section 508

---

How to Check a Single Page (cont.)

3. A report will be displayed with information on each checkpoint (including pass/fail info)

---

Accessibility and Collage

• Serena Collage

  • Web content management system for

  • Edit your and academic program web pages online (no extra software required)

  • Access through

• Collage built-in web page editor features to address accessibility issues

---

Web Standards Reference

• Section 508 Standards -

• WCAG Standards -

• Web Standards Project:

---

External Resources

• Tutorials

  • Jim Thatcher -

  • Dive Into Accessibility -

• WebAIM -

  • Techniques and Concepts

• Joe Clark:

---

CSUCI Accessibility Resources

• Disability Accommodation Services

• Web Accessibility @ CSUCI

---

CSU Accessibility Resources

• CSU Web Accessibility

• Other CSU Programs

  • CATS Accessibility Mailing List

    • Subscribe at:

  • TIGERS Grant

    • Web Access Learning Modules (CSU Fresno)
      

    • “Know Your Users” video (CSU Fresno)

      • Available for checkout through Disability Accommodation Services

---

Reference Books

• Accessibility

  • “Constructing Accessible Web Sites”,
    Jim Thatcher

  • “Building Accessible Web Sites”, Joe Clark

• General Web Design

  • “Don’t Make Me Think”, Steven Krug

  • “Designing Web Usability”, Jakob Nielsen

  • “Designing with Web Standards”, Jeffrey Zeldman

---

CSUCI Web Workshops

• Web Accessibility II

  • Improving web site usability

  • How to configure & use AccVerify to check accessibility

  • Use of web-based accessibility check tools

• Creating Accessible Word Documents

• Creating Accessible PDF’s (2 parts)

• Creating Accessible PowerPoint

---

Final Thoughts

• Accessibility…

  • It’s the Law

  • It’s the Smart Thing to do

  • It’s the Right Thing to do

• When in Doubt, Ask for Help!

---

Questions

Contact the Help Desk

805-437-8552