Images are a vital part of making any website look presentable, however a really presentable image is of little use to a blind or visually impaired user if the image has not been made accessible. To make an image accessible a web developer needs to add some sort of description of the image, this can be done by using alt text and is considered to be the simplest way of making an image accessible.
Alt text gives a written description of the image that can be read by screen readers, the use of alt text is considered vital as well as the single most important thing that can be done to make any web page accessible to blind and visually impaired users.
If alt text is not included then the behaviour of the screen reader can become unpredictable. It is likely to either output the filepath or file name of the image, or ignore the image completely. Therefore all images on a web page require an alt text description, alt text is designed to provide a text description that conveys the same information that is communicated by the image. A web developer needs to be aware that an alt text should describe the meaning of the image not describe the image itself e.g. its appearance.
The alt text used must be meaningful alt texts such as “picture.jpg” are not meaningful and are of no use to a blind users who is using a screen reader as they cannot see the image alt texts such as “picture.jpg” are often considered less useful than no alt text although. It is very important that an alt text makes sense both in the context of the page and out of context e.g. when a blind user using a screen reader uses their screen reader to obtain the list of graphics on a web page. An alt text can be defined in HTML by using the alt attribute.
<IMG src="picture.gif" alt="The John Moores University Logo">
It is recommended that alt text be kept relatively short and contain only information that is necessary to describe the image. However alt texts need to be long enough to convey the meaning of the image. A single word alt text is often not enough to convey the meaning of an image; users using screen readers can also often miss short alt texts, because they miss the alt text being announced by the screen reader. However long alt texts can also cause problems to users using screen readers as they do not want to want to spend a large amount of time listening to the alt text for an image, particularly if there are a large number of images that all contain large alt texts on one web page. It is recommended that the alt text be between approximately 5 and 12 words or 150 characters. If the alt text for an image is a particularly long then it is recommended that the web developer use a long description (discussed below) as well as an alt text.
alt texts should only be added to images on a web page that convey “meaningful information”. Whether or not an image conveys meaningful information is often a matter of human judgement, however it is recommended that images such as spacer images and repeated graphics that do not convey meaningful information be given a blank alt text. Blank alt texts are completely ignored by screen readers. An HTML source code example of a blank alt text is given below.
<IMG src="picture.gif" alt="">
A web developers needs to make sure that they do not put a space in between the two speechmarks e.g. alt=” “as this alt text would not be blank because it contains a space.
The title attribute can be used to add extra information about an image in addition to the alt text. Using the title attribute can cause problems because certain browsers do not support the title attribute. However Opera, Netscape Navigator 6 or later and Internet Explorer 4 or later do all support the title attribute.
A long description is a web page that provides additional information about an image where the alt text and title do not provide enough information to describe the image, it can be included within the IMG element. The longdesc attribute has been available since HTML 4.0, which was released in 1999. longdesc was specifically designed to add more details to graphics for the blind and visually impaired. The longdesc attribute has a maximum limit of 1024 characters.
The difficulty with the longdesc attribute is that browsers and screen readers poorly support it. At present only Mozilla, Home Page Reader 3.0 and Netscape Navigator 6 fully support longdesc, while JAWS 4.01 or later is the only screen reader that supports longdesc. The main reason for this lack of support is considered to be because the longdesc attribute is not widely used on web pages at present.
Long descriptions can be added at the bottom of an image or include visible hyperlink to the long description. Jim Thatcher gives a good example of how Yahoo uses long descriptions. It is recommended that the longdesc attribute be used only if it is necessary. If it is not necessary then it is recommended that a description link (d-link) be used. An HTML source code example of a long description is given below.
<IMG src="jmulogo.gif" ... alt="John Moores University Logo" longdesc="jmulogo.htm">
Description links (d-links) were developed by the National Centre for Accessible Media (NCAM) in Boston, USA. The W3C advise that d-links be avoided they recommend you use longdesc, but d-links are still considered useful because of the lack of browser support for longdesc.
A d-link works in exactly the same way as the longdesc attribute it can even point to the same file. A d-link needs to be placed next to the image so the screen reader can convey to the user that a particular d-link is related to a particular image. This d-link is then shown as a letter D next to the image. All d-links need to be meaningfully named. A piece of software called A-Prompt can automatically create d-links. The automated testing page contains more information about A-Prompt.
The disadvantages of d-links are that they can sometimes effect the presentation of a page, if there are many d-links on a page e.g. a photo gallery, then it can be difficult to discover which d-link is related to which image. There may also be some users who do not know the meaning of the “d” next to an image, so therefore it can be confusing and as a result be ignored. An HTML source code example of a description link is given below.
< A href="jmulogo.htm">D<</A>
< img src="jmulogo.gif" alt=" John Moores University Logo">
All static images should have a meaningful alt text and a title and if necessary a long description or d-link giving additional information about the image. If an alt text is not there then it will read the image filename or filepath by default. Colours can often convey the meaning of an image e.g. angry red. Use of colour is also useful because blind users who were previously able to see will still remember what colours looked like. If the same image is used more than once on a page then it is recommended than an alt be provided for the first occurrence of an image. It is advised that a blank alt text be provided for all other occurrences of the image. This is also the case if two images on a page convey the same meaning.
Advertising can be made accessible using the alt and if necessary the longdesc attribute. When writing the alt text for an advertisement it is recommended that the word advertisement is included somewhere in the alt text, although including propaganda in an alt text is not recommended. Instead it is recommended that a slogan be used. The web developer needs to describe the product being advertised rather than the advertising banner itself. Similar to static images it is recommended that the alt text for an advertisement is kept short.
If the advertisement opens in a new window then the user needs to know that a new window has opened. If the advertisement has an alt text then the screen reader will automatically change its focus and start reading the advertisement. If the user is not informed that a new window has opened then a blind user who is using a screen reader may be completely unaware that a new window has opened.
It is recommend that a meaningful name is placed above a chart. The title attribute could then be used to give information about the percentages on each axis and what axis is meant to be representing. A software company called CORDA have produced a piece of software called Pop-Chart, which can be used to summarise numerical data. A long description or d-link could be used to provide a fuller description of the chart e.g. the data within the chart.
For Animated GIF’s it is recommended that an alt text be used to describe the most representative frame of the Animated GIF’s (this is usually the last one). The alt attribute can be used to describe the image and the longdesc attribute can be used to describe the image in greater detail. If the animated GIF’s is a decorative image then it is recommended that this be given a blank alt text. Whether or not an Animated GIF’s is a decorative image or not is considered to be a matter of human judgement.
There are two types of image maps that a developer could use they are client side image maps and server-side image maps. an image into separate parts where each part of the image will take the user to a different page within the site. If a client-side image map is used then it is considered quite easy to make accessible.
It is recommended that an alt text and a title be included in each AREA element (hot spot) on the image map. In some cases an alt text may also be used for the whole image. There maybe times when this may be better left blank, this is a matter of human judgement. If an alt text is not included on each hot spot of the image map then all the blind or visually impaired user using a screen reader will hear is “user map”, which is of very little use to a blind or visually impaired user. A source code example of how to code an accessible image map in HTML is given below.
<IMG src="king.gif" usemap="#KingMap" alt="Navigation Bar">
<MAP name="KingMap">
<AREA coords="1,1,137,40" shape="rect" href="..." alt="Home">
<AREA coords="138,1,234,40" shape="rect" href="..." alt="Site Map">
<AREA coords="135,1,347,40" shape="rect" href="..." alt="Web Accessibility Policy">
</MAP>
Server-side image maps are not considered to be accessible as a result an alternative needs to be provided. It is recommended that the use of server-side image maps be avoided unless it is absolutely necessary. However server-side image maps are not considered necessary as almost any shape needed for an image map can be created as a client-side image map, using the geometric shapes e.g. circle, square, polygon etc that a web developer has available.
If a server-side image map is used then it is recommended that a list of redundant hyperlinks be included down the side of the image, where each hyperlink represents a separate piece of the image map. It is recommended that each link is given a meaningful title, as it is considered more likely to appear in a browser than an alt text on an image map because the alt text on image maps is invisible in some graphical browsers and only appears if the image map does not appear.
Web developers sometimes use sliced images to speed up the download time of images on their site. If sliced are used then all a screen reader will see is a list of IMG elements in the HTML code. So in this case it is recommended that an alt text be included for the first slice of the image, and that all other slices be given a blank alt text.
If the sliced image is an image map then the method that is recommended is slightly different. If a sliced image is also an image map then it is recommended that alt texts be included for all the slices of the image that are “hot spots” on the image map. Meanwhile all other image slices should be given a blank alt text.
Graphical links can be made accessible in much the same way as static images. It is recommended that an alt text be used to describe the destination of the link. If a graphical link does not have an alt text then a screen reader will look for the next hyperlink in the HTML code and will read that to the user. It is not considered necessary to include the word link in the alt text as a screen reader or talking browser will inform the user if an image is a link.
The text within a picture cannot be read by screen readers or Braille displays. Pictures of text are often used to display special effects on pages. It is recommended that all pictures of text contain an alt text. It is also recommended that the alt text should contain the text that is shown in the picture of text. If there is a lot of text in the picture then a long description or d-link is also recommended.
Mathematical notation can be made accessible to blind and visually impaired users. A web developer could use Math ML, which is a derived alt language for mathematics. The difficulty wuth Math ML is that there are very few browsers that support it. Even if a browser does understand Math ML the screen reader may not as screen reader support for Math ML is also very poor at present. If mathematical notation is used as part of an image than an alt text could be used. If the mathematical formula is short then it is recommended that the formula be written in full. If not then the name of the formula could be used as the alt text.
It is recommended that every rollover graphic be given an alt text that describes it. If the same graphic appears more than once on a page then it is recommended that an alt text be used to describe the first occurrence of the graphic and then the alt text for the repeated images be left blank. The same rule applies if two different images that mean the same thing are used on a page.
In HTML a horizontal line is HR\. When the screen readers sees a HR\ in the HTML it knows that it is a horizontal line, a problem can occur if a graphic is used to represent a horizontal line. In this case it is recommended that a horizontal line be placed in the alt text e.g. alt = “-“. Therefore a user using a screen reader will know that it is a horizontal line as the horizontal line symbol in the alt text will be recognised by screen readers.
It is recommended that only one horizontal line be used in the alt text. If more than one horizontal line is used in the alt text then it could be come confusing for the blind or visually impaired user who is using the screen reader. There are a number of horizontal lines that could be used in the alt text and these can vary in length. It is considered that the longer the line is in the alt text the thicker the horizontal on the page should be.
It is recommended that Cascading Style sheets be used to control the presentation of vertical lines. If Cascading Style Sheets are not used then it is recommended that the alt text for the vertical line should be left blank. It is also recommended that the title and longdesc attribute should not be used on vertical lines.
There are many hit counters available that can be downloaded free of charge from the Internet. Many web developers download these and then put these hit counters onto there websites. However there are very few downloadable hit counters that are accessible to screen readers, because a lot of the hit counters that are available that can be download are java applets and it is often the case that an accessible alternative needs to be provided for a java applet as they are not accessible to screen readers. However there are some accessible hit counters available.
The OBJECT element available in HTML can be used to add alt text to Flash images. However if a web developer is developing a website that they want to be compatible with Netscape Navigator then a web developer would be unable to use the OBJECT element, because Netscape Navigator does not recognise it.
The iframe is an alternative to the OBJECT element. If an advertisement is included in the iframe then the web developer has the opportunity to alter the alt text. The difference is between the OBJECT element and the iframe is that the iframe also supports the longdesc and title attributes. So using the iframe allows a web developer to add additional information about an image. If the image cannot be shown then the alt text stored within the iframe element in shown, this is not the case with the OBJECT element.
If an advert opens in a new window then the web developer should always inform a blind or visually impaired user who is using a screen reader that a new window has opened. If the advertisement has an alt text the screen reader will automatically change its focus and read the advertisement. However if the user is not informed that a new window has opened then the user who is using a screen reader may be completely unaware that a new window has opened.
It is recommended that text should only be used as bullet points, while graphical bullet points are not recommended. If graphical bullet points are used then the web developer will need to include an alt text for each bullet point. If a web developer wishes to use bullet point then it is recommended that they define them using an unordered list in a Cascading Style Sheet.
Map images e.g. geographical maps are very difficult to make accessible, as a blind user using a screen reader is unable to see it. In the geographical map example, as the images only had one alt text available it could be impossible for them to label the individual country. The alt text would have to be could be “map of world”, but that would not really be making it accessible. However if the web developer where to turn the map into an image map they could use the accessibility techniques described in the image map section to make it accessible e.g. make each country on the map a “hot spot” and then provide the appropriate alt text. Therefore if a web developer wishes to use a map on a web page where possible it is recommended that they make this map an image map.
Unlike most images background images do not require an alt text as they are not part of the HTML standard.
Many web developers use spacer images to control the spacing out of a page. If a web developer wishes to use a spacer image on there page then it is recommended that the spacer image be given a blank alt text, so that it is ignored by screen readers. Spacer images should be given a blank alt text because they do not convey any meaningful [information and are mainly used purely for decorative purposes.
Thumbnails are used to depict a small version of an image, and provide a link to a larger version of the same image, they are quite often seen on photo gallery web pages. It is recommended that a web developer provide an alt text for each thumbnail, the alt text that describes the image. It may also be useful to tell the user that the links leads to a larger version of the image. Although the screen reader will inform the user of the existence of a link, the user will not know that its leads to a larger version of the image unless it says so in the alt text. So an alt text for a thumbnail of the John Moores university logo could be “John Moores University Logo click for larger version”.
If a web developer decides to include ASCII art on there web page then it is recommended that they provide a skip link, which allows a blind or visually impaired user using a screen reader to skip over the ASCII art. If a skip link is not provided then the screen reader will output every single character that makes up the ASCII art drawing. More information about skip links can be found on the navigation page under skip navigation.