Accessibility

There are a number of different laws, regulations, and standards that relate to accessibility for different industries. However, the most commonly accepted set of guidelines is WCAG 2.1. Law suits agreements and recent revisions existing laws point to WCAG 2.1 Level AA as the target for meeting accessibility needs.

Learn more about WCAG 2.1.

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 an 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.

Links make up the pathways that users can travel through your website. The key to writing effective links is making sure the link text can be understood out of context. Content authors and editors should be aware of best practices for writing accessible links so people using screen readers can find and understand where links go.

• Link text should be descriptive and specific. Avoid generic link text like “Read More” or “Click Here.”
• If there is important context that does not fit in the link text, include it before (as opposed to after) the link itself. For example, it’s better to say “View the full article” after the title and summary of the article then it is to say it before.
• Link text should be unique. Don’t use the same text to link to different pages.
• Link text should closely match the name of the page it’s linking to.
• If you are linking to a file, make sure you include file type labels (e.g. PDF) within the link text.

Structure helps create meaning. This is true for all users of all abilities, as well as non-human agents like screens readers and search engines. Headings the primary way to create hierarchical structure for your content. One of the easiest and most effective ways to make your website more accessible (and more usable in general) is to make sure you are organizing your pages with plenty of clear, concise, and consistent headings.

Follow a Logical Hierarchy

If you pull out the headings into a list, it should give you an outline of the information covered on that page. It’s important to use headings consistently in order. That means don’t skip a heading level, for instance by going from a heading 1 to a heading 3.

Each heading level has a corresponding HTML element. Using the correct heading element is the only way to communicate to a screen reader that something is a heading. However, you don’t have to understand HTML to structure content. Use the dropdown list in the toolbar to assign the correct heading level to content.

Best Practice for Writing Headings

Sighted users visually scan the headings and links on a page before actually reading paragraphs. People using screen readers do the same thing. Listening to a wall of text is just as tedious as reading it.

• Keep headings short.
• Make headings descriptive and unique so they make a reasonable amount of sense out of context.
• Structure headings so they are grammatically parallel to other headings in the same section.