Rebuilding The Web

Articles, advocacy, discussion and debate about the many problems of the Web and the challenges of rebuilding it.

How should Web browsers render alternate text?

Recently, Steve Faulkner performed a detailed comparison of how the leading Web browsers render alternate text that revealed non-uniform behaviour across browsers. Steve called for the HTML5 team to document a recommended behaviour. This article adds to Steve's work and makes a case for what I believe to be the correct way to render alternate text.

What is alternate text?

The <img> element contains content that can be represented visually and textually. The src attribute provides visual content and the alt attribute provides textual content. For example:

  1. <img src="visual content" alt="textual content" />

The content in the src and alt attributes must convey equivalent meaning. In other words, alternate text is an equivalent substitute for visual content and visual content is equivalent substitute for alternate text.

Should alternate text be displayed when images are not rendered?

Silly question, right? Not so silly considering that a good deal of the time, Chrome and Safari do not render alternate text for images. The first example of this, described by Roger Johansson, is when the browser fails to download the image and its alternate text does not fit into the space the image would have occupied, or the space of the alternate text plus the space for an error icon. So if you start with the following markup:

  1. <html>
  2. <head>
  3. <title>Test of rendering alt text</title>
  4. </head>
  5. <body>
  6. <p>Press <img src="rss.png" alt="the RSS button" /> to get recent articles.</p>
  7. </body>
  8. </html>

When the image cannot be downloaded, Safari will render the preceding markup as follows:

Screen shot of Safari displaying a sentence that starts with the word 'Press', followed by a rectangle box with a question mark icon inside, followed by the words 'to get recent articles'.

The second example is when users turn off image rendering. To turn off image rendering in Chrome for Windows, pass the -disable-images command line argument to chrome.exe like this:

  1. C:\Users\Alexander\AppData\Local\Google\Chrome\Application\chrome.exe -disable-images

To turn off image rendering in Safari, enable the Develop menu under the Advanced settings. Then select Disable Images from the Develop menu.

When the image can be downloaded but the user turns off image rendering, the previous markup example will be rendered as follows:

Screen shot of Safari displaying a sentence that reads 'Press to get recent articles.'

Of course the correct behaviour is to render alternate text, and Firefox renders the previous markup example best of all as shown in the following screen shot:

Screen shot of Firefox displaying a sentence that reads 'Press the RSS button to get recent articles.'

Should alternate text be displayed inside the image outline?

In the following markup, width and height attributes are specified:

  1. <html>
  2. <head>
  3. <title>Test of rendering alt text</title>
  4. </head>
  5. <body>
  6. <h1><img src="welcome.png" width="100" height="100" alt="Welcome to my Web site!" /></h1>
  7. </body>
  8. </html>

When the image cannot be downloaded, Web browsers will render the preceding markup as follows:

A composite screen shot showing IE, Firefox, Chrome, Safari and Opera displaying a square frame outline. Inside the frame outline, IE displays text in small font, Firefox displays text in large font that is cut-off, Chrome and Safari display an icon, and Opera displays text in large font that is cut-off.

The width and height attributes are meant to apply to visual content of the <img> element, not to the textual alternate content. It is therefore incorrect behaviour to apply width and height to textual alternate content. As a result of such behaviour, all browsers will cut-off content or will not display content if content does not fit into the outline frame of the image. Simply rendering the textual content in place of the visual content would be the preferred solution as shown in the screen shot below:

Screen shot of a Web browser displaying the following sentence in large font: 'Welcome to my Web site!'

Should an icon be displayed to indicate the content is from an image?

When a user turns off image rendering and the image can be downloaded by the browser, Internet Explorer displays an information icon next to the alternate text to indicate that the content displayed is from an image, as seen in the screen shot below:

Screen shot of IE displaying a sentence that starts with the word 'Press', followed by a rectangle box with a picture icon and words 'the RSS button' inside, followed by the words 'to get recent articles'.

This information icon interrupts the flow of content. When the information icon is combined with a frame around the alternate text and rendered in a different font, it makes it difficult to read the content of the document.

Should alternate text be displayed differently when image rendering is turned off, versus failure to download images?

When the browser fails to download an image, IE will display a red cross next to the alternate text to indicate an error, as seen in the screen shot below:

Screen shot of IE displaying a sentence that starts with the word 'Press', followed by a rectangle box with an error icon and words 'the RSS button' inside, followed by the words 'to get recent articles'.

Firefox will also render an error icon if the width and height attributes are present as shown in the following screen shot:

Screen shot of Firefox displaying a sentence that starts with the word 'Press', followed by a rectangle box with an error icon and words 'the RSS button' inside, followed by the words 'to get recent articles'.

Should error information be displayed in the document itself? If it were important to notify the user of a failed image download, wouldn't it be more appropriate to bring this to the user's attention using the status bar or the information bar?

Conclusion

If there is agreement that textual alternate content for an image is an equivalent replacement for the visual content of an image, then the textual alternate content alone should replace visual content when it is not rendered.

Public comments

1. Posted by Web Axe
on Wednesday 2010-02-03 at 10:31:30 PST

Great article, thank you! In my opinion:

Should alternative text be displayed when images are not rendered?
YES, for obvious reasons, the content must be provided in one form or another. Bad job Chrome and Safari.

Should an icon be displayed to indicate the content is from an image?
YES, the user should be given this information.

Should alternative text be displayed differently when image rendering is turned off, versus failure to download images?
YES, the user should be given this information.

2. Posted by Chris
on Wednesday 2010-02-03 at 12:42:19 PST

Bravo to you, Steve Faulkner and Roger Johansson for doing this work! I feel FF has the correct implementation of displaying alt text (except when widht and height is specified).

3. Posted by Shawn
on Thursday 2010-02-04 at 17:24:46 PST

I would have liked to see something in here about SEO.

4. Posted by Mohan Arun L (@marun2 on Twitter)
on Friday 2010-02-05 at 05:58:21 PST

Commenter Chris, FF has the wrong implementation in my opinion. I posted about this in Bugzilla @ Mozilla last year (opened a bug report), that Firefox is not rendering the ALT text as a tooltip when you mouse over an image, and they said it is as per design, and that the web page author should use the TITLE attribute of the IMG tag for FF to display any intended tooltips for the image (if the image renders successfully). If the image is non-existent (404), then FF displays the ALT text only with no indication that the image was 'missing'. They said this is as per the HTML working group recommendations. I didnt concur, since my stand is that, lets say the web page author hasnt specified TITLE attribute for the IMG, but has specified the ALT tag, then for the sake of describing the image, FF should still display the ALT contents as tooltip even when the browser is able to render the image correctly. This is because as a user/browser of the page in question, I would still like to see how the web page author has described the image, and I dont know how to compile my own Firefox, so I ended up installing the FF plugin "Popup ALT attribute" which shows me the ALT text as tooltip in case of images successfully rendered.

5. Posted by James
on Friday 2010-02-05 at 08:30:39 PST

I disagree with Mohan completely. ALT should only be rendered as an alternative! If the image is loaded completely then the text in the ALT tag should never be displayed.

If the designer wants their image to have a tooltip to describe the image to their users, then they should use the TITLE tag. And the ALT tag should be left as an alternate to a failed image load.

6. Posted by Jared Smith
on Thursday 2010-03-04 at 12:07:31 PST

Ditto to Web Axe.

And ditto to James - ALT is an alternative to the image, not supplementary text. It should only be rendered if the image is unavailable or if the user chooses. The title attribute (not tag) can be used to provide this advisory information if the author chooses.

I hope that HTML5 addresses proper rendering of alternative text because this is clearly an issue - and one that is affecting accessibility of many users.

7. Posted by Everett Zufelt
on Thursday 2010-03-04 at 12:41:33 PST

Should the text in the alt attribute be considered to be an alternate to the image (i.e. no image = render alt text), or an alternate to the information conveyed by the image (i.e. user cannot perceive / understand the image = render alt text). If considered an alternate for users who cannot perceive / understand the image then should browsers not provide an easy and intuitive method for users to access the alt text whether the image loads or not? Related to this, when browsers display a tooltip / popup with either alt or title text, these renderings of the text should persist for enough time for users to consume the content, and the font size of the text within the popup should be adjustable.

I would argue that browsers should provide options for how and when to render alt and title text for images, and that this should not require the image to not be displayed, and should not require the use of a pointing device.

8. Posted by Florent V.
on Friday 2010-03-05 at 05:12:20 PST

Much like Chris, I agree that Firefox has the correct behaviour, except when the image has specified dimensions (and would like to see that point corrected in Firefox).

But let's not forget why SOME of these behaviors exist.
- Opera renders a border and image icon because one of their top features back in the days was a prominent UI control to turn images on or off. This was — and still is — useful for people not using a broadband internet connection. Similarly, it would display "Image" when no alt text is given, probably so that people who disabled images may be able to enable them for a given page where there are images they want to see.
- Many website layouts out there still rely on tables, with column widths partly determined by images put in table cells. This is probably why Firefox is still displaying an empty image box (or that image box with alt text in it) when dimensions are specified.

Maybe those reasons are not as strong today as they were in the past and could be dismissed.

Regarding a tooltip for alt text: I strongly disagree with Mohan. Alt text is a functional equivalent to the image, and that's it. Additional information should be given with the title attribute, or (better yet) in the textual context of the image.

Finally, did somebody raise this issue with the WHATWG?

Comments are closed for this article.

Main menu