ALTTagVideo.mp4
X
00:00
/
00:00
CC
In this video, I am going to explain how to provide the most accessible
graphics using ALT tags. Screen readers use ALT tags to describe
images and their functionality. The first thing to consider when creating
Alt tags is why the image is presented on the page. Is it
there to provide instructions or simply for decoration?
Take, for example, this picture of two different types of credit cards
accepted and its two possible ALT tags. The first ALT tag, which only
reads “Credit Card Logos," is not sufficient in describing the image.
More questions are created than answered. Since the image displays
vital information pertaining to the types of payment accepted, it
would be better to go with the second ALT tag, reading “Vidi-Visi
and Magic Card accepted.”
There are other types of images such as this example. This picture
of the dome of the U.S. Capitol can have different ALT tags depending
on the context in which the image is used. The simplest ALT tag for this
image would read “Capitol Building” or “the Dome of the U.S. Capitol
Building”. these tags would suffice in most news or political science
articles. However, if the image surfaced in an architecture context,
a longer, more descriptive ALT tag would be necessary to describe the
Neoclassical style archtecture.
Images can also be links, like this picture of George Washington. The
ALT attribute must describe the function of the link. A simple ALT tag
reading “George Washington”, would not suffice in this case.
A more accurate ALT tag reading, “Wikipedia entry for George
Washington”, would better suit this image link.
Any image that does not contribute any information, such as the
horizontal seperator shown here,is considered a decorative image.
Even though they do not contribute anything to the page, they still need
an ALT tag. The ALT tag for the images can simply be a blank
space. That way screen readers do not only read “IMAGE” or the
complicated filename from which it was taken. They simply skip over
the image.
Conciseness is highly recommended when it comes to ALT tags.
It is recommended to keep ALT tags 150 characters or less. Some
images, however, may need a longer description. If this is the case
you can include a link to a separate description of the image. Perhaps a
more effective way would be to include the bulk of the information
in the text. That way all users can benefit from it, not just those who
use screen readers. Also try to avoid using phrases like, “image
of…” or “graphic of…” as well as redundancy. ALT tags that are word
for word with the surrounding text are a waste of the user’s time.
Hope this video helps. Thanks for watching!