|
|
Accessibility of Your Website
Though the web may seem like a GRAPHICAL medium to many
users, it is in fact an INFORMATION medium. People who experience disabilities
are users of the World Wide Web. There is a lot of technology available
to these users: computer scanners and reading software for blind users;
audio and video captioning software for deaf users; navigation helps for
users with limited use of their extremities. Your website must include
accessibility features to make it readable for these users.
Since the university is a public institution that interacts
with many different and diverse user groups, any official university website
must follow the World Wide Web Consortium's Web Content Accessibility
Guidelines, Priority 1 Checkpoints.
"A Web content developer must satisfy this checkpoint. Otherwise,
one or more groups will find it impossible to access information in
the document. Satisfying this checkpoint is a basic requirement for
some groups to be able to use Web documents. 1"
Priority 1 Checkpoints
1. Provide a text equivalent for every non-text element
(e.g., via "alt", "longdesc", or in element content).
This includes : images, graphical representations of text (including symbols),
image map regions, animations (e.g., animated GIFs), applets and programmatic
objects, ascii art, frames, scripts, images used as list bullets, spacers,
graphical buttons, sounds (played with or without user interaction), stand-alone
audio files, audio tracks of video, and video.
| What this means to you: |
Use the alt attribute in every image tag.
Example:
<img src="swimming.jpg" alt="Underwater photo of
swimming polar bear."> |
If you are using a transparent or blank image as a spacer in your
design, include an alt tag with no information in it. That image tag
will then be ignored by the browser.
Example:
<img src="spacer.gif" alt=""> |
Use the alt attribute in every hotspot on an imagemap.
HTML tag: <area shape="rect" coords="176,80,236,135"
href="library.html" alt="Rasmuson Library">
|
2. Ensure that all information conveyed with color is also available
without color, for example from context or markup. If color alone is used
to convey information, people who cannot differentiate between certain
colors and users with devices that have non-color or non-visual displays
will not receive the information. When foreground and background colors
are too close to the same hue, they may not provide sufficient contrast
when viewed using monochrome displays or by people with different types
of color deficits.
| What this means to you: |
|
Don't use ONLY color to convey meaning. For example, if you use
red text to emphasize something, you should also use the <strong>
or <em> tag to emphasize that text or put the information
in an additional location.
|
3. Clearly identify changes in the natural language of a document's text
and any text equivalents (e.g., captions). When abbreviations and natural
language changes are not identified, they may be indecipherable when machine-spoken
or brailled.
| What this means to you: |
If you use a number of different languages on a page, make sure
that any changes in language are clearly identified by using the "lang"
attribute:
Example:
<P>And with a certain <SPAN Lang="fr">je ne
sais quoi</SPAN>, she entered both the room, and his life, forever.
<Q>My name is Natasha,</Q> she said.
<Q Lang="it"> Piacere,</Q>he replied in impeccable
Italian, locking the door. |
4. Organize documents so they may be read without style sheets. For example,
when an HTML document is rendered without associated style sheets, it
must still be possible to read the document. When content is organized
logically, it will be rendered in a meaningful order when style sheets
are turned off or not supported.
| What this means to you: |
| If you use Cascading Style Sheets to format your HTML document,
make sure the document is still readable without the style sheet.
The easiest way to do this is to turn off the style sheet in your
browser and load the page. Check that everything is still understandable |
5. Ensure that equivalents for dynamic content are updated when the dynamic
content changes.
| What this means to you: |
If you use frames, remember to include a noframes tag.
Example:
<NOFRAMES> <A href="table_of_contents.html">Table
of Contents.</A> <!-- other navigational links that are available
in main.html are available here also. --> </NOFRAMES> |
|
If you use scripts that dynamically change the page, include the
noscript tag with a description of the information:
Example:
<SCRIPT type="text/tcl">...some Tcl script to show
a billboard of sports scores... </SCRIPT>
<NOSCRIPT> <P>Results from yesterday's games:</P>
<DL><DT>Bulls 91, Sonics 80.<DD><A href="bullsonic.html">Bulls
vs. Sonics game highlights</A> ...more scores... </DL>
</NOSCRIPT>
|
If you use applets:
Example:
<APPLET code="Press.class" width="500" height="500"
alt="Java applet: how temperature affects pressure">As
temperature increases, the molecules in the balloon...</APPLET> |
6. Until browsers allow users to control flickering, avoid causing the
screen to flicker.
| What this means to you: |
| People with photosensitive epilepsy can have seizures triggered
by flickering or flashing in the 4 to 59 flashes per second (Hertz)
range with a peak sensitivity at 20 flashes per second as well as
quick changes from dark to light (like strobe lights). Avoid using
animations or flickering screens in your html document that flash
in the above range. |
7. Use the clearest and simplest language appropriate for a site's content.
| What this means to you: |
| Using clear and simple language promotes effective communication.
Access to written information can be difficult for people who have
cognitive or learning disabilities. Using clear and simple language
also benefits people whose first language differs from your own, including
those people who communicate primarily in sign language. |
8. Provide redundant text links for each active region of a server-side
image map.
9. Provide client-side image maps instead of server-side image maps except
where the regions cannot be defined with an available geometric shape.
| What this means to you: |
We strongly encourage university users to use client-side imagemaps
only, and include the alt attribute in hotspot links.
Example:
<area shape="rect" coords="176,80,236,135"
href="library.html" alt="Rasmuson Library">
|
10. For data tables, identify row and column headers. Some browsers allow
users to navigate among table cells and access header and other table
cell information. Unless marked-up properly, these tables will not provide
browsers with the appropriate information.
| What this means to you: |
|
For data tables, identify row and column headers.
Example:
<TABLE>
<TR><TH ID=COL1>information in cell</TH></TR>
<TR><TD headers="COL1">information in column
1</TD></TR>
</TABLE>
|
For data tables that have two or more logical levels of row or column
headers, use markup to associate data cells and header cells.
Example:
Use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group
columns, and the "axis", "scope", and "headers"
attributes, to describe more complex relationships among data. |
11. If you use frames, title each frame to facilitate frame identification
and navigation.
| What this means to you: |
We strongly discourage the use of frames due to accessibility, bookmarking
and indexing problems. If you must use frames, remember to include
titles in each of your frames, so that users can navigate through
the frame structure.
Example:
<FRAMESET cols="10%, 90%"title="Our library of electronic
documents">
<FRAME src="nav.html" title="Navigation bar">
<FRAME src="doc.html" title="Documents">
<NOFRAMES>
<A href="lib.html" title="Library link">
Select to go to the electronic library</A> </NOFRAMES>
</FRAMESET> |
12. Ensure that pages are usable when scripts, applets, or other programmatic
objects are turned off or not supported. If this is not possible, provide
equivalent information on an alternative accessible page.
| What this means to you: |
| Ensure that links that trigger scripts work when scripts are turned
off or not supported (e.g., do not use "javascript:" as
the link target). If it is not possible to make the page usable without
scripts, provide a text equivalent with the NOSCRIPT element, or use
a server-side script instead of a client-side script, or provide an
alternative accessible page |
13. If you use multimedia, until browsers can automatically read aloud
the text equivalent of a visual track, provide an auditory description
of the important information of the visual track of a multimedia presentation.
| What this means to you: |
|
Example:
Here's an example of a collated text transcript of a clip from "The
Lion King" (available at [DVS]). Note that the Describer is
providing the auditory description of the video track and that the
description has been integrated into the transcript.
Simba: Yeah!
Describer: Simba races outside, followed by his parents. Sarabi
smiles and nudges Simba gently toward his father. The two sit side-by-side,
watching the golden sunrise.
Mufasa: Look Simba, everything the light touches is our kingdom.
Simba: Wow.
|
14. For any time-based multimedia presentation (e.g., a movie or animation),
synchronize equivalent alternatives (e.g., captions or auditory descriptions
of the visual track) with the presentation.
| What this means to you: |
Use captioning for audio and video files. For more information on
creating captioning with audio and video files, see the National Center
for Accessible Media website at:
http://ncam.wgbh.org/webaccess/magpie/
|
15.And if all else fails...
If, after best efforts, you cannot create an accessible page, provide
a link to an alternative page that uses W3C technologies, is accessible,
has equivalent information (or functionality), and is updated as often
as the inaccessible (original) page.
| What this means to you: |
| Content (web) developers should only resort to alternative pages
when other solutions fail because alternative pages are generally
updated less often than "primary" pages. An out-of-date
page may be as frustrating as one that is inaccessible since, in both
cases, the information presented on the original page is unavailable.
Automatically generating alternative pages may lead to more frequent
updates, but content developers must still be careful to ensure that
generated pages always make sense, and that users are able to navigate
a site by following links on primary pages, alternative pages, or
both. Before resorting to an alternative page, reconsider the design
of the original page; making it accessible is likely to improve it
for all users. |
Priority 2 and Priority 3 Checklists
Definition for Priority 2 Checklist:
A Web content developer should satisfy this checkpoint. Otherwise,
one or more groups will find it difficult to access information in the
document. Satisfying this checkpoint will remove significant barriers
to accessing Web documents.
Definition for Priority 3 Checklist:
A Web content developer may address this checkpoint. Otherwise, one
or more groups will find it somewhat difficult to access information
in the document. Satisfying this checkpoint will improve access to Web
documents.
Checklist of
Checkpoints for Web Content Accessibility Guidelines 1.0 (http://www.w3.org/TR/WCAG10/full-checklist.html)
This is the list which includes all Priority 1, 2 & 3 Checkpoints.
The above information was extracted from the
W3C Checklist
of Checkpoints for Web Content Accessibility Guidelines 1.0
Copyright © 1999 W3C (MIT,
INRIA, Keio),
All Rights Reserved. |
