Technology Help Desk

One-stop for technology help and news

Website Accessibility

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.

Requirement 1

Provide a text equivalent for all non-text elements

(Based on: W3C: 1.1; DOJ, Section 508: a)

  • For images that convey information: provide an ALT description
  • For decorative or spacer images: provide an empty ALT description (ALT=” “)
  • For image maps: provide an ALT description for each mapped area
  • For images with lots of information requiring very long descriptions: provide a <LONGDESC> and a D-link, referring the reader to a linked description page. (This is useful for charts, graphs or images where the explanation is more complicated than just a few words.)
  • For ASCII art: Provide method for user to skip over the ASCII art and provide linked description of art. (Try to substitute common ASCII art symbols with their text alternative such as <wink> for ;-) .)

Rationale

  • Information conveyed in all non-text elements must also be readable by screen readers, non-visual browsers, and Braille readers.

Examples

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.

Requirement 2

Ensure that all information conveyed in color is also available without color.

(Reference: W3C: 2.1; DOJ, Section 508: c)

Rationale:

  • People who are colorblind may not be able to decipher the information portrayed in color.
  • If the foreground and background colors or tones are similar the user may not be able to read any of the sites content.

Examples:

  • Don’t say, “the information presented in green shows new employees, and the information in blue shows existing employees.”
  • Use context or markup to convey differences in color-coded information.
  • On graphs use different textures to convey the information (dotted, dashed, solid lines) instead of just color.

To test this requirement, try printing the Web page in grayscale (without color) to see if the navigation and content can be interpreted.

 

Requirement 3

Use Markup to Identify Changes in Natural Language

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)

Rationale:

  • Text intended to be read by Braille readers (software/hardware) must be identified with the LANG attribute so that the software will correctly substitute the appropriate key control codes for the user.
  • Text spoken by a speech synthesizer uses the LANG attribute to properly translate text using the appropriate accent with proper pronunciation. If the language transition is not identified properly, the synthesizer will try its best to speak the words in the primary language it uses, thus, the French word for car, “voiture” would be pronounced “voter” by a speech synthesizer that uses English as its primary language.

Example:

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:

  • fr (French),
  • de (German),
  • it (Italian),
  • nl (Dutch),
  • el (Greek),
  • es (Spanish),
  • pt (Portuguese),
  • ar (Arabic),
  • he (Hebrew),
  • ru (Russian),
  • zh (Chinese),
  • ja (Japanese),
  • hi (Hindi)

Requirement 4

Make Pages Readable With or Without Style Sheets

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)

Requirement 5

Update Dynamic Content

Ensure that all equivalents for dynamic content are updated when the dynamic content changes.
(Reference: W3C: 6.2)

 

Requirement 6

Don’t use <BLINK> and Avoid Flickering on the Page

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)

Requirement 7

Make Sure Content and Link Text Is Clear

Write in complete, grammatical sentences and label links in a meaningful way. Use the clearest and simplest language appropriate for the site’s content.
(Reference: W3C: 14.113:1)

Examples:

  1. Don’t use: “Click here” to point the reader to content. A text reader will not be capable of interpreting the information contained behind a generic text link. Instead, link off of meaningful words or labels within a sentence. Do use: For more information about athletics, visit the BC Athletics home page.
  2. Don’t misspell words. A text reader, or users who are reading the document with a Braille reader, will have difficulty interpreting the meaning of the text properly. (Example: Ro els eit’s hard t o urdestand you.)
  3. Use proper grammar and sentence structure. A text reader will read a poorly structured sentence in an awkward way which will make it difficult to understand. Avoid using passive verbs such as “A lot of coffee was had by me today.” Instead, use: “I had a lot of coffee today.”

Requirement 8

Server-Side Image Maps

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.

(Reference: W3C: 7.19:1; DOJ, Section 508: ef)

Requirement 9

Use Appropriate Markup in Data Tables so They Are Readable

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.15:2; DOJ, Section 508: gh)

Examples:

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>

 

Requirement 10

If Using Frames, Title All Frames Within the Page Frameset

 

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.

Example:

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

Requirement 11

Applets and Scripts

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)

Requirement 12

Multimedia

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.31.411.4; DOJ, Section 508: bk)

 

Additional Requirements for federally funded projects

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/.

 

Give Feedback