Text alternative does not provide a sufficient description

What is the problem?

Text alternatives should be as concise as possible, but they should also be providing an equivalent experience to people who cannot see the screen. If a text alternative is too vague or too brief, then the element cannot be considered accessible.

For more information on writing text alternatives, refer to W3C G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.

Text alternative is only partially provided

The image has a text alternative but it is incomplete or not descriptive enough, when used in context.

In this example, the text alternative for the image was “Charlotte Magazine BOB (Best of the Best) Awards, 2015 Winner” which really only describes the first of the three logos that have been combined into this single image.

Change text alternative to match the page context

Updating existing text alternative is simpler than added it, because the code is already in place. Once the existing text alternative is found it’s text editing to update it. See image does not provide a text alternative for code samples of how alternative text could have been added.

The text alternative for our example above should be set to “2015, 2016 and 2017 BOB Awards Winner, Charlotte Magazine’s Best of the Best logos” to fully replace the information being expressed by the current image.

G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

Update the image and page content

Another solution might be to update the image and the text surrounding the image, to make the text alternative accurate.

If rather than an image of three logos the image was only of the first logo the text alternative of “Charlotte Magazine BOB (Best of the Best) Awards, 2015 Winner” would be absolutely correct.

However it would be a mistake to do this for all three logos, as doing so would create the following painful screen reader experience Screen Reader Announces: graphic

Charlotte Magazine BOB (Best of the Best) Awards, 2015 Winner

graphic

Charlotte Magazine BOB (Best of the Best) Awards, 2016 Winner

graphic

Charlotte Magazine BOB (Best of the Best) Awards, 2017 Winner

If the desire is to have three images then it might be most appropriate to add text before the images titled “Charlotte Magazine BOB (Best of the Best) Awards”, allowing the text alternative of the images to be the year followed by “Winner”.

Charlotte Magazine BOB (Best of the Best) Awards:

Resulting in Screen Reader Announces: Charlotte Magazine BOB (Best of the Best) Awards:

graphic

2015 Winner

graphic

2016 Winner

graphic

2017 Winner

Complex graphic has a short text alternative

For complex graphics, a short text alternative may not be sufficient for creating an equivalent experience. In these cases, we must explore how to provide longer descriptions for visual information.

Provide a link to a more detailed text description

If a complex graphic cannot be summarized concisely with alternative text, provide a link to a text description of the graphic.

For more information on providing complex text alternatives, watch the following video:

G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description