Last week I covered how to write better Page Titles for
meeting accessibility standards, and this week I cover the second topic in the
W3C’s Easy Checks, image text alternatives. At first glance, this seems an easy
requirement, but many content authors don’t grasp the full intent or purpose of
this accessibility standard.
Alt text should describe the meaning of an image
Alt text is meant to provide vision-impaired users with the
same conceptual understanding of the page content as someone who can see. It
should convey the meaning and purpose of the image to the user rather than a
literal description of the image itself.
There is no technical, rote way to provide meaningful alt
text. For example, mechanically inserting file names (i.e.,
convention-hall.png) in the alt attribute fails to meet accessibility
requirements because it does not provide the user with useful information,
which is the intent of this requirement.
In that same vein, simply adding “Convention hall” as the
alt text is no more meaningful than the file name and also fails to meet accessibility requirements.
Not all images need alt text
Empty alt attributes in an image will trigger a warning from
automated accessibility checkers, which has led many people to erroneously
believe that text must be present for every image to meet accessibility
requirements and for a page to be compliant. Instead, the warning is meant to
indicate that only human judgment can decide whether an empty attribute is
appropriate, so the image context should be reviewed.
Decorative images that do not contain any substantive
information should have empty alt
attributes so that readers are not slowed down with irrelevant verbiage.
Alt text requires editorial judgment
Alt text should be written with the same thoughtful approach
as page content. Only an author/editor can correctly judge whether an image is
decorative or not. A stock photo of a convention hall filled with attendees
would probably be considered decorative, but a specific photo of a convention
might have more meaning in the context of an article about that event. In that
case, the alt text could read: “Our recent convention was well-attended and
there was standing-room only by the end of the day.”
If this same message is already conveyed in the page text,
then the image is decorative only and the alt attribute can be left empty.
Image captions can take the place of alt text
Sometimes the alt text of an image may end up with more
substantive content than the surrounding page text. If sighted users will get
less information due to the invisibility of alt text, then the content author
should consider elevating the image description to a caption where the meaning
is explicit to all users, rather than any particular subset of users. With the
meaning defined in the surrounding text, once again the image is purely
decorative and the alt attribute can be left empty.
Images can initiate action
When images are used to indicate an action, the alternative
text should describe the action, not the image itself. Screen readers will
identify buttons or links, so the alt text does not need to include that
information. “Register for the convention” or “Submit your form” are
appropriate descriptions for an action-related image.
Images can contain text
Images of text should be avoided for accessibility
compliance, but there are times when an image, such as a logo, is appropriate
even though it contains text as well. The meaning of that text should be part
of the alt attribute text. For example, a school logo could be described in
this way: “Participate and Persist is our school motto and is incorporated into
our school logo.”
Images can convey complex information
Images of graphs and charts may contain complex information
that is not easily conveyed in an alt attribute. If the surrounding text
sufficiently describes the meaning of the image, the text can read “Chart of
rising temperatures as discussed below.” If the text does not provide this
information, then a long description should be provided elsewhere, such as in a
data table.
Image sprites can’t convey unique information
An image sprite is a collection of images put into a single
image file then positioned on the web page using CSS. This design approach can
reduce performance load and speed up page download time. Used judiciously,
sprites can aid accessibility compliance, but inappropriate choices can result
in compliance failure.
Sprites used purely for decorative purposes do not need an
alt attribute. However, if visual information is included in a sprite, the lack
of a unique alt text for that instance will result in lost meaning and
accessibility failure. For example, the image of a warning sign next to a text
block conveys the critical nature of that text. The meaning may be “Failure to
read this text will result in software malfunction.” If that meaning can’t be
conveyed through alt text, then it should be explicitly included as part of the
page text (even if it is hidden from sighted users through CSS).
Web Content Accessibility
Guidelines 2.0
For more background on the specific accessibility guidelines
being addressed by these tips, review this section:
1.1.1
Non-text Content: All non-text content that is presented to the user has a
text alternative that serves the equivalent purpose, except for the situations
listed below. (Level A)