Alternate Text for Images
Published: | No Comments
Reading Time: 7 minutes
So what is appropriate alternate text?
Alternate text should convey the meaning, contents and function of an image – but it’s not always that easy. Sometimes actually describing the contents of an image is not the most useful approach. A picture of an arrow on a page may actually be a trigger to some functionality – so
alt="Picture of arrow" is perhaps not the best option. On some sites images may be there purely to provide decoration or even just to make a bit of space. Does a blind person need to know that?
Clearly some thought needs to go into the allocation of the alternate text. Here are our suggested guides for various different types of images.
This image is our own Coolfields Consulting logo. It’s origin was a lucky photograph of a child’s toy in a darkened room.
But is that what’s important? More important is that it represents our company. So the alternate text should be ‘Coolfields Consulting logo’. But see the next section if the logo links back to a home page.
Images that are links
On some sites images are used as links to other pages. These might appear in a navigation list, or a logo perhaps which links to the site’s home page (like our logo at the top of this page).
For these images the obvious candidate for the alternate text is the link destination. If required, you can tell users it’s a logo too. For example:
<a href="/"><img src="logo.gif" alt="Coolfields Consulting Logo - link to Home Page" /></a>
Where the link also contains text that describes the destination the alternate text for the image becomes superfluous and should be blanked out. Eg:
<a href="/">Home Page<img src="/images/img0067.gif" alt="" /></a>
Note: The alt attribute should not be removed completely as screen readers will typically then read out the image name and path – not useful.
Images in Forms
It is possible to have images included in forms as a submit button. Advances in CSS styling of regular submit buttons is making this technique less common now, but it is still used on a number of sites.
The alternate text for these images should describe the function that will be triggered by the image – maybe ‘Submit’, ‘Next’ or ‘Search’. Example:
<input type="image" src="next.gif" alt="Next" />
Images that contain text
Where images contain text (for example in logos) the alternate text should match the text contained within the image itself. If the image is a link though then the destination is the most important thing to put in the alternate text.
Having text in images can cause other problems with accessibility as the text in these images cannot always be resized for users with poor eyesight. It’s of course a lot harder to change the test if required.
Decorative and spacer images
Pictures like this of a smiling woman using a laptop are some of the commonest images to turn up on commercial websites. I guess the site owners are hoping to convey that using their site is a pleasurable experience.
If images like this are present purely for decoration then the alternate text should be blank – ie
alt="". Alternatively if the image is present to illustrate uncomfortable positions for using your laptop then the alternate text should reflect that – ie
alt="Using a laptop on the floor can be uncomfortable".
Many years ago there was a view that bullet list images should be given an alternate text of ‘*’ or even ‘bullet’. Fortunately this practice is seldom used now and screen reader users will thank you for not doing it.
Correct use of lists in your pages solve the problem anyway since any image displayed as a bullet will typically be a background image which screen readers will ignore. Screen reader users know they are being read a list which is much more useful.
If you really can’t use an HTML list the any image used as a bullet point should have blank alternate text – ie
Image maps are images that contain active areas – each one containing a link to another page or some functionality. An example would be a map of the solar system containing links to the different planets.
Providing alternate text here is a two stage process. Firstly the image itself needs appropriate alternate text. Example:
<img src="system.gif" alt="Solar system" usemap="#solarsystem" />
Then, each of the active areas needs its own alternate text. This can be provided by using the
alt attribute in the
map area of the HTML. Example:
<map name="solarsystem"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" /> <area shape="circle" coords="90,58,3" href="mercury.htm" alt="Mercury" /> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" /> ... </map>
Images as Backgrounds
Where background images are displayed on pages using CSS properties it is not possible to give the images alternate text and these images are ignored by screen readers and other assistive technology.
For this reason images that contain text or convey meaning should not be used as background images.
Graphs and charts
Graphs and charts are difficult items to write alternate text for as they can show multiple data values and trends. It is unrealistic to write extended alternate text – 10 to 15 words is a sensible maximum. Where a description of a graph or chart is important an alternate page should be provided with a link to it. This alternate page can describe the data presented or alternatively could present the data in table format with an explanation below.
Theoretically a different HTML attribute (
longdesc) is provided for this purpose. This is supposed to work by providing a link from the image to an alternate accessible presentation of the data.
<img src="widget-chart.gif" longdesc="chart-description.html">
longdesc attribute is seldom used properly and indeed it is not supported by all major browsers. For this reason it is best to also provide a plain text alongside the image. Example:
<img src="widget-chart.gif" longdesc="chart-description.html"> <a href="chart-description.html">Description for pie chart.</a>
Tooltips and the
There is sometimes confusion between the
alt attribute and the
title attribute. In this article we have been discussing just the
alt attribute which is specifically provided for accessibility reasons. It is an attribute that is only for images or parts of an image. The
title attribute can also hold text descriptions of elements and typically this text description will appear as a ‘tool tip’ to sighted users when a mouse pointer hovers over the element. However, the
title attribute is not a replacement for the
alt attribute and it should be used with care.
A future blog post will cover the best practices to follow when using the
It is important to think carefully about appropriate alternate text for the images on web pages. Without sensible alternate text users who rely on screen readers and other assistive technology will be misled and may not be able to use the website.
General rules – alternate text should:
- Describe content of image and what it represents but only if it is relevant.
- Describe destination of link, or functionality triggered by image.
- Be blank for images that do not convey meaning or trigger something.
- Be concise – if more than 10 to 15 words needed then provide link to another explanatory page.
Got a view on this? Please leave a comment.
Recent posts in the Accessibility category:
- Building Accessible WordPress Themes – Featured Images Apr 28th, 2019
- How to Build an Accessible WordPress Theme Apr 28th, 2019
- Accessibility Checklist Apr 7th, 2019
- Street Accessibility for the Blind in Vienna (Video) Jul 28th, 2016
- Instagram Accessibility Reduced by New Design May 18th, 2016
There are no comments yet - would you like to leave one?
Like to leave a comment?
Please note: All comments are moderated before they will appear on this site.
Previous post: Order of Page Components
Next post: Web Accessibility – Types of Disability