What is a "text equivalent"?
- Fundamental to web content accessibility is the concept of a "text equivalent"
- Both terms "text" and "equivalent" are important
"Text" is important because
- Text can be rendered by all user agents
- graphical browsers
- text browsers
- voice browsers and screenreaders
- braille readers
- handhelds
- Text is therefore the key to making content accessible
"Equivalent" is important because
- A text alternative is not enough
- The text alternative must be equivalent to the original content
- Text alternatives are only equivalent when they fulfill the same purpose or function as the original content
Which page elements require a "text equivalent"?
Checkpoint 1.1 (Web Content Accessibility Guidelines 1.0)
- All page content in the following formats require a text equivalent
- images, graphics, photos, animations ("img" element)
- image maps and map regions ("img" and "area" elements)
- programmatic objects: scripts, applets, Flash ( "script", "applet", "object" or "embed" elements)
- frames ("frame" elements)
- audio, video
Providing text equivalents
- Images ("img" element) - use the "alt" and, where
applicable, the "longdesc" attribute
<img src="welcome.gif" width="500" height="500" alt="Welcome to my web site"> - Image maps ("img" and "area" elements) - use the "alt"
attribute
<img src="matrix.gif" width="500" height="500" alt="Campuses and Faculties matrix">
<area alt="Malaysia campus" ...> - Programmatic objects - use "object" element and include text
alternative as part of the object content
<object classid="java:Press.class" width="500" height="500">
As temperature increases, the molecules in the balloon...
</object> - Applets - include the text equivalent as part of the applet content and
use "alt" for browsers that cannot handle the former
<applet code="Press.class" width="500" height="500"
alt="Java applet: how temperature affects pressure">
As temperature increases, the molecules in the balloon...
</applet> - Frames - use the "noframe" element to provide accessible content
or a link to an accessible page
<frame src="content.html"....>
<noframes>Go to <a href="table_of_contents.html">Table of Contents</a></noframes> - Audio, video - provide captions or a transcript for stand alone audio and video files
References
- HTML Techniques for Web Content Accessibility Guidelines 1.0
- Curriculum for Web Content Accessibility Guidelines 1.0
- How to create accessible graphics
- How to create accessible frames
- Captioning for the web
Examples of common errors
The images below are screenshots showing a range of errors relating to the provision of text equivalents.
Image 1: image "alt" attribute error
This image shows a promotion for the new Harry Potter book "Harry Potter and the Order of the Phoenix" that appears on Amazon.com's home page. The image also shows my browser Element Properties dialogue box. I right-clicked over the image to produce this. You can see that the image has a missing "alt" attribute, so anyone who could not see the image, would miss out on this promotion entirely. The code snippet relevant to this image is displayed below.
Code snippet from Amazon.com home page
Image 2: image map "area" element error
The screenshot below is also from the Amazon home page and shows an image map used as a navigation bar. Again, you can see my browser's Element Properties dialogue box showing that the image map area I right-clicked over has a missing "alt" attributes. The code snippet below the image shows this as well.
Code snippet from Amazon.com's home page
<area shape="rect" href=http://www.amazon.com/exec/obidos/shopping-basket/ref=top_nav_sb_gateway/102-2250618-4272948 coords="0,0,80,21">
<area shape="rect" href=/exec/obidos/wishlist/ref=cm_wl_topnav_gateway/102-2250618-4272948 coords="85,0,151,21">
<area shape="rect" href=/exec/obidos/account-access-login/ref=top_nav_ya_gateway/102-2250618-4272948 coords="155,0,256,21">
<area shape="rect" href=/exec/obidos/tg/browse/-/508510/ref=top_nav_hp_gateway/102-2250618-4272948 coords="260,0,299,21">
</map>
Image 3: java applet "alt" attribute error
The screenshot below shows the Charles Sturt University orientation page as analysed by The Wave. You can see that the scrolling news presentation is a java applet with no "alt" attribute. The code snippet below the image is taken from the site.
Code snippet from Charles Sturt University orientation page
<param name="MSGTEXT" value="http://www.csu.edu.au/orient/news.txt">
<param name="BGCOLOR" value="#714DB8">
<param name="FGCOLOR" value="#FFCC00">
<param name="HREFCOLOR" value="#FFFFFF">
<param name="LINKCOLOR" value="#003366">
<param name="FONTNAME" value="Dialog">
<param name="FONTSIZE" value="12">
<param name="SPEED" value="30">
<param name="PAUSE" value="1500">
<param name="HPAD" value="5">
<param name="VPAD" value="5">
<param name="codeBase" value="http://www.csu.edu.au/division/humres/java">
<param name="code" value="yavs.class">
<param name="width" value="204">
<param name="height" value="89">
<param name="DESIGNTIMESP" value="10548">
<param name="DESIGNTIMEURL" value="http://www.csu.edu.au/division/humres/java">
<param name="_ExtentX" value="3969">
<param name="_ExtentY" value="2646">
</applet>
Image 4: Flash "noembed" element error
The screenshot below shows the use of a Flash object that provides navigation and content for The Prince web site. I've right-clicked over the element and this has opened a context menu that shows the object is Flash. The code snippet below the image is taken from the page and shows the failure to include a "noembed" element for those unable to access the content of the Flash object.
Code snippet from The Prince home page
<param name=movie value="intro.swf">
<param name=quality value=high>
<embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="58">
</embed>
</object>
Image 6: "noframes" element error
The image below shows an inappropriate use of the "noframes" element, as used on the Australian Defence Force Academy web site. This element should be used to provide access to equivalent content, not to tell users that they are using a browser that does not provide support for frames. The code snippet below the image shows how this was generated.
Code snippet from the Australian Defence Force Academy web site
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
Images present the biggest problem
- Images are the most widely used non-text element - almost every web site has at least some
- Images are used for a variety of purposes - this seems to cause confusion
about the use of "alt" attributes
- convey content
- provide links to other pages
- decorative purposes - photos, visual enhancements
- layout purposes - single pixel image as a spacer
- set the tone for a page
- convey a non-verbal (e.g. marketing) message
- Often web designers or content authors fail to come to grips with why
images are used on a page and consequently write poor text alternatives
for them
Many authors haven't figured out exactly what they are trying to present; they don't know what it is about the image that's important to the page's intended audience. The reason you can't figure out why their alt [texts] aren't working is that they don't know why the images are there. Every graphic has a reason for being on that page: because it either enhances the theme/mood/atmosphere or it is critical to what the page is trying to explain. Knowing what the image is for… makes the labels easier to write (Source: Alan Flavell - Use of ALT texts in IMGS).
Images used to set tone or convey non-verbal messages
- Images used to convey tone or send a non-verbal message to users (e.g. an image showing young, happy people in a groovy bar might convey the message that his is a vibrant, happening place to hang out) are challenging
- There are two approaches you can take, though I think the first is best:
- write the text for the page in a way that conveys the tone that is communicated visually and leave "alt" attributes for these images blank
- use a "longdesc" attribute on the image to include the longer message. Note however, that i=users would have to access the link to the long description in order for this message to be conveyed
Eight types of problems with image "alt" attributes
- Image "alt" attributes that are not equivalent to the information conveyed by the image
- Image "alt" attributes that include unnecessary data
- Image "alt" attributes that are left blank
- Images without an "alt" attribute
- Background images that convey content - no "alt" can be provided
- Decorative/layout images with "alt" attributes that included unnecessary data
- Decorative/layout images without an "alt" attribute
- Images with text alternatives that are too long
1-5 relate to images that represent page content. 6-7 concern decorative or layout images. 8 could apply to either content or decorative images.
Examples of each of the eight problems
Problem 1: "Alt" attribute does not provide equivalent information
- Many text alternatives provide image meta data
- data about the image rather than the information the image was intended to convey
- Other text alternatives are simply not given sufficient attention
- the function of the image when presented to the user is not considered
- only the requirement to provide a text alternative appears to have been considered
- Some text alternative are included automatically by software and need
to be checked by page developers
- some examples of these are image filenames, or just the word "image".
Example 1
The image below appears at the top of several pages on the Australian Catholic University web site. This one has been given a text alternative of "ACU locations". The text alternative is meta data rather than a description of the function of the image. A better text alternative might be "Australian Catholic University has campuses in Brisbane, Sydney, Canberra, Ballarat and Melbourne"
Example 2
The image below is from the my.monash portal for Monash University staff and students. It has been given a text alternative of "my.monash". The image provides more than just the site ID (which is provided elsewhere). It includes
- a welcome message indicating that the portal has been given a new look
- a link to a tour of the portal for those who want to see what's changed
- the tagline or slogan for the portal - "my life, my study, my future, my monash"
Example 3
The image below is from the Murdoch University home page. It shows information about Orientation Week for students, including the date. The text alternative is simply "Orientation".
Problem 2: "Alt" attribute includes unnecessary data
- Some page developers include unnecessary data in text alternatives
- Adding "Link to..." or "Click here to go to..." in front of the important text can prevent users of screenreaders from utilising alphabetical lists of links for any page
- Adding other unnecessary text forces users to listen to trivial information
- Some unnecessary text alternatives are provided where content images are implemented as multiple slices, and each is given the same text alternative. Again, this forces users to listen to information they need not
Example 1
The image below is a text version of the Charles Sturt University home page. You can see that many of the image links have the unnecessary prefixes "-> Link to...", "-> Link - ... " or ">". A blind user wanting to quickly find the link "Prospective Students" would not do so when opening up link list provided by their screenreader and typing "P" to go to the list of links beginning with that letter.
Example 2
The image below shows a graphic navigation bar from the Victoria University home page where each option includes unnecessary text. Each link has the format "Graphic name link", e.g. "Graphic Contact us link"
Example 3
The image below is the University of Newcastle logo. On the University's home page, the logo image is in two slices. The first has the text alternative "Logo of the University of Newcastle, Australia" and the second has the unnecessary text alternative "logo".
Problem 3: "Alt" attribute is left blank
- When page developers use tools that include a blank "alt" attribute by default, it is important to check that these are not left blank where important content is represented by the image
Example 1
The image below is from the Notre Dame University home page. The key navigational elements are images with blank "alt" attributes.
Example 2
The image below is from the University of Technology, Sydney homepage. The image "quicklinks" is a link to a list of commonly used pages on the site. However, the image has a blank "alt" attribute so would not be visible to users of screen or braille readers and text browsers.
Problem 4: "Alt" attribute is missing
- Where no "alt" attributes are provided, it suggests that page developers are using a technically poor markup tool and are not aware of the requirements for accessibility
- Markup standards also require the use of "alt" attributes - where they are missing, it suggests the use of a poor authoring tool and/or a poorly trained web developer
- User agents attempt to compensate for missing "alt" attributes by include the image filename or by giving auditory signal to users of voice browsers or screenreaders--just in case the missing content is important. However, although the user may realise that there is content missing, they are still unable to access it.
Example 1
The image below is the home page of the National
Institute of Dramatic Arts. None of the images have "alt" attributes.
Blind users, or those using text browsers, would not receive any alternative
content for the site title, logo, the image in the centre of the page, or
any of the images on the right ("Stage Struck", "NIDA News",
NIDA Play Season 2002").
Example 2
The image below is shows how a text browser renders the Avondale College home page. None of the images have "alt" attributes, so the user agent compensates by including the text "inline" or "link". The latter is used where an image also acts as a link anchor. "Embed" indicates a Flash element without a text alternative. It would be impossible for a blind user to use this page.
Problem 5: A background image that conveys content
- It is not possible to give a background image an "alt" attribute
- Avoid using background images that convey content
- If a background image does convey content, the content should be repeated in an accessible format elsewhere on the page
Example 1
The example below shows the prospective students page at the University of Canberra. You will notice the map of Australia in the background. The map shows the location of Canberra on the east coast of Australia, relative to Sydney and Brisbane. This information is not repeated anywhere on the page.
Problem 6: Decorative image has "alt" attribute that provides unnecessary data
- Many web developers try to do the right thing and include text alternatives for all images--this is not always the correct approach
- Some images should have blank "alt" attributes as the function of the image when displayed to users is for purely visual purposes, and the function of the text alternative is for those users who are not utilising content in a visual context
- Sometimes images are used as bullet points for a list of items, or as a horizontal rule between content sections. These images should also have blank "alt" attributes, as structural markup (using "li" elements for list items, and "h1"-"h6" elements for indicating content sections) is the best way to signal the document structure to unsighted users
Example 1
The images below are screenshots from the Monash University Faculty of Arts home page. The first shows the graphical view, and the second, a text view. As you can see, each of the decorative and layout images has a text alternative. An invisible image used to create space between elements has the text alternative "spacer". The folder icon beside the heading "For Students" has the text alternative "students icon". The book icon beside the heading "Resources" has the text alternative "resources icon". Each bullet point has the text alternative "bullet". The two photos have text alternatives "teach_img" and "student_img".
Example 2
The images below are from the Macquarie University prospective students page. The image at left shows the graphical view of a section of the page, while the image at right shows the text view. As you can see, the images that form the curved corners of the blue background have been given text alternatives, "curve".
Example 3
The image below shows the University of Western Australia home page. A decorative image at the top right of the screen has the unnecessary text alternative "Image showing Winthrop Hall in relief".
Problem 7: Decorative image has missing "alt" attribute
- As mentioned above, the use of "alt" attributes is not optional, even for images that convey no content
- Decorative images should be given blank or null "alt" attributes so that user agents do not warn them of images without "alt" attributes
- You can find this error on many web sites
Example 1
The image below shows a snippet of the University of Wollongong home page as seen in a text browser. Two spacer images have no "alt" attribute and the browser compensates by including the word "inline".
Problem 8: Text alternative is too long
- There is no hard and fast rule about the length of text alternatives
- Some people suggest a maximum of 50 characters, others say up to 15 words
- Bobby warns about the use of text alternatives over 150 characters
Advice on the use of "alt" attributes for images
Consider the purpose of the image
- Start by considering the function or purpose of the image when displayed
to the user
- write a text alternative that provides the equivalent function or purpose
- if the image is purely decorative, give it a blank "alt" attribute
- if an important image is sliced, give only one slice a text alternative, and use blank "alt" attributes for the rest
- do not use a text alternative that simply repeats text near the image - use a blank "alt" attribute
- for images that require a long text alternative, use the "longdesc" attribute
- if an image or set of images help set the tone for the page or convey a non-verbal message, but not any content, leave the "alt" attribute blank, and make sure the text on your page conveys the equivalent tone
Check your text alternatives
- Always check your text alternatives for accuracy and usefulness
- first use TheWave which will show you the image alongside its text equivalent
- then check with a text browser, or text browser emulator, such as Lynx Viewer to ensure the content will read out sensibly