In response to the need and our ethical duty to ensure equal access to electronic and information technologies, Bellevue College has established policy 5110 to ensure that our web technologies meet the needs of our staff and students. This article covers the basic steps needed to ensure that a website is accessible. Please see policy 5110 for full information on the details required.
A. How to place an ALT description in an image element:
<IMG SRC="filename.gif" width="220" height="165" ALT="description of image goes here">
B. How to place an ALT description in an image element used only as decoration or a spacer (contains no information):
<IMG SRC="filename.gif" width="220" height="165" ALT=" ">
C. How to place an ALT description to an image map:
<IMG SRC="images/filename.gif" width="212" height="100" usemap="#navigation" border="0" ALT="example of navigation"> <MAP NAME="navigation"> <AREA SHAPE="rect" coords="8,7,91,30" HREF="classes.html" ALT="classes"> <AREA SHAPE="rect" coords="8,37,95,60" HREF="contact.html" ALT="contact"> <AREA SHAPE="rect" coords="8,65,140,90" HREF="information.html" ALT="information"> </MAP>
D. How to link to a long description using the D-link:
<IMG SRC="images/chart.gif" ALT="cups of coffee chart" LONGDESC="cups-coffee.html" width="286" height="180"> <A HREF="cups-coffee.html">[D]</A>
The LONGDESC attribute and the D-link lead the reader to a page that describes the content of the image, graph, table, plug-in or applet that is being described. For a cleaner look, a transparent image containing the ALT description\ “D” may be substituted for the D-link text. This text-equivalent should not replace the LONGDESC attribute, only the visible D-link.
E. How to skip over ASCII art:
<A HREF="#post-art">skip over ASCII art</a> <!-- ASCII art goes here --> <A NAME="post-art">description of art</A>
For a cleaner look, replace the visible link with a transparent image (containing the ALT description, “Skip over ASCII art”) that is linked to the description of the ASCII art.
To test this requirement, try printing the Web page in grayscale (without color) to see if the navigation and content can be interpreted.
If the page contains more than one language such as both English and Spanish, or the page is written in a format for a Braille reader, use appropriate markup (the LANG attribute) to alert the reader of this change.
(Reference: W3C: 4.1)
A. How to add the LANG attribute:
<BODY> <P> ...Interpreted as English(or default language)...</P> <P LANG="es">...Interpreted as Spanish...</P> <P>...Interpreted as English again...</p> <P>...English text interrupted by<EM LANG="fr">some French</EM>English begins here again... </BODY>
Examples of language codes used with lang attribute:
When using Cascading Style Sheets (CSS), make sure they are properly designed so page organization and page formatting remains intact, even when the style sheet is disabled or turned off.
(Reference: W3C: 6.1; DOJ, Section 508: d)
Ensure that all equivalents for dynamic content are updated when the dynamic content changes.
(Reference: W3C: 6.2)
Do not use the <BLINK> tag. When possible, avoid images, marquees, animations, scripts, applets or plug-ins that flash, flicker or blink. Blinking images with frequencies higher than 2 Hz and lower than 59 Hz (2-59 times per second) may cause seizures for individuals with photosensitive epilepsy. (Reference: W3C: 7.1; DOJ, Section 508: j)
Provide redundant text links for each active region of a server-side image map. Choose to use client-side image maps instead of server-side image maps except where regions cannot be defined with an available geometric shape.
Identify row and column headers in the page markup. Use markup to associate data cells and header cells for complex tables that have structural divisions beyond those implicit in the rows and columns (if they have two or more logical levels of row or column headers). For in depth use of tables and their attributes, refer to the W3C examples at: http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html.
(Reference: W3C: 5.1; 5:2; DOJ, Section 508: g; h)
A. Use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the ‘AXIS,’ ‘SCOPE’ and ‘HEADER’ attributes to describe more complex relationships among data.
B. Identify row and column headers. The <TD> tag refers to the ‘data cell,’ and the <TH> tag refers to the ‘header cell.’ If the cells contain a heading, substitute <TD> with <TH>.
<TABLE width="80%" BORDER="1" CELLSPACING="0" CELLPADDING="0"> <TR> <TH>Name</TH> <TH>Phone Number</TH> <TH>Age</TH> <TH> Weight</TH> </TR> <TR> <TD>Steve Nelson</TD> <TD>425/555-2186</TD> <TD>54</TD> <TD>130 lbs.</TD> </TR> <TR> <TD>Maria Sanchez</TD> <TD>425/555-8741</TD> <TD>43</TD> <TD>120 lbs.</TD> </TR> </TABLE>
C. How to add ‘AXIS, ‘ID and ‘HEADERS’ attributes to describe complex relationships among data:
<TABLE border="1"> <CAPTION>Travel Expense Report</CAPTION> <TR> <TH> <TH ID="header2" AXIS="expenses">Meals <TH ID="header3" AXIS="expenses">Hotels <TH ID="header4" AXIS="expenses">Transport <TD>subtotals</TD> <TR> <TH ID="header6" AXIS="location">San Jose <TH> <TH> <TH> <TD> <TR> <TD ID="header7" AXIS="date">25-Aug-97 <TD headers="header6 header7 header2">37.74 <TD headers="header6 header7 header3">112.00 <TD headers="header6 header7 header4">45.00 <TD> <TR> <TD ID="header8" AXIS="date">26-Aug-97 <TD HEADERS="header6 header8 header2">27.28 <TD HEADERS="header6 header8 header3">112.00 <TD HEADERS="header6 header8 header4">45.00 <TD> <TR> <TD>subtotals <TD>65.02</TD> <TD>224.00 <TD>90.00 <TD>379.02 <TR> <TH ID="header10" AXIS="location">Seattle <TH> <TH> <TH> <TD> <TR> <TD ID="header11" AXIS="date">27-Aug-97 <TD HEADERS="header10 header11 header2">96.25 <TD HEADERS="header10 header11 header3">109.00 <TD HEADERS="header10 header11 header4">36.00 <TD> <TR> <TD ID="header12" AXIS="date">28-Aug-97 <TD HEADERS="header10 header12 header2">35.00 <TD HEADERS="header10 header12 header3">109.00 <TD HEADERS="header10 header12 header4">36.00 <TD> <TR> <TD>subtotals <TD>131.25 <TD>218.00 <TD>72.00 <TD>421.25 <TR> <TH>Totals <TD>196.27 <TD>442.00 <TD>162.00 <TD>800.27 </TABLE>
All documents within the frameset of your Web page should be titled using the ‘TITLE’ attribute to facilitate navigation with screen readers and text-based browsers.
(Reference: W3C: 12.1; DOJ, Section 508: i)
Note: The use of frames often presents problems for search indexing, book marking, or printing content. If the intent of your frameset is to provide navigation elements, your cause is better served by using server-side includes or the site management features of a robust design program.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <TITLE>Title of Your Page</TITLE> </HEAD> <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>
Ensure that pages containing applets and scripts are usable when scripts, applets, or other programmatic objects are turned off or not supported. If it is not possible, provide equivalent information on an alternative, accessible page.
(Reference: W3C: 6.3; DOJ, Section 508: m)
Provide an auditory description of the important information of the visual track of a multimedia presentation. If providing time-based multimedia such as a movie or animation, provide a synchronized equivalent.
If it is not possible to make the page accessible, provide a link to an alternative page that is accessible and contains equivalent information (or functionality).
(Reference: W3C: 1.3; 1.4; 11.4; DOJ, Section 508: b; k)
Pages that are developed in support of projects that receive federal funding through a grant or other means must comply with federal accessibility standards which are enforced by the U.S. Access Board as of June 2001. For more information about this requirement, please review the Section 508 home page at www.section508.gov/.