Guidelines and Resources for Designing Accessible Web Pages

graphic title that states accessible web pages: guidelines

You are currently on the guidelines page. When ready, go to the resources page.

Accessible web design is responsible and equitable web design. It is also the law. Chapter 53 of the State Code of Virginia is the Information Technology Access Act, mandating public colleges and universities provide equal access to information technology for certain disabled populations (also referenced as HB 1115). All information from public colleges and universities is now required to be presented "...in formats intended for both visual and nonvisual use." If you are creating web pages for your courses with photos, graphics, animations, or video elements, you must comply with this 1998 law by providing equivalent information (e.g., transcriptions, descriptions, alternate navigation schemes).

Accessible web design is not about stripping images, video, audio, or interaction from your web pages. It is about providing alternative access to this information for those who would otherwise lose their opportunity to learn. Some basic steps can be taken to ensure your web pages are accessible, as outlined below.

Guidelines are provided for the following web elements: links, graphics and animation, lists, icons, color contrast, frames, downloadables, style formatting/emphasis, image maps/images used for links, tables for data, spawned/pop-up windows, javascript, forms, audio, video, and page layout/tables vs. style sheets.

LINKS Top
Don't create links that state click here or students with screen readers will be required to open every link to determine the content of your links. Create only specific, explicit links... Virginia Tech Home Page

GRAPHICS AND ANIMATION Top
If you create web pages with HTML, include descriptive ALT tags within your image tags... <img src="graphic.gif" alt="picture of a 3-story brick office building"> When you use ALT tags, a student who can not see images will instead be provided with your alternate description as shown... If you create web pages with Front Page, Dreamweaver, or other web editor, when you insert an image, look for the dialog box that allows you to include alternative descriptive text as shown ("screwdriver turning clockwise"). Note, an underlined "D" that represents a link to descriptive text has also become a convention in the disabled community. D

GRAPHICS AND ANIMATION Top

If you create web pages with HTML, include descriptive ALT tags within your image tags...
<img src="graphic.gif" alt="picture of a 3-story brick office building">

When you use ALT tags, a student who can not see images will instead be provided with your alternate description as shown...
img of alt text as it is seen when images are turned off

img of alt text as it is seen when images are turned off

If you create web pages with Front Page, Dreamweaver, or other web editor, when you insert an image, look for the dialog box that allows you to include alternative descriptive text as shown ("screwdriver turning clockwise").

Note, an underlined "D" that represents a link to descriptive text has also become a convention in the disabled community.

LISTS Top
for lists, use numbers or letters instead of bullets, as screen readers may not "pronounce" the presence of a bullet a. John b. Mary c. Paul if you prefer graphic bullets, include alt text to denote the presence of a bullet <img src="bullet.gif" alt="graphic bullet"> John Mary Paul

LISTS Top

for lists, use numbers or letters instead of bullets, as screen readers may not "pronounce" the presence of a bullet

a. John
b. Mary
c. Paul

if you prefer graphic bullets, include alt text to denote the presence of a bullet
<img src="bullet.gif" alt="graphic bullet">

  John
  Mary
  Paul

ICONS Top
Large and consistent buttons help those with visual disabilities. Large buttons promote visibility, while designing a web site with icons in one consistent location helps a visually impaired user to more easily navigate through your content. At Virginia Tech, the Course Info online course tool provides large buttons in a consistent layout.
graphic showing the course info interface with a series of buttons consistently placed and available along the left-hand column with changing content displayed to the right
Information is transmitted along a verbal to visual continuum. In general, visual symbols are easier to comprehend than verbal symbols. If you travel to a foreign country where you do not understand the verbal language (spoken/written), would you still be able to find a doctor, golf course, train station, olympic event, or copy machine from the following visual symbols? Yes, most likely.

image of a copy machine red cross symbol for medical assistance symbol of the medical profession olympic icon for rowing events olympic icon for archery events handicapped symbol stop sign icon train icon
The above standard symbols are readily interpreted by most. Certain original visuals, however, can be confusing. Consider the following icon which could represent a button for a videoconference, a chat session, or a communication tool. In fact, the designer used this icon to represent "frequently asked questions."

image of a computer screen with four persons separated into four quadrants
You should strive to use a combination of both visual and verbal information to promote comprehension. The visual symbol should be an accurate representation, while the verbal symbol should be simple and to the point. Remember to include descriptive alt text for any graphic icons used.
image of a cd rom and software program with a text title across the top stating products and solutions image of a trainer writing on a flip chart with a text title across the top stating support, training, and consulting

ICONS Top
Large and consistent buttons help those with visual disabilities. Large buttons promote visibility, while designing a web site with icons in one consistent location helps a visually impaired user to more easily navigate through your content. At Virginia Tech, the Course Info online course tool provides large buttons in a consistent layout. Information is transmitted along a verbal to visual continuum. In general, visual symbols are easier to comprehend than verbal symbols. If you travel to a foreign country where you do not understand the verbal language (spoken/written), would you still be able to find a doctor, golf course, train station, olympic event, or copy machine from the following visual symbols? Yes, most likely. The above standard symbols are readily interpreted by most. Certain original visuals, however, can be confusing. Consider the following icon which could represent a button for a videoconference, a chat session, or a communication tool. In fact, the designer used this icon to represent "frequently asked questions." You should strive to use a combination of both visual and verbal information to promote comprehension. The visual symbol should be an accurate representation, while the verbal symbol should be simple and to the point. Remember to include descriptive alt text for any graphic icons used.

COLOR/CONTRAST Top
Ensure plenty of contrast between foreground/background colors. Dark text on a lightly colored or lightly textured background is recommended. If you prefer dark backgrounds, use light text to enhance readibility. Busy backgrounds are popular in graphic design, but should be avoided as they cause poor readibility. When in doubt, test your color choices. Set your monitor to grayscale to judge how easily one can read text with your color choices. Avoid obvious color clashes such as yellow/green or red/blue. Good color combinations include navy blue/yellow and black/white.
Avoid green text on yellow, and vise versa.
Avoid blue text on red, and vise versa.
Avoid white text on yellow, and vise versa.
Avoid green text on blue, and vise versa.

FRAMES Top
Since frames can cause trouble for some older screen readers, include titles and descriptions for your frames, and include a "noframes" option. In each frame source tag, a descriptive title should be used to facilitate frame identification (title="site navigation bar"), and a separate web page should be created to explain and orient the visually impaired user to the frames' contents and relationships (longdesc="frameset-desc.html"). For elaboration on appropriate frame tags, see the WC3's instructions. <FRAME src="navbar.html" name="navbar" title="site navigation bar" longdesc="frameset-desc.html"> A "no frames" option allows a user to navigate through your web site without frames. This option employs tags as shown below, containing a link to the non-framed site index. <NOFRAMES> <a href="noframesite.html">No frames version</a> </NOFRAMES>

FRAMES Top

Since frames can cause trouble for some older screen readers, include titles and descriptions for your frames, and include a "noframes" option.

In each frame source tag, a descriptive title should be used to facilitate frame identification (title="site navigation bar"), and a separate web page should be created to explain and orient the visually impaired user to the frames' contents and relationships (longdesc="frameset-desc.html"). For elaboration on appropriate frame tags, see the WC3's instructions.

<FRAME src="navbar.html" name="navbar" title="site navigation bar" longdesc="frameset-desc.html">

A "no frames" option allows a user to navigate through your web site without frames. This option employs tags as shown below, containing a link to the non-framed site index.

<NOFRAMES> <a href="noframesite.html">No frames version</a> </NOFRAMES>

DOWNLOADABLES Top
If a content provider has a document they wish to place on the Internet, they can convert that document to HTML (hypertext markup language) or save that document as a PDF file (portable document format). The PDF option is much faster, but essentially creates images of the original document which are not easily interpreted by screen readers. The Gemini, Redwing, and Magellan PDF extraction tools allow users to convert PDF files back into text files that can be read, but there is a cost in both time and money. Providing HTML or ascii text equivalents for your PDF files will ensure accessibility for those who might not have required plug-in's to read your PDF files.

DOWNLOADABLES Top

If a content provider has a document they wish to place on the Internet, they can convert that document to HTML (hypertext markup language) or save that document as a PDF file (portable document format). The PDF option is much faster, but essentially creates images of the original document which are not easily interpreted by screen readers. The Gemini, Redwing, and Magellan PDF extraction tools allow users to convert PDF files back into text files that can be read, but there is a cost in both time and money. Providing HTML or ascii text equivalents for your PDF files will ensure accessibility for those who might not have required plug-in's to read your PDF files.

STYLE FORMATTING, EMPHASIS Top
You should avoid reliance upon style formatting (e.g., italics, underlines, color cues). Such cueing may not be recognizable by many visually impaired web users. Don't use style cues... "Is the underlined word a verb or a noun? The dog ran fast." Do use text-based cues... "In the following sentence, is the word 'ran' a verb or a noun? The dog ran fast." Don't use style cues... "The red response is correct. A. John B. Mary C. Pat" Do use text-based cues... "Response B., shown in red, is correct. A. John B. Mary C. Pat"

STYLE FORMATTING, EMPHASIS Top

You should avoid reliance upon style formatting (e.g., italics, underlines, color cues). Such cueing may not be recognizable by many visually impaired web users.

Don't use style cues... "Is the underlined word a verb or a noun? The dog ran fast."
Do use text-based cues... "In the following sentence, is the word 'ran' a verb or a noun? The dog ran fast."

Don't use style cues... "The red response is correct. A. John B. Mary C. Pat"
Do use text-based cues... "Response B., shown in red, is correct. A. John B. Mary C. Pat"

IMAGE MAPS, IMAGES USED AS LINKS Top
When using an image map or other image for linking purposes, be sure to include alternate text links below or beside the images as shown below. Virginia Tech UVA UNC Tennessee When using an image map or image, be sure to include ALT text that describes the image and directs a user to any alternate text links... <IMG SRC="schools.gif" ALT="this image map shows 4 university logos; alternate text links are available below">

IMAGE MAPS, IMAGES USED AS LINKS Top

When using an image map or other image for linking purposes, be sure to include alternate text links below or beside the images as shown below.
this is an image map, alternate text links are available below

this is an image map, alternate text links are available below

Virginia Tech UVA UNC Tennessee

When using an image map or image, be sure to include ALT text that describes the image and directs a user to any alternate text links...
<IMG SRC="schools.gif" ALT="this image map shows 4 university logos; alternate text links are available below">

TABLES FOR DATA Top
Since screen readers pronounce content from left to right, design tabular content so that the data is in logical order when read from left to right. The first example below is not formatted properly. The second example is more appropriate. Tabitha Plane fare $310 Food & Lodging $189 Rebecca Plane fare $310 Food & Lodging $210 If you are familiar with HTML (hypertext markup language), you should insert specific tags into your tables that will promote understanding. Use the <TH> tag to represent a tabular heading, and use the <TD> tag to represent tabular data. The resulting table will contain bold heading sections and regular data sections as shown. You may also wish to consider text alternatives to tables... "Tabitha spent $310 on plane fare and $189 on food and lodging. Rebecca spent $310 on plane fare and $210 on food and lodging."

TABLES FOR DATA Top

Since screen readers pronounce content from left to right, design tabular content so that the data is in logical order when read from left to right. The first example below is not formatted properly. The second example is more appropriate.

image of a table formatted improperly so that users with screen readers would have difficulty interpreting the meaning of the tabular data

image of a table formatted improperly so that users with screen readers would have difficulty interpreting the meaning of the tabular data

Tabitha Plane fare $310 Food & Lodging $189
Rebecca Plane fare $310 Food & Lodging $210

If you are familiar with HTML (hypertext markup language), you should insert specific tags into your tables that will promote understanding. Use the <TH> tag to represent a tabular heading, and use the <TD> tag to represent tabular data. The resulting table will contain bold heading sections and regular data sections as shown.

sample html code showing how to use the TH and TD tags for more proper formatting of tables

sample html code showing how to use the TH and TD tags for more proper formatting of tables

sample table showing how the use of TH and TD tags will result in bolded title headings and regularly formatted data cells

You may also wish to consider text alternatives to tables... "Tabitha spent $310 on plane fare and $189 on food and lodging. Rebecca spent $310 on plane fare and $210 on food and lodging."

SPAWNED, POP-UP WINDOWS Top
Avoid spawned or pop-up windows which can be confusing to those with visual disabilities. Click to see an example of a spawned window, then close that pop-up window and return to this site.

JAVASCRIPT Top
Provide text-link alternatives for pop-up linking as shown below. Virginia Tech UVA UNC Tennessee Provide alternatives for mouse-over content. If you ask... "Which image represents a fern?" Then you should also ask... "Which group of terms accurately represents the characteristics of ferns?" 1. 30 feet tall, broad leaves, bark, canopy 2. 20 feet tall, narrow leaves, bark, canopy 3. 2-3 feet tall, fingered leaves, tubular stems, undergrowth Select option 1. Select option 2. Select option 3.

JAVASCRIPT Top

Provide text-link alternatives for pop-up linking as shown below. Virginia Tech UVA UNC Tennessee

Provide alternatives for mouse-over content.

If you ask... "Which image represents a fern?"

Then you should also ask... "Which group of terms accurately represents the characteristics of ferns?"

1. 30 feet tall, broad leaves, bark, canopy
2. 20 feet tall, narrow leaves, bark, canopy
3. 2-3 feet tall, fingered leaves, tubular stems, undergrowth

Select option 1.
Select option 2.
Select option 3.

FORMS Top
Since certain web users may be unable to view and fill-out online forms, you should provide a phone number for these individuals to call and supply their information. You may also provide alternate forms that can be downloaded and mailed/e-mailed. If you are familiar with HTML coding, including certain HTML tags in your forms can improve the likelihood that all users will be able to complete them. WC3 provides a detailed explanation of HTML tags that can improve the accessibility of online forms.
First you should group like items together on a form. Use the "fieldset" tags to offset a form section, and use the "legend" tags to describe the purpose or contents for that section.	<fieldset> <legend>demographic information</legend> </fieldset>
If students will be asked to select one item from a list of items, use the "optgroup" tags to indicate the list, and the "label" attribute within optgroup to describe the purpose or content of that list.	<optgroup label="age"> form elements inserted here </optgroup>
It may be appropriate to establish a specific tab order through a form. For example, if you want students to tab to a demographic field for entering their last name first, place a "tabindex" attribute within the "input" tag. If you desire an alphabetical navigation scheme, you may include the "accesskey" attribute within the label tag. When typed, the user is taken to that specified field.	<label for="lastname" accesskey="F">Last name: </label> <input type="text" id="lastname" tabindex="1">

AUDIO Top
Any audio information on your web site should be provided in alternate forms for users with hearing disabilities. In fact, even those without hearing disabilities may prefer printing and reading at their own pace over listening to an audio presentation. You have two options for audio. One is to provide a static text-based transcription for users to read (.html, .txt., .ascii, .doc). If you are hosting live broadcast events, it will be important to provide access to a transcription of that event immediately after it ends. A second option is to provide synchronized text-based captioning that plays in the same real time as your audio/video presentation. One method for synchronous captioning is SMIL coding (synchronized multimedia integration language). SMIL coding is similar to HTML, but has many differences. With SMIL, you can control the entire time-sequence of your presentation, writing captions to appear at different points in a video sequence, adding different captions under different powerpoint slides as they automatically change, or adding captions to appear along with regular audio. SMIL files, including captions, typically play through a streamed media player such as the RealPlayer, since streaming is the preferred method of delivering audio and video over the Internet.

AUDIO Top

Any audio information on your web site should be provided in alternate forms for users with hearing disabilities. In fact, even those without hearing disabilities may prefer printing and reading at their own pace over listening to an audio presentation.

You have two options for audio. One is to provide a static text-based transcription for users to read (.html, .txt., .ascii, .doc). If you are hosting live broadcast events, it will be important to provide access to a transcription of that event immediately after it ends.

A second option is to provide synchronized text-based captioning that plays in the same real time as your audio/video presentation. One method for synchronous captioning is SMIL coding (synchronized multimedia integration language). SMIL coding is similar to HTML, but has many differences. With SMIL, you can control the entire time-sequence of your presentation, writing captions to appear at different points in a video sequence, adding different captions under different powerpoint slides as they automatically change, or adding captions to appear along with regular audio. SMIL files, including captions, typically play through a streamed media player such as the RealPlayer, since streaming is the preferred method of delivering audio and video over the Internet.

image of the real player showing a video segment with a caption underneath

VIDEO Top
Video files present a similar dilemma for web authors as audio files (see guidelines for audio), since those with auditory impairments may not be able to hear the spoken or musical track in the video. It present a new dilemma, however, in that those with visual impairments may not be able to see or comprehend the visual elements. To improve access to the audio elements, it will be necessary to at least provide a transcription for those with visual and auditory impairments, and possibly additional captions for those with auditory impairments. Since the entire instructional message of a video is not carried by the audio elements, it will also be necessary to provide a detailed description of the visual elements for those with visual impairments. This would include detailed descriptions of any images, graphics, charts, or graphs which help to deliver the message and are not adequately described by the audio portion.

VIDEO Top

Video files present a similar dilemma for web authors as audio files (see guidelines for audio), since those with auditory impairments may not be able to hear the spoken or musical track in the video. It present a new dilemma, however, in that those with visual impairments may not be able to see or comprehend the visual elements.

To improve access to the audio elements, it will be necessary to at least provide a transcription for those with visual and auditory impairments, and possibly additional captions for those with auditory impairments.

Since the entire instructional message of a video is not carried by the audio elements, it will also be necessary to provide a detailed description of the visual elements for those with visual impairments. This would include detailed descriptions of any images, graphics, charts, or graphs which help to deliver the message and are not adequately described by the audio portion.

PAGE LAYOUT, TABLES vs. STYLE SHEETS Top
To properly align a photo next to text or to control the layout of items on a screen, many web designers utilize tables. Since tables may cause difficulty in navigating a web page, cascading style sheets (CSS) are the preferred method of controlling the layout of a web page. Style sheets enable web professionals to pre-format an accessible and standardized layout for a department or organization. Once designed, content providers (i.e., faculty) need not worry about layout. They focus on providing information and reference a style sheet to auto-format that data. Style sheets can also help you practice good design as described on this web page. Through style sheets, an appropriate color scheme, font color, and font size can be passed on to every page you develop.

PAGE LAYOUT, TABLES vs. STYLE SHEETS Top

To properly align a photo next to text or to control the layout of items on a screen, many web designers utilize tables. Since tables may cause difficulty in navigating a web page, cascading style sheets (CSS) are the preferred method of controlling the layout of a web page. Style sheets enable web professionals to pre-format an accessible and standardized layout for a department or organization. Once designed, content providers (i.e., faculty) need not worry about layout. They focus on providing information and reference a style sheet to auto-format that data. Style sheets can also help you practice good design as described on this web page. Through style sheets, an appropriate color scheme, font color, and font size can be passed on to every page you develop.

This resource is provided by Educational Technologies. Send comments and suggestions to Kevin Oliver.
Accessibility products and services are provided on the Virginia Tech campus by the Special Services Lab.