Example - http://www.wisc.edu/wage/
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 in accordance with UW-Madison's Policy Governing World Wide Web Accessibility. Each priority sites the guideline and provides an explanation and example solutions. The explanations and examples are interpretations by the authors of this document.
A text equivalent for every non-text element shall be provided e.g., via "ALT- Tag " or in element content "D-Link."
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 tag provides a description phrase for each image. Short for alternative text, alt-text is simply a way to
provide text equivalents to non-text elements on a page. This includes images, graphical representations of text including symbols, image map regions, animations, scripts, and images used as list bullets, spacers, graphical buttons, etcetera.
The Alt atribute is a text string of up to 256 characters, (10 words or less is recommended -- some say no more than 5 words) enclosed in quotation marks. Although including alt-text is an essential part of building accessible sites, what that alt text says is equally important.
- Keep the wording simple.
- Sometimes it is easier to describe what the function of the graphic is rather than what it is or looks like.
(e.g., The function of a navigation button is more important than what it looks like)
View the QuickTime movie "Screen Readers and the Web" to see how a screen reader reads images with and without Alt tags at http://www.doit.wisc.edu/accessibility/video/, go to link: part 1, alt text segment of video
Some key concepts for the Alt tag are:
1- Alt-text gives you a quick description of the image's function.
2- It's most helpful when what is being described is stated as clearly and concisely
as possible. As alt-text gets longer, it could actually become more confusing
or take more time than it is helpful.
3- For decorative images such as bullets, horizontal bars etc. use the attribute
alt="", which specifies the empty string as the textual equivalent
to be used in place of the image. For images that are purely decorative, which
do not add to the content or meaning, use the alt="" (no space) so
most screen readers will not attempt to read it.
<img src="/images/bullet.gif
alt="University of Wisconsin - Madison's Henry Mall">
A D-link is
used to provide longer descriptions or an in-depth description of something the author of the page wants to include more
details about. The D-link, is only a small, very unobtrusive D on the graphical page. This is the only
instance where the
graphical version of the page will be altered.
The D link can be placed next to an image and linked to another HTML page if extensive description of the image is required.
<a href="description.html">
In description.html:
"This is an image of UW Madison Henry Mall. On the left is the Biochemistry Building. On the right is Agriculture Hall."
Entering an ALT variable to an image in Macromedia Dreamweaver is done through the Image Properties palette. To add an ALT variable inside Dreamweaver, select the image by clicking once on it. Enter a short description (up to 256 characters) of the image in the Alt box inside the Image Properties palette (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.
Adding a LONGDESC variable to an image in Macromedia Dreamweaver requires that work inside the HTML code. Select the image
by clicking once on it. Press F10 to enter the Code Inspector (see picture below). Enter the LONGDESC variable followed by an = sign, then place the description inside quotation marks.
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)
For additional information on Alt-tags and D-links see the video "Screen Readers and the Web" http://www.doit.wisc.edu/accessibility/video/index.asp
part 1, alt text segment of video
http://www.doit.wisc.edu/accessibility/video/ScnRdrpt1.mov
part 2, D-link segment of video
http://www.doit.wisc.edu/accessibility/video/ScnRdrpt2.mov
Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
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.
"IntroductiontoScreenReaders" 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. Please note this is 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.
A transcription of the screen reader video was added to the movie using MAGpie.
*NOTE: While watching the movie, you can click the "CC" icon at the bottom of the movie screen to see a closed caption.
Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
The use of color to convey a 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 which renders information with no color context. In addition, many people are color blind and may not be able to see the colors used to convey meaning. And, of course, there may be users who cannot see the screen at at. This priority specifies that information conveyed through the use of color also be represented in a secondary manner.
Question #1 -- Which of these colors does not appear in the flag of the United States?
A)
RED (img src="images/red.gif" alt="red image")
B)
WHITE (img src="images/white.gif" alt="white image")
C)
BLUE (img src="images/blue.gif" alt="blue image")
D)
YELLOW (img src="images/yellow.gif" alt="yellow image")
Documents shall be organized so they are readable without requiring an associated style sheet.
HTML was never intended to be a desktop publishing language. HTML is a relational markup language which 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 point (font size), be blue, with an indention of 80 pixels.CSS is a powerful way to control and manage formatting of content on your web site. However, support for CSS is not available for browsers under version 4.0 of Netscape and Internet Explorer and may not be supported at all for some browsers. This priority specifies that your page must be readable by all users and should "transform gracefully" if the style sheet is turned off or doesn't load.
In the following graphic you can see a page with and without a style sheet. The dark blue background is controlled in the style sheet rather than in the HTML background properties of the document. Thus ensuring 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.
To see how your site will look without style sheets, you can visit DelorieWebPageBackwardCompatibilityViewer at (www.delorie.com/web/wpbcv.html).
you can also turn off style sheets in your browser to see if your page is still readable . . .e.g., for IE 6
Select Tools | Internet | Accessibility options (uncheck check box for cascading style sheets (CSS))
University of Wisconsin-Madison (example page -- NOT A LIVE SITE)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}
Redundant text links shall be provided for each active region of a server-side image map
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.
[home] [nmc] [bnmc] [events] [hours & location] [hardware & software]
[doit] [ltde] [pte] [consulting] [training][facilities] [policies] [contact us]
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
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.
Below is an example of a client side image map, where coordinates are written into the HTML code itself.
You can insert coordinates and associated link and alt tag using Dreamweaver
Sample code:
<Map name="imagemap.exampleMap">
<area shape="rect" coords="23,80,99,97"
href="#" target="http://newmedia.doit.wisc.edu/consult.htm"
alt="Consulting" title="Consulting">
<area shape="rect" coords="25,102,101,122"
href="#" target="http://newmedia.doit.wisc.edu/training.htm"
alt="Training" title="Training">
<area shape="rect" coords="23,127,104,142"
href="#" target="http://newmedia.doit.wisc.edu/facilities.htm"
alt="Facilities" title="Facilities">
<area shape="rect" coords="21,149,100,166"
href="#" target="http://newmedia.doit.wisc.edu/policies.htm"
alt="Policies" title="Policies">
<area shape="rect" coords="23,171,104,189"
href="#" target="http://newmedia.doit.wisc.edu/contact.htm"
alt="Contact Us" title="Contact Us">
<area shape="rect" coords="85,11,289,21"
href="#" target="http://newmedia.doit.wisc.edu/bnmc/"
alt="BNMC" title="BNMC">
<area shape="rect" coords="86,42,398,54"
href="#" target="http://www.wisc.edu/learntech/"
. . .
</map>
Row and column headers shall be identified for data tables
Using tables is an excellent way to represent tabular data. Problems are created, however, in the way certain browsers read tables. Using row and column headers can help define the relationship of content within a table. In Macromedia Dreamweaver, you can specify which row is a header within a table. Neither Dreamweaver nor Adobe GoLive, however, allow for the naming of these cells in a graphical environment. This information must be entered manually inside an HTML editor.
| Name | Classes Attended | Platform Type | Registered |
|---|---|---|---|
| Tim Dugdale | 10 | Macintosh | No |
| Blaire Bundy | 5 | PC | Yes |
HTML Source
<tr>
<th id="c1">Name</th>
<th id="c2">Classes Attended</th>
<th id="c3">Platform Type</th>
<th id="c4">Registered</th>
<tr>
<td headers="c1 r2">Tim Dugdale</td>
<td headers="c2 r2">10</td>
<td headers="c3 r2">Macintosh</td>
<td headers="c4 r2">No</td>
<tr>
<td headers="c1 r3">Blaire Bundy</td>
<td headers="c1 r3">5</td>
<td headers="c1 r3">PC</td>
<td headers="c1 r3">Yes</td>
</table>
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.
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 a limited number of tools available which make it easy to comply with this code. Users will likely need to enter this information directly into the HTML code.
| Name | Department | Phone Number |
| Alice Anderson | COSI | 2-2129 |
| Blaire Bundy | LTDE | 5-3668 |
| Greg Konop | P&TE | 5-6485 |
| Wei-Zhong Wang | HelpDesk | 5-4754 |
<table border="1" align="center">
<caption>Contact Information</caption>
<tr>
<th id="name">Name</th>
<th id="dept">Dept</th>
<th id="phone">Phone</th>
</tr>
<tr>
<th id="name Alice">Alice Anderson</th>
<td headers="dept Alice">COSI</td>
<td headers="phone Alice">22129</td>
</tr>
<tr>
<th id="name Blaire">Blaire Bundy</th>
<td headers="dept Blaire">LTDE</td>
<td headers="phone Blaire">53668</td>
</tr>
<tr>
<th id="name Greg">Greg Konop</th>
<td headers="dept Greg">P&TE</td>
<td headers="phone Greg">56485</td>
</tr>
<tr>
<th id="name Wei-Zhong">Wei-Zhong Wang</th>
<td headers="dept Wei-Zhong">HelpDesk</td>
<td headers="phone Wei-Zhong">54754</td>
</tr>
</table>
Frames shall be titled with text that facilitates frame identification and navigation
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. Also, be sure to provide navigation within each frame to the other frames.
Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
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.
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).
Of course, we can't show you an example of an image or text blinking at 20 flashes per second or we
could be accused of trying to bring on an seizure.
The point is: be careful when designing animated .gif images or other refreshing content.
http://www.w3.org/WAI/wcag-curric/sam60-0.htm
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.
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.
<a href="text.html">Text-only version </a>
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.
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.Button rollovers, for example, 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.
Similarly, 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.
This example works fine, because no significant "new" information is presented by the rollover. There is only a color change.
This 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.
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).
If you are inserting applets or plugins into your 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.
The following content requires QuickTime.Download QuickTime
http://www.apple.com/quicktime/
Introduction to the Screen Reader
(http://www.doit.wisc.edu/accessibility/video/index.asp)
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.
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.
Example code:
<label for="street address">street</label>
<input id="street" type="text" street="textfield">
<label for="email address">email</label>
<input id="email" type="text" email="textfield">
<input type="submit" name="Submit" value="Submit">
For more examples of how to code accessible forms see:
WebAIMs tutorial for accessible forms (http://www.webaim.org/howto/forms/forms4)
A method shall be provided that permits users to skip repetitive navigation links.
Many websites use top or side navigation to lead people to important parts of their web site. This 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.
In the example below, an invisible image was added (border added to example to highlight image) which skips the navigation and brings the user to an internal anchor placed where the unique content of the page begins.Another example, (shown below) is to provide a simple text link which skips the navigation and brings the user to an internal anchor placed where the unique content of the page begins.
skip navigation
<img SRC="skip.gif" ALT="skip navigation" ></a><a href="#content_intro">skip navigation</a>
| |
introduction [web accessibility training] [webct course tool] |
| 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. |
 [home] [nmc] [bnmc][events] [hours & location][hardware & software] [ltde] [pte][consulting] [training][facilities] [policies] [contact us] If you are having problems access content within this site, please contact: Dan LaValley [University of Wisconsin - Madison] last updated: January 19, 2001   |
When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
The purpose of this standard is to ensure that users are not prevented from accessing content due to time limits.
When might a user encounter a time requirement? Most often this will occur with online resources that require sign-in and have session time-outs for security purposes. It might also occur in online surveys or other forms that require user input.
Many sites have user log-in sessions that automatically log a user out after a period of inactivity, for purposes of security. There are several ways to handle this security need in an accessible way:
Program an alert message that informs users that their session will time out soon and gives them the option of asking for more time.
Establish a lengthy standard timeout period, tell users how long it will be, and let them know what action they need to take to avoid being automatically logged out. The National Cancer Institute (NCI) Library Online (LION) has done just that.
See Example: LION's Login Screen, http://usability.gov/web_508/lion1.html
LION users are informed that their session will time out after one hour of inactivity, which is more than enough time to
accomodate most users, as activity is indicated by any request for a LION page. This solution works for the online library because unlike a bank or e-commerce storefront, there really is no security risk. The user chooses to log in in order to access the preferences they have established.
Another option for timed sessions is to provide an option for user control on the sign-in page. The LION site provides a good example of this approach in the way that it offers users an option to turn javascript off.
See Example: LION's User Options, http://usability.gov/web_508/lion2.html
THIS QUIZ HAS A TIME LIMIT OF 60 SECONDS!
If you need additional time on the quiz, please click the TIMER RESET button.
EXAMPLE
Take the quiz now.
This quiz was created using Macromedia Coursebuilder.
Section 508 Web Development Guidelines
For discussion or suggestions concerning the
accessibility of this page, contact the authors.
Authors: Blaire Bundy & Tim Dugdale
Edited by Alice Anderson
University of Wisconsin - Madison
Created: May 24, 2001
Last updated: January 6, 2003