Image alt (alternative) text provides a description of an image for people using screen readers. Alt text can be presented within adjacent content on the page or as an attribute of the HTML image tag <img> which is read by screen readers but not presented visually on the page.
Not all images require a description. It depends on the information the image contains, and the role or context of the page. However, all images do require at least an empty alt attribute, which is written like this: img alt=””.
Adding Empty Alt Attribute
The steps below will help you determine if alt text is required. If you determine that it is not necessary for an image, leave the alt field blank when you add an image. This will output a correct empty alt attribute automatically.
How to Determine What the Alt Text Should Be
Most images fit into one of the following categories:
- Informative: Images that present relevant information
- Decorative: Images that do not provide information, but instead provide visual style or are part of the layout
- Functional: Images that function as standalone links, often icons or part of a button
- Complex: Images that present complex information like graphs, maps and other diagrams
How you write alt text depends on the context of the images. The same image may have different alt text in different contexts, or empty alt text in one context but descriptive alt text in another.
Writing Alt Text
Informational Images
One of the most important concepts is understanding when an image is informational and when it is decorative. Think about what the main point of the image is and how it’s being used on the page:
- Is the image itself important for understand key information?
- Does the information in the image exist anywhere else on the page?
- Is the image part of a link?
- Is this a complex image that requires more than a sentence to describe?
If you answered yes to any of these, then you likely have a informational image that requires alt text.
Decorative Images
Decorative images are images that do not add information, either because they do not contain information, or they contain information that is already clearly presented as text on the page. You should use an empty alt attribute for the following situations:
- Repeated Information. If writing an alt description would repeat adjacent text, you probably don’t need it. Someone using a screen reader would have access to that information, and they don’t need to hear it twice.
- Design Elements. Images that are merely design elements, such as borders or backgrounds, do not actually contain information, and therefore don’t need a description.
- Stock Images. Stock images are decorative when they are just “eye candy,” are chosen just to break up the text, or when their subjects are so general they do not add any relevant information. Most stock images do not require alt text.
Functional Images
Images that are part of a link or button may need alt text depending on whether the image contains information that is part of the link text. For functional images, you want to describe the function of the image, not the image itself. For example, say “Search” instead of “Magnifying glass”
Complex Images
Some images require more than one sentence to describe. This usually means charts, graphs, and other visual diagrams.
One approach is to describe the information directly on the page itself, and not in the alt text. This approach also benefits people with learning and cognitive disabilities who may have difficulty understanding complex information. It is also a potential benefit for everyone, since it gives site visitors another way to make sense of the content. And it’s good for SEO, since it adds keywords that would otherwise be locked in the image.
We recommend going one step further and providing a summary of the complex image using a caption on the page itself. If you take this approach, you use an empty alt attribute alt=””, since all the relevant information is already on the page. If there is no room for a caption, you can put the summary in the alt text and direct the reader to the information on the page.
Structured Content
In some cases, the same image may be used dynamically in different components or pages. If this situation, review all contexts before writing alt text. If the image needs alt text in at least one context, include it, even if it’s not necessary in all contexts. If an image needs alt text in all contexts, use your discretion to decide which alt text to write based on what context is most useful, most common, or most important.
Tips
Describe the purpose of the image: In most cases, you should describe the purpose or function of the image in that specific context, as opposed to describing the contents of the image itself. Think what is the point of this image instead of what is this an image of.
Keep it short: People who use screen readers often find overly descriptive alt text tedious and not useful. Ideally alt text should be 4-6 words. If an image is too complex to communicate within that limit, follow best practices for complex images.
Avoid unnecessary phrases: Don’t identify image as images (the screen does that already) or specify the format (e.g. “image of…” or “photograph that shows…”) For logos, you should just use the name of the organization or company; there is no need to say “logo of” first. For images that are within links, don’t say “link to….”; the screen reader will identify links automatically.
Rely on the experts: Because alt text depends on the context of its use, it’s important for the author of the alt text to be someone who was involved in the content creation. In other words, ideally the content author or subject matter expert, or whoever selected the image, should write the alt text. Developers and designers are not the ideal people to write alt text for informational images.
Don’t overcompensate: Avoid the temptation to overcompensate by writing long, overly descriptive alt text. You do not need to describe the image in great detail; it’s more important to accurately describe its purpose. No one—including people who use screen readers—wants to wade through clutter when visiting a website. When in doubt, it’s better to err on the side of brevity.