How to Create Accessible Graphics
  | page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 | 
The general rule for the content of
an alt attribute is: the alt attribute should
provide a brief description of the function of the image. It is
important to note here that that alt attribute should describe
the function of the image which is not necessarily the same as a description
of the appearance of the image. Images can be used in three ways:
as an element that contains content, as a visual enhancement that provides
no content and as a link or navigation mechanism. The type of alternative
text you should add depends on which of these categories the image falls
under. Let's look at examples for each category.
Images that contain content
If the image or graphic contains information that is relevant to
the content of the site, then the alt
attribute should also provide that content. In our first example,
the image showed the University of the Antarctic logo.
The logo is used on the page to show the user that they are accessing
content from the University of the Antarctic. So this is an
example of an image used to display content. As a review, the
alt tag for the image would be:
alt="University of the Antarctic
logo".
Alternative text for images should be as succinct as possible.
A good rule of thumb is to keep the alt
attribute less then 15 words long. The reason for this is that
users accessing the content with a screen reader or refreshable brailler
will get the alt tag whether they want it or not. So if you
add a very long description of the an image that the user has no interest
in, they will still be forced to listen to the entire alt tag before
proceeding on. If you need a longer description of the image,
you should use the "longdesc" attribute
or a "D" link to provide the content. We will discuss solutions for long descriptions later.
| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |
Top
of Page || Return
to Tutorials List
|
