How to make non-text elements accessible

Making non-text elements, particularly images, accessible is fundamental to accessible web design; even if you attended to this issue alone, you would make a big impact on the accessibility of your site.

All non-text elements must have labels (i.e. add the alt attribute); the alt attribute is a requirement for both HTML 4 and XHTML W3C standards based documents.

Text labels should serve the same purpose as the visual or auditory content it describes or replaces.

When all non-text elements are labelled by using alt attributes this ensures that:

• The text labels can be read out by screen readers
• People browsing with images off will still be able read the text
• Search engines can index the text – helping the page to be found by potential visitors.

Text equivalents are needed for the following:

• sound
• video
• images
• graphical representations of text
• image maps
• animations
• ascii art
• frames
• scripts
• images used as list bullets
• spacer images
• graphical buttons
• charts

In these notes I will concentrate on how to add labels to images. However, the same principles described here will apply to other non-text elements.

Using the ‘alt’ attribute

The alt attribute is used to add a text label to non-text content.

The following example is from the photography gallery at the Glasgow West End website

<img src=”http://www.glasgowwestend.co.uk/imageuploads/uniave203bwsmall.jpg” alt=”Photo: University Avenue.” height=”206″ width=”319″ >

In the example above I have given a very short description of the photograph, using alt=”Photo: University Avenue.”. You will notice I have also included the additional text ‘Photo:’ – In the discussion part of this document I will explain my reasoning behind adding this additional text.

Should the text label describe the image, or describe the function of the image?

When trying to decide on the appropriate text to use: think, ‘what is this image for?”

• Is it just a photograph as part of an image gallery?
• Is it a photograph of a person?
• Is it a submit button for a form?
• Is it a navigation bar?
• Is it a graph?
• Is it a decorative image, spacer gif, or horizontal rule?

Labels for image gallery photographs, and photographs of people

For a photograph as part of an image gallery, a short description of the photo, like the example above, is appropriate.

Similarly with a photo of a person I would use the alt attribute to provide the persons name:

<img src=”http://www.glasgowwestend.co.uk/images/jimbyrne.jpg” height=”116″ width=”76″ alt=”Photo: Jim Byrne”>

There are other HTML attributes, namely the title and longdesc attributes, you can use to add further information – we will have a look at these shortly.

How to decide what to write in your descriptions?

In the case of a photograph or a decorative image – if I said, “what does the picture/image look like” and you had to sum it up in a only a few words, your reply to me is what you write as your alt attribute. Alt attributes should be short and to-the-point. More verbose descriptions can be provided by the use of the title and longdesc attributes, if necessary.

An image as a button

If the image is a button or link – then the label should describe the function or destination of the button or link. Usually the alt text is what you would have written if the link had just been text. For example: if you have a button and text written on it says, ‘About MCU’ , then your alt attribute value will be ‘About MCU’.

An example from the BBC website; the button they use on their search form is an image:

<input type=”image” src=”http://www.bbc.co.uk/home/images/search/sa.gif” alt=”Search” width=”69″ height=”31″ border=”0″ />

Both the image and the alt text say the same thing: ‘Search’.

In this example the alt attribute text describes the function of the image – it is not a description of what the image looks like.

Navigation bars

When images are used as links, as they are on many navigation bars, the alt attribute should describe the destination of the link – in this case the function is to tell you about the contents of the page linked to. Here is another example from the BBC website:

<img src=”http://news.bbc.co.uk/nol/shared/img/nav/v3_weather_loz.gif” width=”117″ height=”15″ border=”0″ vspace=”2″ alt=”Weather” />

In the above example the text in the alt atribute simply describes the page you are linking to, in this case the weather page.

How long should alt text be?

There are no technical limits to the length of alt attributes – but keep them short. Joe Clark in ‘Building Accessible Websites’ suggests limiting alt text to 1,024 characters – which seems a bit too long to me.

Use your own judgement when deciding how long your alt text should be, however, consider the following possible problems.

Problems with long alt attribute text.

Alt text if too long can be unreadable if the text is wider than the width of the image it describes. If you browse the web with images off you will come across many examples. Here is an example from part of the ‘Apple Computers’ home page:

As you can see, none of the above descriptions are readable, because the text in each case stretches beyond the width of the original image size.

Using the title, and longdesc attributes

Both the title, and longdesc attributes can be used to provide additional information for a non-text element.

the title attribute

The W3C explains the function of the title attribute:

“This attribute offers advisory information about the element for which it is set”

Not terribly clear, but the general idea is simple enough; use the title to provide some additional information over and above that used in the alt attribute. In the following example I have added the title attribute to the image tag used to display the photograph of University Avenue,

<img src=”http://www.glasgowwestend.co.uk/imageuploads/uniave203bwsmall.jpg” alt=”Photo: University Avenue.” height=”206″ width=”319″ title=”A photograph of University Avenue in the West End of Glasgow, taken on a bright winter morning” >

On many web browsers, when titles are used, a pop up speech bubble, or strip of text, appears on the screen when the pointer hovers over the picture (i.e. ‘tool tips’).

Adding longer descriptions – use the longdesc attribute

Unfortunately the longdesc attribute is not supported by current browsers, but it is still considered good practice to add it when appropriate to accommodate future browser revisions.

Use of the longdesc provides the opportunity to give a longer description or explanation than can be provide by either the alt or title attribute. The longdesc points to a full html page containing the description, e.g.

<img src=”http://www.glasgowwestend.co.uk/imageuploads/uniave203bwsmall.jpg” alt=”Photo: University Avenue.” longdesc=”uniavenue.html”>

The file, ‘uniavenue.html’ is a standard HTML page containing the text describing the look or the function of the image. The longdesc attribute would be appropriate for describing information contained within a graph or similar complex image.

Examples by type of image

Animations

Describe the most representative or final frame of the animation.

arrows and bullets

Use HTML entities, or left or right arrows or -> <-

Bullets use alt=”*” or use entitites: alt =”*” or alt=”&ast'”.

If you would like to use images as bullets in a list specify them in a style sheet:


ul [list-style: url(urlofimage)]


If you feel you really need to create a bulleted list without style sheets use star the character or the appropriate entities in the alt attribute.
<IMG SRC=”bullet.gif” ALT=”* “>

Company and Organisation Logos

The alt attribute should contain the name of the organisation or the company – do not describe the logo. There is no need to add the word ‘logo’ onto the organisation name. If the logo is also a link to the home page of the site, you can add the word ‘ – home to the end of the organisation name.

When a clickable button is followed by a text link, and clicking both leads to the same page, leave the alt tag empty for the button. Otherwise screen readers will read the same text twice.

Spacer images or decorative images with no ‘content’

Many web designers make use of what is called the ‘single pixel gif trick’, i.e. they use single pixel gifs resized appropriately to help create page layouts.

Always ensure that you add alt attributes to spacer or purely decorative images. Use the space character in the alt attribute, or leave the alt attribute empty:
<IMG src=”spacer.gif” hspace=100 vspace=10 alt=” “>

This will ensure that screen readers ignore these images.

Other non-text elements

Frames

When using the FRAME element, the title attribute, and/or the longdesc attribute, should always be added:
<FRAME src=”body.htm” longdesc=”maindesc.htm” title=”Main content.”>

Add the alt attribute to audio files:
<A HREF=”hello.wav”> <IMG SRC=”helloaudio.gif” ALT=”Sound file: Hello. “> The sound of hello.

Adding labels to images is a not always a simple matter

The value of an alt attribute for a non-text element is, for a certain group of users, one of the most contentious issues in the area of accessible Web design.

After publishing article on how to create accessible HTML tables (called ‘Table Manners’) I got an e-mail from Jouni Heikniemi pointing out what he saw as a problem with my use of the alt attribute for the photographs on the page. To summarise – he suggested I should use empty alt attributes for my pictures, (i.e. no labels) because the content of the pictures did not add to his understanding of the page.

The argument he put forward was that for people using screen readers, the introduction of a text description of the photographs just ‘got in the way’ and the content of the label could lead to confusion.

My take on it is that many of the disagreements spring from the following beliefs,

• Alt attributes are all about making pages accessible to blind or visually impaired users.
  or
• Alt attributes are for the benefit of everyone, including those who surf with images off, but like to retain the choice to click to download the images they are interested in – and need the alt attribute to help them make that decision.

The problem is that implementation of alt attributes will be different for each of these groups. Let’s take the example of the picture on some of the MCU pages. If you have looked at any pages on the site you will see that I have used photographs at the top of some of the pages. Sometimes these photographs will add to the understanding and meaning of the page, and sometimes they are merely decorative, or acting as section breaks.

For those images that do not directly add to the meaning of the page, the consensus seems to be that the first group above, i.e. those who believe that alt tags are purely for the benefit of blind users, will best be served by making the image invisible, by putting a space character, or no content, in the alt attribute. Doing it this way means that phrases like, ‘picture of a flower’ will not suddenly be read out (out of context) by a screen reader such as Jaws. This approach does, of course, take away the choice to know about all the images available on the page.

The above problem does not occur for those surfing with images off, because the text label occupies its own physical space on the page, and will generally be ignored by a user reading the main text. For visual readers, there is no chance of the image, or its text label, getting ‘in the way’ of the ‘real’ text. The visual user gets the benefit of knowing what the image is, even if it is only decorative.

The ideal situation may be one where information about decorative images is always given, and users can choose to make the text descriptions invisible or visible. For people using screen readers, the ability to turn the labels of decorative images off, while still having access to the labels of navigation bars or form buttons would be a good solution.

This implies that we need to be able to provide more ‘meta’ information about the images that appear on Web pages. How else would the client know what is a decorative and what is not a decorative image?

As a solution to the possible problems created by my use of alt attributes on the ‘Table Manners’ article I have added the ‘meta’ text ‘Decorative image:’ followed by a description of the image.

The photos, although mostly decorative are used on occasion to add a comment, or provide a humourous or analogous connections with the text. These are not intended to be obvious and are not essential for understanding of the text. An example would be the stop sign’ that is the first image on the ‘Table Manners’ article, in long hand I could be saying – “Stop! you shouldn’t be using tables for layout”, or I might not. The reader may, or may not, make a connection. By providing some text descriptions of the photo this ‘function’ is still retained.

Making this into a general rule, I now add a short descriptive label to all of my image labels. If I am adding a alt attribute to the image tag of a photograph I add ‘photo:’, if it is a decorative with useful content I put ‘image:’. However, I make decisions whether to add a text label at all, on a ‘case by case’ basis, depending on the context. On my image gallery in the Glasgow West End website I aways add image descriptions, in an article about a technical topic, such as one about making web text accessible, for decorative photos I leave the alt attribute empty if the content of the photo or image does not add to the understanding of the page.

Resources

• I found Joe Clark’s book Building Accessible Websites very useful in relation to the subject of text labels.
• W3C guidelines Provide equivalent alternatives to auditory and visual content.

[ register for updates ]

This article is from the training course Accessible website design in practice created by ScotConnect. © 2002, 2003, 2004 ScotConnect.

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course.