Writing Effective ALT Text For Images
Writing Effective ALT Text For Images
Anyone
who knows anything about web accessibility knows that images need
alternative, or ALT, text assigned to them. This is because screen
readers can't understand images, but rather read aloud the alternative
text assigned to them. In Internet Explorer we can see this ALT text,
simply by mousing over the image and looking at the yellow tooltip that
appears. Other browsers (correctly) don't do this. The HTML for
inserting ALT text is: But surely there can't be a skill to writing ALT text for
images? You just pop a description in there and you're good to go,
right? Well, kind of. Sure, it's not rocket science, but there are a
few guidelines you need to follow... Spacer images and missing ALT text
Spacer
images should always be assigned null ALT text, or alt="" . This way
most screen readers will completely ignore the image and won't even
announce its presence. Spacer images are invisible images that pretty
most websites use. The purpose of them is, as the name suggests, to
create space on the page. Sometimes it's not possible to create the
visual display you need, so you can stick an image in (specifying its
height and width) and volià, you have the extra space you need. Not everyone uses this null ALT text for spacer images. Some
websites stick in alt="spacer image". Imagine how annoying this can be
for a screen reader user, especially when you have ten of them in a
row. A screen reader would say, �Image, spacer image� ten times in a
row (screen readers usually say the word, �Image�, before reading out
its ALT text) - now that isn't helpful! Other web developers simply leave out the ALT attribute for
spacer images (and perhaps other images). In this case, most screen
readers will read out the filename, which could be
�newsite/images/onepixelspacer.gif'. A screen reader would announce
this image as �Image, newsite slash images slash one pixel spacer dot
gif�. Imagine what this would sound like if there were ten of these in
a row! Bullets and icons
Bullets and icons should be
treated in much the same way as spacer images, so should be assigned
null alternative text, or alt="". Think about a list of items with a
fancy bullet proceeding each item. If the ALT text, �Bullet' is
assigned to each image then, �Image, bullet� will be read aloud by
screen readers before each list item, making it take that bit longer to
work through the list. Icons, usually used to complement links, should also be
assigned alt="". Many websites, which place the icon next to the link
text, use the link text as the ALT text of the icon. Screen readers
would first announce this ALT text, and then the link text, so would
then say the link twice, which obviously isn't necessary. (Ideally, bullets and icons should be called up as
background images through the CSS document - this would remove them
from the HTML document completely and therefore remove the need for any
ALT description.) Decorative images
Decorative images too should
be assigned null alternative text, or alt="". If an image is pure eye
candy then there's no need for a screen reader user to even know it's
there and being informed of its presence simply adds to the noise
pollution. Conversely, you could argue that the images on your site
create a brand identity and by hiding them from screen reader users
you're denying this group of users the same experience. Accessibility
experts tend to favour the former argument, but there certainly is a
valid case for the latter too. Navigation & text embedded within images
Navigation
menus that require fancy text have no choice but to embed the text
within an image. In this situation, the ALT text shouldn't be used to
expand on the image. Under no circumstances should the ALT text say,
�Read all about our fantastic services, designed to help you in
everything you do'. If the menu item says, �Services' then the ALT text
should also say �Services'. ALT text should always describe the content
of the image and should repeat the text word-for-word. If you want to
expand on the navigation, such as in this example, you can use the
title attribute. The same applies for any other text embedded within an
image. The ALT text should simply repeat, word-for-word, the text
contained within that image. (Unless the font being used is especially unique it's often
unnecessary to embed text within images - advanced navigation and
background effects can now be achieved with CSS.) Company logo
Websites tend to vary in how they
apply ALT text to logos. Some say, �Company name', others �Company name
logo', and other describe the function of the image (usually a link
back to the homepage), �Back to home'. Remember, ALT text should always
describe the content of the image so the first example, alt="Company
name", is probably the best. If the logo is a link back to the homepage
then this can be effectively communicated through the title tag. Conclusion
Writing effective ALT text isn't
too difficult. If it's a decorative image then null alternative text,
or alt="" should usually be used - never, ever omit the ALT attribute.
If the image contains text then the ALT text should simply repeat this
text, word-for-word. Remember, ALT text should describe the content of
the image and nothing more. Do also be sure also to keep ALT text as short and succinct
as possible. Listening to a web page with a screen reader takes a lot
longer than traditional methods, so don't make the surfing experience
painful for screen reader users with bloated and unnecessary ALT text.
|
