–– workshop home ––

Workshops

Accessibility

Introduction

  1. Objectives
    1. Learn the issues and reasons and the law
    2. Learn about Priority levels and specific 508 requirements
    3. Learn how to code for each of the points covered
    4. Impact of requirements on design

The Issues

Why Should You Care?

Negative Reasons
Positive Reasons

In other words, it may feel like an imposition and a burden, but in the long run your site and your organization will be better for it. Being the Web, the long run here is maybe a year or two.

How does a disabled person experience the Internet? It all depends on the type of disability.

Examples of Disabilities

Visual disabilities

Auditory disabilities: The deaf are often shut out of multimedia files

Mobility impairments

Most of these disabilities have some sort of assistive technology to help the person use the computer. These include:

What "Inaccessible" looks like

What is the law?

  1. Federal: ADA and Section 508 of Rehab Act
  2. State policy adopted April 2002
  3. W3C: WAI and WCAG
  4. University
    1. No policy yet
    2. Meet federal and state requirements
    3. Best Practice: Recommended to meet Priority 2 even when exempted from federal requirements — Accessibility

W3C, WAI, WCAG, and Priorities

Alternatives to Audio and Visual Content

For all visual and audio content, you must provide a way for users to get the information; specifically a text equivalent. The most important thing you can do is to provide an ALT string. Keep the string short but descriptive.

<img src="smitc.jpg" alt="Photo of SMITC building">

Focus on the purpose of the graphic. If the image is linked, then the ALT should describe the destination rather than the graphic itself.

Right: <img src="http://www.boisestate.edu/media/graphics/logo75v.gif" alt="link to Boise State home page">

Wrong: <img src=" http://www.boisestate.edu/media/graphics/logo75v.gif" alt="Boise State logo">

If the graphic is purely decorative (e.g., spacer GIF), then use a null string. Example: <img src="spacer.gif" alt="">

For animated GIFs the tag should describe the animation. Example: <img src="stopwatch.gif" alt="A stopwatch with the hands quickly rotating.">

Sounds

Again, provide a description of the sound, and provide alt text as appropriate.

Example 1

Click on the door to hear it creak.

<img src="xyz" alt="sound of door creaking">

Example 2

Listen to an excerpt from Franklin Delano Roosevelt's first inaugural speech.

Franklin Delano Roosevelt speech excerpt.

Audio transcript: Excerpt from Franklin Delano Roosevelt's Inaugural Speech: "So first of all let me assert my firm belief that the only thing we have to fear. . .is fear itself. . . nameless, unreasoning, unjustified terror which paralyzes needed efforts to convert retreat into advance."

QuickTime, RealAudio, MPEG

For on-demand, you must have synchronized captions. Both Quicktime and Flash give you the tools to do this, but it is non-trivial.

For realtime, you're supposed to provide captions, but this can be all but impossible. It might be appropriate to provide a text writeup of the event after the fact. Examples: Frank Church Conference; Commencement

Color

The basic rule is that you cannot use color alone to convey meaning. Don't say "click on the red link for A and click on the blue link for B."

Color Blindness

There are multiple types of color blindness. If color must be used to convey important information (e.g., on a map or chart), also use an alternative indicator, either in the image or in supplementary text.

Low Vision

Always use high contrast between text and background. Avoid tiny font sizes.

Style Sheets

All pages must be readable without styles. In particular, your pages must linearize properly and not depend on stylsheet positioning for readability.

Image Maps

It's possible to do server-side or client-side imagemaps. Don't do server-side.

Imagemaps are much less popular than once. If you use one, you must provide alt tags for each area and provide text alternatives if used for navigation.

Tables

Don't use tables for non-tabular information. Tables should linearize correctly. If you do these two things, you will avoid most accessibility issues. Improper use of tables almost never throws a validator error; it simply confuses and irritates the visitor.

Row & column headers are required for data tables. With more complex tables, use ID, HEADER, SCOPE or AXIS to associate the appropriate cell with the appropriate header. If a CAPTION is not used, use a TITLE in the table tag.

Always use the summary tag, in every table you create.

Example

Amount and type of Jello consumed
Name Service Size (oz) Type of Jello Seconds
George 10 Red No
Bob 5 Green Yes

A speech synthesizer would read that table as:

Caption
Amount and type of Jello consumed
Summary
George likes red Jello but he doesn't take seconds, while Bob likes Green and does take seconds
Name: George
Size: ten
Type: Red
Seconds: No
Name: Bob
Size: five
Type: Green
Seconds: Yes

Scripts

Same thing applies here—if you design your own controls, etc., and they use graphics, then you must provide text equivalents. Or your programmer must.

Your script cannot disrupt accessibility features of the OS. You must indicate input focus at all times. Animations must have a non-animated version. Don't use color coding exclusively to convey meaning

If used for navigation, a common use for Javascript, the user must be able to move through all fields and access all controls, menus, etc. either from the keyboard or from the mouse.

You can provide an alt tag that describes what the applet or script does. You must also provide a noscript alternative.

Example

<applet code="frog.class" codebase = "/tutorials/examples/frog/java_classes" width="500" height="60" alt="Frog eating flies"> 
<param name="bgcolor" value="dfdfdf">If your browser supported java applets, you would see a frog eating flies.
</applet>
Example
<SCRIPT>
... script to show content when mouse moves over button ...
</SCRIPT>

<NOSCRIPT>
If your browser supported javascript, moving your mouse over the image would show "Clicking on the link should send you somewhere wonderful. But because it is just a tutorial, it's not going to take you very far."
</NOSCRIPT>

Forms

  1. Same rules as for scripting
    1. Must be able to navigation from keyboard or mouse
    2. Watch the color coding
    3. Focus must be indicated
    4. Use ACCESSKEY
  2. From WebAim
    1. Place form labels adjacent to their corresponding form controls
    2. Provide markup for labels, using the <label> tag.
      3. <label for "fname">First Name</label><input id="fname" type="text">
    3. Provide a title or "legend" for each field set using the <legend> tag
    4. Group radio buttons in a <fieldset> tag, and provide a <label> for each checkbox.
    5. Group checkboxes in a fieldset tag, and provide a <label> for each checkbox.
    6. Always provide a button to submit forms. Don't use JavaScript to automatically submit them.
    7. Ensure logical tab order through fields
    8. Use accesskey to create keyboard shortcuts. The following tags support this element:
      • <A>
      • <AREA>
      • <BUTTON>
      • <INPUT>
      • <LABEL>
      • <LEGEND>
      • <TEXTAREA>

Check it: Try your form using only the keyboard, without touching the mouse. Does it work the way it should?

Navigation Bars

A method shall be provided that permits users to skip repetetive navigation links. User doesn't want to listen to your menu over and over again

How to do it

  1. Insert a blank gif linked to content area
    • Invisible
    • Small - nobody is going to click on it
    • Make the ALT tag do the descriptive work
    • Use internal anchor to make the link
  2. Insert visible text "Skip navigation"
    • .skiptomain { display: none }
    • <a class="skiptomain" href="#maincontent">Skip navigation links</a>

Equivalent Pages

If you can't achieve compliance any other way, then you must provide a text-only version with equivalent content and functionality. Do not think of this as an easy out, because it isn't.

First of all, it violates the basic principle of equivalence. In more self-interested terms, the text version must be kept in sync, and this is a lot of work. If challenged, you must be able to demonstrate that it was the only way.

This is most often the case for things like pages that require a special plugin. Note that "text-only" is not necessarily the same thing as fully accessible; that is, merely providing text doesn't automatically guarantee accessibility.

Miscellany

Identify the language

Relevant in academics-when you use a foreign word or phrase. In any case, as a university we always have a multilingual orientation and we ought not assume English but should state it explicitly. I have a separate workshop that deals, in part, with how to code for multiple languages. The minimum is declaring English as part of the document head, in two places. The first is in the doctype declaration and consists of the two-letter language code "EN" while the second is in the <html> tag, where again the language is indicated by the "en" string.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Use of ABBR

Acronyms are a part of our life, but we ought not assume the reader knows what the abbreviation means. There are far too many TLAs to assume your reader knows the one you are using, but remember that there are lots of other abbreviations that we take for granted that we ought not, especially in light of our international audience.

Examples:

<abbr title="Federal Avenue">Fed. Ave.</abbr> 
or <abbr title="Memorial Drive">Mem. Dr.</abbr>.

Dynamic Pages

When content on dynamic pages changes, the content on the equivalent page (if such exists) must also change. Any input that is timed must inform the user in an accessible way and allow the user to alter the timing. This turns out to be a real issue with timed exams.

Do not use popups and do not spawn windows. Do not change windows without informing the user.

Plugins

Remember that the user might need to download the plugin. If that page isn't accessible, then the user doesn't get the plugin. Look for accessible pages at the download site. This is trickier than you might think, as many providers require filling out forms and use graphics for navigation.

Conclusion: how to check

First, run each page in your site through Cynthia Says, which is available from the Web Developer's Toolbar or see this workshop's References. Validate to WAI, as that report is more detailed. Your pages should validate to Priority 2. This will help you fix the outright errors.

Then, navigate your entire site:

  1. Using a text-only browser
  2. Using only the keyboard
  3. With stylesheets and Javascript turned off and without using any plugins (including Acrobat)
  4. Using a screen reader

These are all important steps. The validator step is roughly like spellcheck while the other steps are roughly equivalent to proofreading. If you need further checking (roughly equivalent to editing, to continue the analogy), contact our Disability Services department and they can also evaluate your site.

Remember that your pages serve not only students but also faculty, staff, and the general community, both local and international.