The Top Five Accessibility Priorities for Web Sites: The How
Introduction
This page introduces you to some specific ways to make your Web pages more accessible. Though we don't cover every accessibility issue here, addressing the "top five" found below will certainly get you moving in the right direction.
NOTE: These guidelines do include some specific references to HTML code. For those Coastline users responsible for particular pages within the CCC Web site, it is not necessary to know HTML, since our editor is user-friendly enough not to require such knowledge.
Page Organization
Use Headings to Structure Your Pages
Use the h1 through h6 headings to create a structure within your page, much like an outline. For example:
- Use an h1 heading for your page's title.
Example:
On this page, the title The Top Five Accessibility Priorities for Web Sites: The How is an h1 heading.
- Use h2 headings for your page's main section headings.
Example:
On this page, the section heading Page Organization is an h2 heading.
- Use h3 headings for subheadings within your main sections.
Example:
On this page, the subsection heading Use Headings to Structure Your Pages is an h3 heading.
The Reason(s):
Sighted students can visually scan a page to see how the information is organized and structured, and can move right to the section of interest. In contrast, a blind individual uses a screen reader, which, by default, reads a page from top to bottom. Fortunately, many modern screen readers can actually build a table of contents for the user by utilizing the page's h1 through h6 headings to generate an outline. In this way, the blind user, like the sighted user, can "scan" the page to find and skip to the desired information. However, if the headings aren't there or are used inappropriately, the blind user misses out on this feature and is stuck with a painstakingly slow, linear path through the page.
So, the major guidelines related to page organization and headings are:
- Use headings to structure your page's information hierarchically.
- Never misuse headings just to format text as bolder or bigger.
Keep Your Page Layouts Consistent
This one is simple and common sense. Keep your page layouts consistent from page to page, i.e., keep your page titles, navigation bars, and other page elements in the same page location throughout your site.
The Reason(s):
It creates confusion even for those who can see if you shift things around from page to page. Imagine the frustration of somebody who can't see (or can't see well), trying to find something that was in one place on the previous page, but now seems to have moved.
Use Other Structural Elements Appropriately
In addition to headings h1 through h6, there are other structural elements that are often misused or underused, which results in unnecessary confusion for users of assistive technology such as screen readers. Here are a couple to watch out for:
- Don't use the blockquote element just to get text to indent from the left and right margins; use it only to set off a block quotation from another source.
- Use lists liberally; they are much easier to read than are long paragraphs of text. Notice how many lists are used within this module. Ordered (numbered) lists are easier to follow for blind users who are hearing them rather than reading them, so give preference to numbered lists over bulleted lists wherever it makes sense to do so.
The Reason(s):
Anything we can do to prevent misinformation (such as identifying non-quoted content as a block quotation) or to enhance understandability (such as putting lists into list format rather than long paragraphs) is a plus for all users, but especially for visually or cognitively impaired students.
Images and Animations
Images
Every image on a Web page should have alternative text associated with it. In HTML terms, this means the img element must use the alt attribute. If you use a WYSIWYG editor such as FrontPage, Dreamweaver, GoLive, or Composer, you typically enter alternative text via the Image Properties dialog box. (That means you probably won't have to edit the HTML code directly, but examples of the code are given below just for illustrative purposes.) The alt text you enter, however, depends upon the image's purpose:
- If the image is there to provide information to the Web site visitor, then the alternative text should provide that information in a text format. This is often a short description of the image. For example, a chemistry Web site might have a photo of lab equipment, and the image's alt text might read "test tubes, beakers, and bottles of chemicals." The end result in the HTML code is an img element that looks like this:
- If the image is purely decorative, such as a graphical horizontal bar or a rounded corner for a box, the alt text must be null. In HTML terms, that means the alt attribute still has to be present in the img element; however, it is empty:
- If the image is used as a hyperlink, the alt text should inform the user what happens if the image is clicked. For example, many Web sites use a small image of a house as a hyperlink to the site's home page. In this case, it would not be useful to give the image alt text such as "small blue house"; instead, the alt text should read "Home Page":
The Reason(s):
Images are completely unusable for those who cannot see them; this includes not only blind users, but those who have images turned off, those who use a text-only browser, etc. Therefore, for every image that conveys important information, be sure to include a text equivalent.
Animated GIFs
Animated GIFs are those little moving images you often see on Web pages, e.g., a mailbox opening and closing, a jumping figure, etc. They are actually composed of several images shown in sequence. Here are some guidelines regarding the use of animated GIFs:
- Don't use non-purposeful, non-informative animations on your Web pages.
- Never use animations that blink or flash at high rates of speed.
- For informative animations (e.g., an animation that demonstrates a process or procedure):
- Include alternative text that explains what the animation shows. For example, for an animated GIF demonstrating a procedure, the alt text might read "Procedure for preparing lab equipment. Step one: (briefly describe step one). Step two: (briefly describe step two)."
- Don't set the animation to move through the sequence of images at too fast of a pace.
The Reason(s):
Non-purposeful animations can be extremely distracting for students with cognitive impairments or learning disabilities, and prevent them from being able to concentrate on the page's important content. Animations that blink or flash at certain rates can actually trigger seizures in individuals with some types of seizure disorders. Informative animations should move slowly enough for visually-impaired users to track what's happening in the animation.
Multimedia
Audio Files
Every audio file must be accompanied by a text transcription.
The Reason(s):
Deaf or hard-of-hearing individuals will be unable to use or benefit from an audio file unless a text transcription is available.
Video with No Audio
Some Web sites contain video files without sound, e.g., a video demonstrating a particular skill. That video must be accompanied by a text description of the actions within the video.
The Reason(s):
Individuals who are blind or severely visually impaired will be unable to use or benefit from the video unless a text description of the contents of the video is made available to them.
Video with Audio
For the sake of deaf or hard-of-hearing individuals, video files with sound must be synchronously captioned, i.e., it is not enough to provide just a transcription. In this case, special software must be used to time captioning of the video's audio content with the video display. Moreover, the caption information must contain not only a transcription of the spoken words, but also of any other significant sounds. This is an extremely time-consuming process. While this is not something we expect everyone to know how to do, we do CCC Web site developers to:
- Be very selective about the use of video within their sites, i.e., pick and choose only what is most critical to include;
- Participate in the process by helping out with transcriptions of the audio content;
- Plan for a lot of lead time in order to finish the captioning process.
For the sake of blind or blind/deaf individuals, transcripts which include both spoken words and a narrative of the video events are very helpful.
The Reason(s):
In most cases, a blind individual would miss a lot of information when hearing just a transcript of a video's spoken words; after all, the sound is accompanying particular actions on the screen, so the spoken words don't tell the whole story. For that reason, video transcriptions must contain not only spoken words, but also other significant sounds and descriptions of the action. Likewise, though a deaf or hearing-impaired individual may be able to see the video action, the meaning may be lost or distorted without knowing what the people are saying as the action is taking place or unless other significant sounds are represented within the captioned information.
Hyperlinks
Text Links
Here are a few of the guidelines regarding text hyperlinks:
- Pick meaningful text for your "clickable" text; never use "click here" because it tells the user nothing about where the link leads. For example:
For more information, visit the Registration page.
…is much better than…Click here for more information about registration.
- Keep your hyperlinked text short, i.e., pick just the critical words that describe the link's destination rather than a long phrase or a whole sentence.
The Reason(s):
Users of screen readers often tab from link to link. If one or more of them say "click here" instead of describing the link's destination, there's nothing to differentiate one link from another. Older screen readers will sometimes interpret consecutive links as one long link unless there is another character separating the links.
Image Links
When an image is hyperlinked, its alternative text should describe the link's destination rather than describe the image. If the image is a button, such as a button with text that reads "Home Page" or "Site Map," the alt text should say exactly what the button text says.
The Reason(s):
In this case, it's far more important for a blind or visually-impaired student to know where the link will lead than to know what the image looks like.
Navigation Links
Hyperlinks are often used to navigate within a Web site. Here are a couple of important guidelines to follow:
- When you put a series of links into a navigation bar, always separate the links with a character such as the | (vertical bar) symbol and include a space on either side of the separating symbol. Thus, e.g., a course Web site's navigation bar should look something like this:
- Always provide a way to skip long lists of redundant links at the top of each page. For example, there is a visible "Skip to Main Content" link at the top of this module's pages.
The Reason(s):
This benefits the screen reader user who just wants to get to the page's main content, not hear the navigation links over and over again each time a new page is encountered within the same site. It also benefits those with motor impairments who have difficulty using a mouse or keyboard and appreciate a quick way to get past all the redundant links to reach a place within the main content.
Other File Types
Web site developers often make additional materials available online in various electronic formats. Common formats are Microsoft Word files, PowerPoint slides, and PDF (Adobe Acrobat) files. The problem is that these file formats are often not as accessible as they should be. If you are in the habit of distributing such electronic file formats online, you need to follow the the resources provided in order to learn how to make your files as accessible as possible. Of course, the best possible solution is to create an accessible HTML version, which will be usable to all individuals, without the necessity for specific software or plug-ins.
Word Files
Please see Making Word Documents Accessible.
PowerPoint Slideshows
Please see PowerPoint Accessibility Techniques (WebAIM).
PDF (Adobe Acrobat) Files
Please see Adobe Acrobat Accessibility Techniques (WebAIM).
See also Brief Background Information: The Who, What, and Why.
Return to Web Accessibility
