So, you found the Web Content Accessibility Guidelines from the W3C at https://www.w3.org/WAI/standards-guidelines/wcag/glance/ and you're committed to making your website as accessible and user-friendly as possible. Fantastic! Let's talk about one of the most elementary aspects of a site that contributes to accessibility for users of assistive technology.
Provide Text Alternatives for Non-Text Elements
One of the most basic principles of web accessibility is that you should label everything on your website that isn't strictly text. In most cases, this means using alternative text to describe the function of the item. In HTML, you can provide a short text description for images by adding alt="your description of the image" within the image element.
The value of this attribute is referred to as "alt text" because it's an alternative to viewing the image—screen readers can deliver the information to blind users via synthetic speech or refreshable braille, and if the images on a web page fail to load (for bandwidth or other reasons) sighted users will see that alternative text displayed instead. If everything on the web page is tagged correctly, even if the images don't display you'll see words describing the image in the space where the picture was supposed to be. So, if you have your company logo at the top of the page, you would see "Acme Dynamite Logo" or something appropriate in its space. Image maps, if properly alt-tagged, will appear as a series of meaningful words.
Pictures are probably there for a reason. Certainly, graphical links have a purpose. Image maps need to have alt-text for each "clickable" region. But even decorative images serve a purpose—conveying a theme, or suggesting a particular audience.
Tips for Writing Effective Alt Text
They say a picture is worth a thousand words, so how do you know what to write when faced with a blank alt attribute or an empty "compose image description" field? Of course, describing an image is just as subjective a process as selecting the image itself, but here are a few suggestions that may help.
- Brief is generally better. Remember, syllables are time.
- Put the most essential information first. For example: "Acme Logo: Sun rising over a desert landscape" is better than "Sun rising over a desert landscape: Acme Logo."
- There's no need to start with "picture of..." or "image of..." You can jump right in to describing your image.
- Describe the function of the image. If the image is a link, "Search the Library Catalog" is much more useful than "Photo of a collection of books and other reading materials scattered on a table."
- Context is important. The same photograph might be labeled as "man in a business suit walking with a white cane" in an article that is focused on employment opportunities, or orientation and mobility techniques, but labeled as "Kirk Adams, AFB president and CEO" in an article where that photograph is being used to introduce him as an expert or speaker.
- Meaningless graphics need not have meaningful text. If a graphic is being used as a spacer or to push other graphics into position, don't label it "Green spacer." Instead, put a space between the quotes of the alt-text so users don't have their train of thought disrupted by such irrelevant information. Use this "non-text" sparingly, though. If you can't think of something to say about an image, that doesn't mean it's meaningless.
- Maintain the alt text. If your image map is rearranged so that the last item is now "Contact Us," don't forget to move the alt text, too. Otherwise, that image will still have the old label, and users will be lost.
- Alt text reflects your professionalism just as much as your choice of images. Spell words correctly, or they will be pronounced incorrectly.
Creating Effective, Accessible Links
Reminder: Try to avoid using images as links, because they can be hard for people with low vision to decipher, but definitely provide alt text if you do. In this case, the alt text should tell users where they are going.
