508 Guidelines & Techniques
secton

1194.22 Web-based intranet and internet information and applications

Section 508 (508 statute html, 508 statute pdf) requires that Federal agencies' electronic and information technology is accessible to people with disabilities, including employees and members of the public. Section 508 establishes requirements for any electronic and information technology developed, maintained, procured, or used by the Federal government.

The intent of this document is to provide examples of each priority within the 508 guidelines relating to web publishing. Each priority sites the guideline and provides an explanation and examples which highlight solutions. The explanations and examples are interpretations by the authors of this document.

1194.22 Web-based intranet and internet information and applications.

  • (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
  • (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
  • (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
  • (d) Documents shall be organized so they are readable without requiring an associated style sheet.
  • (e) Redundant text links shall be provided for each active region of a server-side image map.
  • (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
  • (g) Row and column headers shall be identified for data tables.
  • (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
  • (i) Frames shall be titled with text that facilitates frame identification and navigation.
  • (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
  • (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
  • (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
  • (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.21(a) through (l).
  • (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
  • (o) A method shall be provided that permits users to skip repetitive navigation links.
  • (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Priority 1194.22(a)

A text equivalent for every non-text element shall be provided (e.g., via "ALT", "LONGDESC", or in element content.

Explanation

When a user reads or views a web page with a text browser, screen reader, or a browser with images not loading, images are displayed/read as "IMAGE" unless some additional markup is used to describe that image. The lack of use of one of the following techniques make it difficult for users to know what information the image is trying to convey.

The ALT attribute provides a description phrase for each image. Up to 256 characters can be used in this context.

The LONGDESC attribute can be used when an image presents content that requires a more extensive description. This attribute provides a link to a separate page with the description of the content.

The D link can be placed next to an image and linked to another HTML page to provide users of graphical browsers, such as Internet Explorer and Netscape Navigator, a more extensive description of the image.

Examples

ALT Example

University of Wisconsin - Madison's Henry Mall

<img src="/images/henrymall1.gif alt="University of Wisconsin - Madison's Henry Mall">

LONGDESC Example

University of Wisconsin - Madison's Henry Mall

<img src="/images/henrymall1.gif longdesc="henrymall1.htm" alt="University of Wisconsin - Madison's Henry Mall" >

DESCRIPTIVE LINK Example

University of Wisconsin - Madison's Henry MallD

<a href="description.html"><img src="/images/henrymall1.gif longdesc="henrymall1.htm" alt="University of Wisconsin - Madison's Henry Mall" ></a>

Adding ALT Text

Entering an ALT attribute to an image in Macromedia Dreamweaver is done through the Image Properties palette. To add an ALT attribute, select the image by clicking on it once. Enter a short description (up to 256 characters) of the image in the Alt box on the Properties Inspector (see picture below). ALT tags should be written in such a way as to provide the user enough information to understand the purpose of the image.

inserting ALT tag in Dreamweaver

Adding a Long Description

Adding a LONGDESC variable to an image in Macromedia Dreamweaver can be done using one of two methods. The first requires work inside the HTML code. Select the image by clicking once on it. Press F10 to enter the Code Inspector (see picture below). Inside the <IMG> tag, enter the LONGDESC attribute using the line below as a model.

<img src="/images/henrymall1.gif longdesc="henrymall1.htm" alt="University of Wisconsin - Madison's Henry Mall" >


inserting LONGDESC tag information in Dreamweaver

 

A second method of entering the long description attribute requires use of an extension called Accessible Image Object from Macromedia Dreamweaver Exchange at http://www.macromedia.com/exchange/dreamweaver/.

Before using this method, the extension must first be downloaded and then installed. This extension changes the way images are added. A user is asked for the ALT description and long description URL as the image is added to the page.

inserting LONGDESC tag information in Dreamweaver using the Accessible Image Object

Adding Descriptive Link

To add a descriptive link, type the letter D to the right of the image. Select the letter. Enter the name of the HTML file describing the image content in the Link box inside the Text Inspector (see picture below).

inserting a DESCRIPTIVE link in Dreamweaver

Priority 1194.22(b)

Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

Explanation

In a multimedia presentation, like a movie or animation, it is important to provide people who cannot see the screen with alternatives for the visual track. These alternatives include both captions for spoken word and auditory descriptions of relevant action taking place on the screen. These alternatives should be synchronized with the action taking place on the screen.

Example

"Introduction to Screen Readers Movie" with Neal Ewers of the Trace Research Center is a short video demonstrating how screen readers assist the blind to navigate the web, access the electronic page, and more. This video serves as one example of how to caption video appropriately. Please note this video will open in a new window. It is also a 12mb file, so it will be slow to download using a modem connection. Copies of this video can be purchased from the UW Madison, DoIT Tech Store, (608) 262-7253.

Transcription of screen reader video.

*NOTE: While watching the movie, click the "CC" icon at the bottom of the movie screen to see the closed captioning. See the screen shot below.

example QuickTime screen  of closed caption

 

Priority 1194.22(c)

Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Explanation

The use of color to convey meaning creates problems when those colors cannot be displayed by a browser or seen by the user. A user may be using a computer monitor with few colors, a text-only reader, or a handheld device that renders information without color. In addition, people with color blindness may not be able to see the difference between colors used. Finally, there may be users who cannot see the screen at all. This priority specifies that information conveyed through the use of color also be represented in a secondary manner.

Example

Below are two examples of color used on a page to convey meaning. The first represents an example of what not to do. The second represents an example of how to use color properly. The HTML for each line follows in parentheses.

 

Question #1 -- Which of these colors does not appear in the flag of the United States?

A)red image(img src="images/red.gif" alt="button")

B)white image(img src="images/white.gif" alt="button")

C)blue image(img src="images/blue.gif" alt="button")

D)yellow image(img src="images/yellow.gif" alt="button")

 

Question #2 -- Which of these colors does not appear in the flag of the United States?

A)red imageRED (img src="images/red.gif" alt="red image")

B)white imageWHITE (img src="images/white.gif" alt="white image")

C)blue imageBLUE (img src="images/blue.gif" alt="blue image")

D)yellow imageYELLOW (img src="images/yellow.gif" alt="yellow image")

 

Priority 1194.22(d)

Documents shall be organized so they are readable without requiring an associated style sheet.

Explanation

HTML was never intended to be a desktop publishing language. HTML is a relational markup language that describes a hierarchy of information. To control for placement and formatting of objects on the screen, Cascading Style Sheets (CSS) were created. A style sheet defines how objects will be presented. For example, a style sheet may specify the <H1> tag be displayed using the Arial font, at 18 points (font size), be blue, with an indention of 10 pixels.

CSS is a powerful way to control and manage formatting of content on a web site. However, browsers prior to Netscape Navigator and Internet Explorer version 4.0 do not support CSS. This priority specifies that each page must be readable by all users if the style sheet is not supported, is turned off or doesn't load.

The following two images show a page with and without its style sheet. In the first example, the dark blue background is controlled in the style sheet rather than in the HTML background properties of the document. This ensures that if style sheets are turned off and the style defining the white table cell is removed, we don't have black text on a dark blue background. All presentation is controlled in the style sheet and when it is removed or fails to load, the document defaults to the browser's settings. In the second image, we see the same image with the style sheet turned off. Notice the background color is now white, with black text.

Page using CSS

example of a page with style sheets  on and turned off

Page not using CSS

example of a page with style sheets  on and turned off

 

To see how a site will look without style sheets, visit Delorie Web Page Backward Compatibility Viewer at www.delorie.com/web/wpbcv.html.

Example

University of Wisconsin - Madison -- New Media Center

In this example, several items are controlled using a CSS. The table cell background color, font colors and page background image are all defined in the CSS. If a user came to this site with a browser that didn't support CSS, all these formatting settings would be lost and the user's browser settings would be used.

In checking this site against several non-CSS browsers, the site remains useable. The background turns white, the table remains centered, but the text indentations collapse and are aligned with the left side of the table cell.

Style Sheet Example:

body { font-family: Helvetica, Arial, sans-serif; background-image: url(http://wiscinfo.doit.wisc.edu/ltde/webdesign/modules/images/lines.gif); background-color: #FFFFFF}

h1 { font-family: Helvetica, Arial, sans-serif; font-size: 1.75em; color: #000099; vertical-align: top; clip: rect( ); margin-left: 5em}

h2 { font-family: Helvetica, Arial, sans-serif; font-size: 1.5em; color: #000099 ; margin-left: 5em}

h3 { font-family: Helvetica, Arial, sans-serif; font-size: 1.25em; color: #000099 ; margin-left: 5em}

ol { font-family: Helvetica, Arial, sans-serif; font-size: 1em; color: #000000; margin-left: 7em; margin-right: 5em}

p { font-family: Helvetica, Arial, sans-serif; font-size: 1em; color: #000000; font-weight: normal; margin-left: 5em; margin-right: 5em; text-align: justify}

table { font-family: Helvetica, Arial, sans-serif; font-size: 1em; color: #000000} .pagetitle { font-family: Helvetica, Arial, sans-serif; font-size: 1.75em; color: #000099; font-weight: bold; margin-right: 1.1em; text-align: right}

td { font-family: Helvetica, Arial, sans-serif; background-color: #FFFFFF}

ul { font-family: Helvetica, Arial, sans-serif; font-size: 1em; color: #000000; margin-left: 7em; margin-right: 5em}

a:hover { color: #666666}

a:link { font-family: Helvetica, Arial, sans-serif; color: #000099}

a:visited { font-family: Helvetica, Arial, sans-serif; color: #333333}

.blueemphasis { font-weight: bold; color: #000099; font-family: Helvetica, Arial, sans-serif}

.formtext { text-align: right; font-family: Helvetica, Arial, sans-serif; font-size: 1em}

.pagelinks { font-family: Helvetica, Arial, sans-serif; font-size: 1em; margin-right: 2em; text-align: right}

.titlebar { font-family: Helvetica, Arial, sans-serif; font-size: 1.25em; color: #FFFFFF} .right { text-align: right}

.left { text-align: left}

.center { text-align: center}

Priority 1194.22(e)

Redundant text links shall be provided for each active region of a server-side image map

Explanation

If a page relies on server-side image maps (where the web server controls the interactivity of the hotspot regions of the image map), there are situations when a user's browser will not be able to communicate appropriately to get the needed links. Repeating the link in text on the page will allow users to gain access to the links embedded in the image map. While this is not required of client-side image maps, it is still a useful technique. Remember, all image maps created in Dreamweaver are client side image maps.

Example

Below, notice an example in two parts. First, there is an image map linking to several pages at the University of Wisconsin - Madison. Next, there is a matching set of text links to these same pages.

NMC Main Menu Consulting Training Facilities Policies Contact Us BNMC LTDE PTE NMC BNMC Events Hours and Locations Hardware & Software NMC DoIT DoIT New Media Centers DoIT UW Madison

[nmc] [bnmc] [events] [hours & location] [hardware & software] [doit] [ltde] [pte] [UW-Madison] [consulting] [training] [facilities] [policies] [contact us]

Priority 1194.22(f)

Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shapes

Explanation

Client-side image map tools are limited in the ability to define "hot spots" (areas where a user can click on an image and trigger an event of some kind, like going to a URL). In most cases, however, client-side image map tools, like those found in applications like Macromedia Dreamweaver, can be used to create an accessible image map. Given the fact that some web browsers do not support server-side image maps, this priority suggests that web developers create client-side image maps.

Example

When creating image maps, it is important to define the text equivalents for each hotspot. In Dreamweaver, the ALT attribute for each region on an image map is defined in the Alt box on the Properties Inspector (see picture below).

inserting ALT tag to a hotspot in Dreamweaver

Priority 1194.22(g)

Row and column headers shall be identified for data tables

Explanation

Using tables is an excellent way to represent tabular data. Problems are created, however, in the way some browsers read tables. Using row and column headers can help define the relationship of content within a table. In Macromedia Dreamweaver, headers within a table can be specified. However, Dreamweaver does not allow for the naming of these cells. This information must be entered manually inside an HTML editor.

Example

In the example below, the information presented in the bottom two rows is obviously organized by the top row. If the user is able to see the table, he or she will know that Tim Dugdale has attended 10 classes. If not, it may be more difficult to understand this data. Using the id and headers attributes, the data may be marked up in a way that clearly associates each cell with the appropriate header. Notice the HTML code below.

Name Classes Attended Platform Type Registered
Tim Dugdale 10 Macintosh No
Blaire Bundy 5 PC Yes

HTML Source

<tr>

<th id="Name">Name</th>

<th id="Classes Attended">Classes Attended</th>

<th id="Platform Type">Platform Type</th>

<th id="Registered">Registered</th>

<tr>

<td headers="Name">Tim Dugdale</td>

<td headers="Classes Attended">10</td>

<td headers="Platform Type">Macintosh</td>

<td headers="Registered">No</td>

<tr>

<td headers="Name">Blaire Bundy</td>

<td headers="Classes Attended">5</td>

<td headers="Platform Type">PC</td>

<td headers="Registered">Yes</td>

</table>

Priority 1194.22(h)

Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Explanation

Complex table structures may be difficult to understand when read by adaptive technologies. By marking a table with the appropriate tags, browsers will be able to explain and represent a context of the data found within the table. Note, however, that there are no tools available which make it easy to comply with this code. Users will need to enter this information directly into the HTML code.

Example

In the example below, a screen reader may read the second row of the table as:

San Jose 25-Aug-97 26-Aug-97 37.74 112.00 45.00 27.28 112.00 45.00

By marking it correctly, a screen reader will know the relationship of each number to the corresponding headers. So, 37.74 will be described as relating to 25-Aug-97, San Jose, and Meals.

Travel Expense Report
  Meals Hotels Transport Subtotals
San Jose        
25-Aug-97 37.74 112.00 45.00  
26-Aug-97 27.28 112.00 45.00  
subtotal 65.02 224.00 90.00 379.02
Seattle        
27-Aug-97 96.25 109.00 36.00  
28-Aug-97 35.00 109.00 36.00  
subtotals 218 72.00 421.25
Totals 196.27 442.00 162.00 800.27

 

<TABLE border="1">

<CAPTION>Travel Expense Report</CAPTION>

<TR>

<TH>

</TR>

<TH id="Meals" axis="expenses">Meals </TH>

<TH id="Hotels" axis="expenses">Hotels </TH>

<TH id="Transport" axis="expenses">Transport </TH>

<TH id="Subtotals" axis="expenses">Subtotals</TH>

</TR>

<TR>

<TH id="SanJose" axis="location">San Jose <TH>

<TD>

</TD>

<TD>

</TD>

<TD>

</TD>

<TD>

</TD>

</TR>

<TR>

<TH id="25-Aug-97" axis="date">25-Aug-97 </TH>

<TD headers="SanJose 25-Aug-97 Meals">37.74 </TD>

<TD headers="SanJose 25-Aug-97 Hotels">112.00 </TD>

<TD headers="SanJose 25-Aug-97 Transport">45.00 </TD>

<TD>

</TD>

</TR> <TR>

<TH id="26-Aug_97" axis="date">26-Aug-97 </TH>

<TD headers="SanJose 26-Aug_97 Meals">27.28 </TD>

<TD headers="SanJose 26-Aug_97 Hotels">112.00 </TD>

<TD headers="SanJose 26-Aug_97 Transport">45.00 </TD>

<TD>

</TD>

</TR>

<TR>

<TD>subtotals </TD>

<TD headers="Meals SanJose">65.02 </TD>

<TD headers="Hotels SanJose">224.00 </TD>

<TD headers="Transport SanJose">90.00 </TD>

<TD headers="Subtotals SanJose">379.02 </TD>

</TR>

<TR>

<TH id="Seattle" axis="location">Seattle </TH>

<TD></TD>

<TD></TD>

<TD></TD>

<TD></TD>

</TR>

<TR>

<TH id="26-Aug-97" axis="date">27-Aug-97 </TH>

<TD headers="Seattle 26-Aug-97 Meals">96.25 </TD>

<TD headers="Seattle 26-Aug-97 Hotels">109.00 </TD>

<TD headers="Seattle 26-Aug-97 Transport">36.00 </TD>

</TR>

<TR>

<TD>

<TH id="28-Aug-97" axis="date">28-Aug-97 </TH>

<TD headers="Seattle 28-Aug-97 Meals">35.00 </TD>

<TD headers="Seattle 28-Aug-97 Hotels">109.00 </TD>

<TD headers="Seattle 28-Aug-97 Transport">36.00 </TD>

<TD></TD>

</TR>

<TR>

<TD>subtotals </TD>

<TD headers="Seattle Meals">131.25 </TD>

<TD headers="Seattle Hotels">218.00 </TD>

<TD headers="Seattle Transport">72.00 </TD>

<TD headers="Seattle Subtotals">421.25 </TD>

</TR>

<TR>

<TH id="Totals" axis="totals">Totals </TH>

<TD headers="Meals Totals">196.27 </TD>

<TD headers="Hotels Totals">442.00 </TD>

<TD headers="Transport Totals">162.00 </TD>

<TD headers="Totals">800.27 </TD>

</TR>

</TABLE>

Priority 1194.22(i)

Frames shall be titled with text that facilitates frame identification and navigation

Explanation

The use of frames can cause numerous problems if designed incorrectly. Frames are made up of two parts -- a frameset and individual frames. Each frame is a separate HTML file, which is held together by the frameset. When frame-based web sites are accessed in a text-only browser, the user is given a list of frames. If the frames are not properly titled, the user doesn't know how the site is organized. Thus it is very important that each frame be titled according to its purpose. It is also helpful to provide navigation within each frame to the other frames.

Example

In the example below, there are three frames: banner, menu and content. Each title reflects the content of the frame.

Frame Dialog box

In Dreamweaver, the frame title is set in the property inspector. First, the frame must be selected on the frames palette, shown below. Notice that the content frame is selected.

Frames palette in Dreamweaver with content frame selected.

Second, the title of the frame is entered in the Frame Name field on the properties inspector.

Frame Property Inspector

 

Priority 1194.22(j)

Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

Explanation

It is possible, through the use of scripts, to control the monitor refresh rate of the user's screen. This technique is used, oftentimes, for dramatic effect, when a user enters a web site. Unfortunately, people with photosensitive epilepsy can have seizures triggered by flickering or flashing. If you must implement this technique, provide warning for users that screen flickering will be encountered. You may wish to provide a non-flicker alternative or a button to control and/or stop the effect.

Example

Below is an example of an appropriate warning used with a link to a page that cause the screen to flicker. Note that the text is not actually an active link, but merely an example.

Web site link (WARNING: Web site begins with a screen flicker script. Skip script.)

 

Priority 1194.22(k)

A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only pages shall be updated whenever the primary page changes.

Explanation

There may be times when you are not able to comply fully with accessibility guidelines. If these cases, it is acceptable to link to a "text-only" or simplified page to provide access. It is important, however, that these pages remain updated and that they provide equal access to information.

Example

Creating a text only link is very straight forward. A text link is often placed at the top of the page with a hyper-link to a separate, text-only version of the same page.

<a href="text.html">Text-only version </a>

Priority 1194.22(l)

When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by adaptive technology.

Explanation

Many web pages use scripts of some sort, whether it be to program buttons, or present dynamic data like date and time. Several browsers, including assistive technologies, do not currently support these technologies. To address this issue, make sure that any scripts or applets do not provide essential information that would render the site unusable if the script or applet did not run OR if the content contained in the script were not "read" by assistive technologies.

Some web pages use scripts to write dynamic content via the "document.write()" method. An example of this would be when a script is detecting the type of browser being used to view a web page. Based on the detected browser-type, the script would dynamically add some text that might provide a link to a more current version of the browser, or redirect the user to a page specifically built for their browser type. To a screen reader that doesn't support scripting, this page might become unusable. A better approach, if available, would be to have the dynamic content authored via server-side scripting. With this approach, the content is delivered to the client browser as static HTML, and no scripting is required on the user's end.

Similarly, button rollovers are nice and add an interactive feel to the site, but if they did not work, would the site remain useful? For instance, a button rollover presents addition menus, which are not replicated elsewhere on the page, would be a problem. If an onMouseover element does not contain any important information, then there is no consequence for accessibility. If this scripted event reveals important information, then a keyboard-accessible alternative is required.

Example

This example works fine, because no significant "new" information is presented by the rollover. There is only a color change.

up button

over button

 

This second example does not work because new information or links are presented that are not "readable" by some browsers and assistive technologies. This information needs to be presented in a way that can be used by adaptive technologies. The easiest way is to replicate using a text equivalent.

up button

over button with new information and links

Priority 1194.22(m)

When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.21(a) through (l).

Explanation

If applets or other elements that require plug-ins are used on a website, make sure that the required plugin is: (1) directly available i.e., a link is provided to a disability-accessible page where the plug-in can be downloaded, and (2) the plug-in is compliant with assistive technologies. If not, provide alternative means of accessing equivalent content.

There is an important point here to make with respect to the use of Portable Document Format (PDF) files. Use of PDFs requires a link to the download page for Acrobat Reader. It also requires that the PDF itself be compliant with assistive technologies. Substantial improvements have been made to latest version of Acrobat with respect to accessibilty. For further information on creating accessible PDFs, see Adobe's accessibility page at http://access.adobe.com/.

Example

Below is an example of a link to a QuickTime file. Notice that just above, there is a link to the QuickTime download page.

The following content requires QuickTime.

Download QuickTime http://www.apple.com/quicktime/download/standalone/

Introduction to the Screen Reader (http://newmedia.doit.wisc.edu/staff/wolf/intro_scrn_rdrs.mov)

*Note, captioning has been added to this video. Captioning can be turned on or off by the user.

Priority 1194.22(n)

When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Explanation

Forms can be quite difficult to navigate with adaptive technologies if they are not laid out in a predictable and consistent manner. All form controls should have text labels adjacent to them. Furthermore, form elements should also have labels associated with them in the markup (i.e., the id for HTML elements).

Example

(view source code for tab index and id for HTML elements)

Help using this form

(1) Your

(2)

(3)

Help and suggestions for using this form.

This form is designed to be used by persons using assistive technologies. There are three input fields labeled: (1) first name (2) email address (3) submit

return to form

Priority 1194.22(o)

A method shall be provided that permits users to skip repetitive navigation links.

Explanation

Many websites use top or side navigation to lead people to important parts of their web site. These links usually appear on many or all pages in the site. People who use adaptive technologies such as screen readers will need to read through all of these links each time they go to a page.

By placing either an invisible image or a text link which skips the navigation, you will allow users with screen reading technologies to skip directly to the content.

Example

In the example below, a small, transparent image was added (border added in example to highlight image) to the beginning of the page. Its alt text reads, 'skip navigation' and it is linked to an internal anchor placed where the unique content of the page begins.

Try clicking on the image. Notice that the content section of the page is moved to the top of the screen. For Internet Explorer and Netscape navigator users, this helps approximate where a screen reader would begin reading.

skip navigation

NMC Main Menu DoIT NMC Home Page NMC Home Page New Media Center Biology New Media Center Events Hours & Location Hardware & Software DoIT UW - Madison DoIT PTE DoIT LTDE New Media Center Biology New Media Center Consulting Training Facilities Policies Contact Us
introduction

Digital technology has enabled the creation of revolutionary new forms of communication or new media. Students, faculty, and staff now have the power to publish without a printing press or to develop presentations complete with 3D modeling and animation. They can share video, text and sound in real time with colleagues thousands of miles away. Instructors can present course materials in innovative ways that promote interactive learning.

To further the use of new media at UW-Madison, the Division of Information Technology has created the New Media Centers Program to serve as campus-wide resources. The Centers offers state-of-the-art Media Design Labs for creating multimedia curricular materials, and New Media Classrooms for teaching courses requiring advanced computer use. The program has two facilities to serve the needs of the entire campus.

 

Priority 1194.22(p)

When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Explanation

People with cognitive disabilities will need to be made aware that a response is timed to prepare themselves.

Example

Below is an example of a properly marked up link to a timed quiz. It is important that the quiz itself have a reset button that allows a user to add more time.

THIS QUIZ HAS A TIME LIMIT OF 60 SECONDS! If you need additional time on the quiz, please click the TIMER RESET button.

Take the quiz now.

This quiz was created using Macromedia Coursebuilder.


Section 508 Web Development Guidelines Authors: Blaire Bundy & Tim Dugdale University of Wisconsin - Madison Created: May 24, 2001