ATUS Home

Accessibility - Details

As a public institution we are required to provide equal access to programs and services for our entire community. In the paragraphs below we present some common issues that will affect most WWU web developers. For a more comprehensive set of web accessibility guidelines, see the W3C Web Content Accessibility Guidelines and the Section 508 Web accessibility standards.

This page includes several common examples of web accessibility issues that effect WWU web developers.

ALT attributes on all Images


Every image and image map in your site should have an ALT attribute that explains what the image is for. This is essential for screen readers for the vision-impaired as well as for those that have turned off graphics or are browsing with a phone or PDA. This is the ALT attribute for the IMG tag in HTML, but you can also put these in using your WYSIWYG editor like FrontPage or Dreamweaver.

<img src="dept_logo.gif" alt="Philosophy Department Logo">

If the picture is merely fluff, or a spacer graphic that is not meant to be seen, use a null alt attribute (nothing between the quote marks) so that the screen reader ignores it:

<img src="pretty_picture.gif" alt="">
<img src="spacer.gif" alt="">

For alt attributes and captions provide as complete a summary as possible. For example, if it's a picture showing population growth, don't just say "Population Growth", sum up the meaning of the graphic as in "Whatcom County Population Growth of 50% expected by year 2020". If you need a longer description, use the longdesc attribute which links to a separate web page on which a detailed description of the graph is provided:

<img alt="Whatcom County Population Growth of 50% expected by year 2020" longdesc="chart1description.html">
"up to top"Up to top

Multimedia Accessibility


Just as graphics must be labeled, other types of multimedia must also be captioned for those that can't hear it or audio-captioned for those that cannot see it. There are a variety of tools available to help with this (google "web captioning") and we hope to have more information on this in the future.

"up to top"Up to top

Relative Font Sizes


Absolute font sizes, such as 12px or 24px cannot be resized in Internet Explorer browsers. This prevents people from finding a comfortable font size for their vision level and the monitor they're using. So use relative font sizes, either "ems" or "%" or the keywords such as "small". And since you're using good design techniques, nothing that affects how the page looks is in the html file, but rather in a css file.

There are several relative font sizing mechanisms, the simplest of which is "xx-small", through "medium" through "xx-large", giving seven levels of font sizes. Note that "small" is rendered as about 12px in most browsers, but IE uses "x-small" to represent 12px.

EMS and percentage are also relative font-sizing schemes, but note that they compound - i.e. If you have a section at font-size: 90% and then inside that another font-size: 90% then the resulting font-size will be smaller than the rest of the text, i.e. 90% of 90% or about 80%. A font-size:small inside another font-size:small does not get smaller. So use em and percentage with caution.

Define the size for all your body and p and h text in your css file similar to this for vision-friendly resizable text:

body {
font-family: verdana, arial, helvetica, san serif;
font-size: small ;
}
h1 {
font-size: 1.4em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1em;
font-weight: bolder;
}
h4 {
font-size: .9em;
font-weight: bolder;
}
"up to top"Up to top

Meaningful Links


The link name must be meaningful all by itself. Screen readers have functionality that allows users to access links on a web page independently of their context, e.g., in a list of links. Links like "click here" and others don't make sense in this context. Likewise if someone is using speech recognition, the link names must be different for each link. Instead of links like this:

Click here to get Instructions for the request form
Click here to go to the request form

simply use:

Request Form Instructions
Request Form
"up to top"Up to top

Add Skip Navigation


If your template, like ours, starts with navigation on the top / left, then users who are navigating by keyboard rather than mouse must use an outrageous number of keystrokes to get past your navigation so they can access the main content. This is not very friendly. Use Skip to Main Content link to take care of this. First put an anchor on the beginning of the main page content:

<a name="startcontent" id="startcontent">

Then add a link just under the Body tag to jump to this anchor in your main content:

<a class="skipnav" id="startcontent">Skip to main content</a>

Then add an attribute to your css file to make this link off-page:

.skipnav {
float:left;
margin-left: -1000px;
}


You can test how your users see this by making these changes and bringing up your page (or this page for that matter) in Firefox. Then turn off the CSS by selecting View, Page Style, No Style and use your tab key to navigate.

"up to top"Up to top

Color and Contrast


The general rule about color is: Don't use color alone to convey information. Screen readers don't indicate text color and some vision impairments mask color differences. A common mistake is the following:

(Required fields are red)
Name:
E-mail:
Phone:

Only those who can see red can see the distinctions here. But starred works for all readers:

(*Required fields are red and starred)
*Name:
*E-mail:
Phone:

The general rule for contrast is that more is better. Readability is increased if there is adequate contrast between the background color and the foreground text color. That's why black text on white background is a good standard. If you're not sure, there are color contrast checking tools to test this on your site.

But the subject becomes more complex when you consider those who see color differently, and there are tools that show you how your page looks to someone with color-blindness. To anticipate these difficulties, imagine your site in shades of gray - it should be the contrast (light, dark) of the the colors that distinguishes them, not just the color values (red, green) themselves.

Again - don't convey information with color alone and when you use colors for effect consider their contrast and value.

"up to top"Up to top

Accessible Tables


Screen readers read tables from left to right starting at the top. As users get deep into the table, it can be difficult for them to appreciate where they are in the table and which headers apply to which cells. The table below looks standard:

Parking at WWU
  Winter Spring Summer Fall
2005 3500 2900 650 3000
2000 3300 2400 390 2000

but a screen reader could read this as:

Parking at WWU
Winter, Spring, Summer, Fall;
2005, 3500, 2900, 650, 3000;
2000, 3300, 2400, 390, 2000.

This reading would completely confuse the meaning of "2000" as a year and "2000" as a number of cars parked. So how can this table be improved?

An improved caption would help: "Parking increases at WWU between 2000 and 2005". Your captions should always sum up the meaning of the table - it helps everyone understand the table.

Also, labeling can be more specific - label the years fields to more clearly differentiate them from the parking counts, e.g. yr 2005.

But to provide specific assistance to screen readers without modifying what you see on the screen, use the summary attribute and the scope attribute to make this table easier to understand. The summary attribute provides additional information about the table as a whole while the scope tells the screen reader which fields name columns and which fields name rows as in this code excerpt:

<table border="1" summary="The average number of cars per day parking at Western each term now and 5 years ago.">
<tr><th></th>
<th scope="col">Winter</th>
...
<th scope="col">Fall</th>
</tr>
<tr>
<td scope="row">2005</td> <td>3000</td>
....
</tr><tr>
<td scope="row">2000</td><td>2000</td>
...

Using the attributes in this way enables the screen reader to read the above chart as

The average number of cars per day parking at Western each term now and 5 years ago.
2005: Winter, 3500; Spring, 2900; Summer, 650; Fall 3000.
2000: Winter, 3300; Spring, 2400; Summer, 390; Fall 2000.

For more complex tables comprised of nested tables use these guidelines:

  • Be sure that all row and column headers are marked up as <th>
  • Include an id="name" attribute for all <th> elements
  • Include a headers="th1 th2..." attribute for all <td> elements, the value being a space-delimited list of id's representing each <th> element that applies to that cell.
"up to top"Up to top

Accessible File Formats


Web pages are the most accessible files - no matter the operating system, browser / screen reader or device, the user is fairly certain to be able to get to your content. However other file formats are not so universal. Word, Powerpoint and Excel types require a Microsoft reader; PDF requires an Adobe reader; although these formats are very prevalent they are not as accessible as HTML and frequently the issues are harder to remedy.

So your content should be in HTML.

That said there are times that other formats are an acceptable compromise:

  • The document is distributed in another medium, such as print, and it is important that the on-line version be the same
  • A large repository of documents exists and are not yet converted or are prohibitively expensive to convert

These are real-word reasons - just remember that you are potentially compromising some users' accessibility to these documents.

"up to top"Up to top

Image maps in correct order


We often organize our information top-down, left to right. The most important information occurs top left. If you use images maps to define buttons on your site, you may have carefully organized the images with the most important button top left. But how did you order the code? Screen readers read links in the order they're coded, not the order they appear on the screen.

When defining images maps, define them in the same order that they appear visually (which usually would mean the most important items to the left and top). If this was not done, either re-order the code or use the TABINDEX attribute to indicate the correct order. In this example, News appears first, followed by Search:

<map name="mymap">
<area shape="rect" href="search.html" alt="Search" coords="506,2 577,18" tabindex="2">
<area shape="rect" href="news.html" alt="News" coords="186,2 303,18" tabindex="1">
</map>