Alternative Text is Step 1 in Web Accessibility
Providing the Correct Alt Text Matters
Step 1 in Web Accessibility is adding alternative text for images. Everywhere you navigate on the web, there are images that have missing, incorrect, or unnecessary alternative text.
Without alternative text, many images create problems for screen readers used by the visually impaired to navigate web content. Providing the correct alternative text appears to be a simple task, however it can be one of the most difficult to do correctly.
It’s important to learn when you need to use alternative text, as well as those situations where the empty or null attribute (alt=””) can be used. The correct use of alternative text will allow all visitors to your web pages fully understand your content and enhance their Web Accessibility experience.
Images May Require Interpretation
Personal interpretation of an image may be required to determine the appropriate, equivalent alternative text to use to achieve web accessibility. We’ll use examples to will show how images are subject to interpretation and how that will help you determine how to use alternative text appropriately with every image.
You Have to Understand Alternative Text Basics
Alternative Text is used to provide a textual alternative to non-text content on web pages to make the page accessible for visually impaired users. Alternative text is used with images though it can be used with any non-text web content.
How Alternative Text Functions
Screen readers, web browsers and search engines interpret alternative text functions and provide images and other non-textual graphics with a textual description. Without alternative text, computers and screen readers would be unable to analyze an image and determine what it means on the web page.
Alternative Text must be used to provide the content and function of any image appearing on your web page. You can provide the alternative text either in the alt attribute of the image or in the textual content surrounding the image.
All Images Require an Alt Attribute
Images without an alt attribute are usually inaccessible to anyone using a screen reader. In some cases, images may be given an empty or null alt attribute (alt=””). HTML requires Alt Attributes with perhaps a few exceptions in HTML5.
Image Context is Everything
To determine the alternative text for images, context is everything. The alternative text for any image may change based solely on the context and surroundings of the image.
When the Image is Used Solely as an Image
The first step in deciding what appropriate alternative text is for an image is to decide if the image presents content and if the image has a function. In most cases, an image will only have a function if it is contained within a link or is an image map hotspot or a button.
Determining if the image presents content and what that content is can be much more difficult. If the content that the image conveys is also presented within text in the surrounding context of the image, then an empty alt attribute may suffice.
Let’s Examine Some Important Alt Attribute Rules
The alt attribute will usually:
- Be accurate and equivalent in presenting the same content and function of the image.
- Be brief. This means the correct content if present and function if there is a function of the image should be presented as briefly as is appropriate. Usually no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
- NOT be redundant or provide the same information as text within the context of the image.
- NOT use the phrases “image of …” or “graphic of …” to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.
When the Image is Explained by Surrounding Text
When the content of the image is explained within the surrounding content the alt attribute (alt=””) is the best option to be used. It is never the correct choice to not use an alternative text attribute, every image must have an alt attribute.
When the Image is Also Used as a Link
When the image is also a link, the image also has a function. If an image is within a link, the function of the image is presented with alternative text that is also within the link. If there is no adjacent text within the link that describes the function, the link must be presented within the alt attribute.
A screen reader must read something to identify a link. Screen readers might read the image file name or the URL of the page being linked to, which may or may not be useful. Remember that the link may be read out of context of the surrounding text, such as when the user is navigating by links within the page.
If both the content and function of the link and image are presented within the link, the image can be given the alt=”” attribute to avoid redundancy. You should avoid using “link to…” or “click this image to…” or similar wording in the alt attribute. Links are identified as links by screen readers and should be visually apparent to sighted users.
When the Image is a Continue to the Next Page Link
When an image contains only text, the text being displayed can usually be used as alternative text.
When the Image is an Employment Application Link
What would be the most appropriate alt attribute for the Employment Application Link image in this example? Note that the icon is within the link. The content of the image is presented in context, so (alt=””) is appropriate.
Notice that the image is within the link. If it were not within the link, then the alt text might be different. In this case, because the image provides additional information about the function of the link, it’s important that it be within the link itself and is read with the link. This is vital because links are often accessed out of context from their surroundings.
Decorative Images
Decorative images do not present important content. They are frequently used to enhance a layout or for other non-informative purposes. Decorative images do not appear within a link and in almost all cases, spacer and decorative images should have null alt text (alt=””).
When the Image Conveys no Content
What would be the appropriate alt attribute for horizontal separator image shown above? Because the image does not convey content and is not within a link, the alt=”” is the most appropriate choice. A description of the image is not appropriate.
Note
When an image is used only for decorative purposes, it is often best to remove the image from the page content and add it as a background image using CSS. This will remove the need for alternative text at all and will remove the image from the semantic and structural flow of the page.
When the Image is Only Decorative
What would be the appropriate alt attribute for the image displayed here? When analyzing this example, determine whether the image is presenting important content. In this case, I would argue that it does not.
In current practice on the web, many such images are given descriptive alternative text even though the images don’t seem to provide useful content. The alt attribute (alt=””) would probably be most appropriate in this case because the image does not convey relevant or important content.
In many cases you can ask the question “If I could not use this image, what would I put in its place?” to determine appropriate alternative text. In the example above, it’s not likely that the handshake photo would be replaced with text, thus alt=”” is probably sufficient.
Advanced Images
Sometimes it can be difficult where alternative text is required. With images, user testing and testing in screen readers and text-only browsers can help you determine the most appropriate method for implementing alternative text.
When the Image is a Form Image Button
Form image buttons must have an alt attribute that describes the function of the button. Image buttons are often used to provide a more visually appealing or a smaller version of the standard form buttons.
The alternative text should describe what the button will do when selected, such as “Search”, “Submit”, “Register”, “Place your order”, etc. For instance, <input type=”image” alt=”Submit Search”> might be appropriate for an image button on a site search form.
When Image Maps are Used
When using client-side image maps, the main image must have an alt attribute. The altattribute should present any content that is presented with the image, but that is not presented with the image map hotspots. For instance, if you had a State of New York map that had hotspots for each region, the image may have an alt attribute value of “Regions of New York “. If the main image does not convey content, but is primarily just a container for the hot spots (e.g., a navigation bar), then alt=”” is appropriate.
Each image map hotspot (area element) must have an equivalent alt attribute. Because the hot spots are clickable, each one must have alternative text that describes the function of that hotspot.
Because hotspots for server-side image maps cannot be given alternative text and because they are not keyboard accessible, they should not be used.
When Image Slices are Used
Sometimes large images are sliced into multiple images on a web site for design purposes. When multiple image slices together convey content, then that content must be presented to the user. Typically, this is done by providing the alternative text in the alt attribute of the largest or most prominent image slice.
It is not appropriate to repeat the alternative text unnecessarily, break the alternative text across multiple image alt attributes, or provide no alternative at all. If an image slice is within a link, alternative text describing the function of the link must be provided in the images alt attribute, in the alt attribute of another image within the same link, or within text within the same link. Each link must contain functional text that describes the links function.
When the Image is a Background Image
It is not possible to add alternative text directly to CSS or other background images. Images that convey content should not generally be placed in page or element backgrounds.
Background images can, however, be used for decorative images, thus removing the image from the content flow of the page and removing the need for an empty alt attribute.
Sometimes image sprites or other background images are used to present content. While these should generally be avoided, if they are used, any content conveyed through the background image must be made accessible within the page markup.
When the Image is a Logo
It is common practice on the web to have the main site logo also link to the site home page. Because this is fairly standard practice, providing alternative text for the image, such as your company name (alt=”Acme Company), will usually suffice. Identifying the logo as actually being a logo (alt=”Acme Company Logo”) is not typically necessary.
The content and function is not “logo”. Developers will often identify the image as being to the home page (alt=”Acme Company home page), though if the image is consistently at the beginning of the page and the alternative text is appropriate, this additional information should not be needed.
When Complex Images are Used
When an equivalent alternative for a complex image, such as a chart, graph, or map cannot be limited to a succinct alt attribute (perhaps a couple sentences in length), then the alternative should be provided elsewhere.
The alternative content can often be presented within the context of the page, such as in an adjacent data table. The alternative text can also be provided by linking to a separate web page that provides the longer description of the complex image.
The link can be adjacent to the image or the image itself could be linked to the long description page. The alternative text for the image should still describe the general content of the image.
Figure and Figcaption
HTML5 introduces the figure element, which is defined as:
The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
Let’s Examine Our Conclusions
Despite being the biggest issue affecting web accessibility, there are still many incorrect methods for implementing alternative text. By following the basic principles outlined here, web developers can make their web content more accessible to individuals with disabilities.
- Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.
- Alternative text may be provided in the altattribute or in the surrounding context of the image.
- Every image must have an alt
- Alternative text should:
- present the CONTENT and FUNCTION of the image.
- be succinct.
- Alternative text should not:
- be redundant (be the same as adjacent or body text).
- use the phrases “image of…” or “graphic of…”.
- Appropriate alternative text depends heavily on the image’s context.
- Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.
- Decorative images still need an altattribute, but it should be null (alt=””).
Alternative Text Increases Accessibility
The accessibility of the web in general would increase dramatically if alternative text were provided and implemented correctly.
