Web Accessibility Tutorial
Creating Alt Text for Images
Among the most important steps in making a site accessible is the creation of descriptive ALT text. ALT text is text that is associated with an image. Generally ALT text is invisible in a Web browser, although some browsers will display ALT text when the cursor is held over the image.
For example the following image in format GIF has the ALT text, "Web Accessibility for All".
Without the ALT text, a person with a screen reader would only hear, "IMAGE", and would subsequently have no idea what information was being conveyed through the image.
Here is an HTML Example of ALT text.
Often overlooked by Web designers, informative ALT text within an image allows individuals using text-based browsers to know which images are important to navigation and which images can be overlooked. Without ALT text labels (or by using poorly written and undescriptive ALT text), your site's accessibility will be very limited. Fortunately fixing this problem is straight forward and takes very little time.
As with all presentations of information, the key to conveying the content of a Web page is to keepyour audience in mind. In the case of alt text, there are three primary audiences:
- Visual readers who browse non-graphically with text-based browsers
- Blind, partially sighted, and sighted readers alike who browse pages using audio-based technologies
- Automated indexing programs (or search robots) that utilize ALT text as part of the page's contents in order to empower search capabilities
What is most apparent from this list is that ALT text is important for many people.. If you would like your students to find your page quickly, adding descriptive ALT text will help considerably. Thus well-crafted ALT text will improve the overall usability of your site and the internet generally.
When creating your alt text, remember that, as with all writing, it is important that you be succinct. For example, an image of a logo could simply say "Logo for Center on Education and Work." In other words, do not try to describe the actual visual appearance of such graphics. Doing so would only hamper quick navigation and distract from the primary function of your page.
When images represent the primary content or contain navigational links for your page, more descriptive ALT text is essential. Keep in mind, however, that extensive ALT text can sometimes affect the visual layout of your page. This is especially true when placing ALT text within a table. The general rule of thumb, then, is to be as direct as possible. At the same time, do not be afraid of being redundant when creating your ALT text tags.
If, for example, your page possesses an image that contains actual text (e.g., a page header or a button), your ALT text should include that very same text and make no mention of the colors or other visual characteristics superfluous to navigation.
ALT text that simply serves as visual adornment should always contain empty ALT text described as (alt=""). This rule of thumb includes spacers and borders. Do not include ALT text that describes, for example a leaf-pattern border etc.
Beyond offering a description of the image, it is important that ALT text accurately explain the function or purpose of the visual information. Often this means thinking not simply about the appearance of the image, but considering how the image operates on your page.
When creating a list (if you are using graphical bullets), be sure to include ALT text that includes bullets, asterisks, or some form of enumeration to indicate the breaks between the listed items.
Creating Alt Text for Links
Creating ALT text for links is no different than creating regular ALT text. Follow the same rules of thumb as described in the earlier section on alt text. You do not need to mention in the alt text that the link is a link (e.g. "This is a link to the home page"). It will be obvious to anyone using a screen reader or text-based browsers that the items are links that will take them to other sections of the page or your site.
In addition, make sure that every image that also serves as a link contains ALT text. Even if the link is repeated several times, it is important that you include the text label each time. Remember that it is better to be redundant than to not offer enough textual information to your users. Since every link will appear in a list for those who are using screenreaders, it is confusing if there are links in the list that are missing text labels altogether. In such a case, users may assume that these unlabelled links have other functions which, if they are browsing for specific information, will also need to be explored.
An example of this is a bulleted list of links that includes links for each bullet, in addition to the descriptive text for every bullet. If you create links for both the bullet and the text, then you need to have both the bullet and the text included within the same link. In other words, do not create a link for the image of the bullet as well as a separate link for the text which would lead the user to the same place.
Here is an HTML Example of ALT text for a list of links.Creating Alt Text for Spacers
A spacer image is an image that is invisible to the viewer, but takes up space on a page. It is used for visual layout purposes only, when the Web designer wants to have an item precisely positioned on a Web page. In such a case, designers sometimes use an invisible GIF that takes up space on the screen, (e.g. 10 pixels). Since spacer images are always aesthetic and superfluous to navigation and web page content, they require no alt text.