|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.|
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.
for lists, use numbers or letters instead of bullets, as screen readers may not "pronounce" the presence of a bullet
if you prefer graphic bullets, include alt text to denote the presence of a bullet
<img src="bullet.gif" alt="graphic bullet">
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.
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.
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>
|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"
|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">
|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.
Rebecca Plane fare $310 Food & Lodging $210
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.|
Provide text-link alternatives for pop-up linking as shown below.
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.
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.||
|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.||
form elements inserted here
|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">
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.
To view a SMIL sample, first open the RealPlayer on your computer. Choose "File" from the menu, and drag down to "Open Location." Enter the following URL... http://www2.cyber.vt.edu/kmoliver/test.smi
Note: if you link to this URL directly from your web browser, you can see the SMIL code, but you must open the file from within the Real Player to actually see it play.
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.|
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.