The XHTML WYSIWYG Editor For Desktop & Web Applications

A better way to author alternate text

The real function of alternate text

The function of alternate text is to make content that contains images understandable when images cannot be seen, either by users with limited vision, by search engines, or when users turn off image rendering in their browser. Instead of being a description of an image, alternate text is a textual substitute for an image, that must coherently fit into content surrounding the image. Let's take the following screen shot as an illustration:

A web browser displaying the word 'I', followed by a small icon of a red heart, followed by the text 'you!'.

In this example, a description such as "small icon of a red heart", used as alternate text for the heart image, would not aid comprehension in situations where the image is not seen. When displayed by a browser with image rendering turned off, the result would be:

A web browser displaying text: 'I small icon of a red heart you!'

In the screen shot above, when you actually see the alternate text in place of the image, it becomes obvious that the alternate text is not appropriate, and that appropriate alternate text should be "love", to form the sentence "I love you!"

Is poor alternate text due to poor user interfaces?

How are content authors supposed to write alternate text that fits into surrounding content when their interface is a pop-up dialog box such as the following one, which does not display any of the content surrounding the image?

Screen shot of a pop-up containing a single line text field labeled 'Alternate text'.

The result is that most authors will write either a terse description of the image, some nonsensical text, or write nothing at all. None of which will work. It's not the authors' fault of course. Authors simply cannot write appropriate alternate text if they cannot see where it is ultimately going to be used.

The solution: write alternate text in the document

The solution is to write alternate text right in the document, so that content authors see where alternate text will ultimately be used. This is what XStandard does with a new feature called "Images As Text" (seen in the following screen shots).

Images As Text lets authors compose and edit alternate text directly in the document, in the context of surrounding content. Authors can toggle between a view of the document that displays images, and a view that shows alternate text in place of images. This makes it immediately evident what the function of alternate text is, and makes composing and editing correct alternate text very easy.

Authoring alternate text using Images As Text

The following screen shots show a foolproof method of writing alternate text using Images As Text. The author highlights text in the document, then selects "Replace text with image" from the context menu or presses the Image button on the toolbar.

Screen shot of XStandard containing the text: 'After making changes, save the document by pressing the Save button on the toolbar.' The words 'the Save button' are highlighted. 'Replace text with image' is selected in the context menu.

The image selected by the author replaces the highlighted text, and the highlighted text now becomes the alternate text for the image:

Screen shot of XStandard 'View source' mode showing markup for an image with the text 'the Save button' in the alt attribute.

When the document is read as text only (by search engines, assistive technologies, browsers with image rendering turned off, etc.), the author can be confident that the alternate text will read perfectly within the surrounding content.

Editing alternate text is just as easy

Images As Text allows alternate text to be edited right in the document. In the following screen shot, the author selects "Show images as text" from the context menu or presses the Show images as text button on the toolbar, in order to reveal current alternate text for the image. The alternate text appears in the document between image markers and can be edited directly in the document, just like surrounding content.

Illustration showing two editors. One displays an image. The other displays alternate text in place of the image.

Exposing alternate text to find/replace and spell checking

When authors perform editing operations such as find/replace or spell checking, XStandard automatically switches to Images As Text mode. As seen in the following screen shot, this has the effect of including alternate text in find/replace and spell checking operations and catching errors in alternate text that would otherwise go unnoticed.

Screen shot of the spell checker dialog box checking a misspelled word in alternate text.

Benefits of Images As Text

  • The Images As Text feature significantly reduces the skill required to author appropriate alternate text. Composing and editing alternate text directly in the document, rather than in a pop-up dialog box, is easy and produces better results. It makes it clear what alternate text will work and what won't.
  • Some authors struggle to understand what alternate text is. This method of authoring alternate text "in-context" makes it immediately evident to authors what the function of alternate text is: to replace images with text that reads coherently within the content surrounding images.
  • Content authors now experience and appreciate alternate text as a living part of the document, not as remote, abstracted background information that is only vaguely related to an image.
  • Alternate text now fits perfectly into the flow of the document, ensuring the document makes sense when read as text only, or with images.
  • Alternate text is for the first time exposed to processing by popular editing features such as find/replace and spell checking, which improves still further the quality of alternate text.

Conclusion

Alternate text stands in place of images when images cannot be seen. Alternate text must therefore fit coherently into surrounding text, or content will become difficult to understand when images cannot be seen. Writing alternate text in pop-up dialog boxes makes it impossible for most content authors to write appropriate alternate text, because authors cannot see how the alternate text will be used. XStandard's Images As Text feature resolves these problems and makes writing appropriate alternate text easy. It lets content authors compose and edit alternate text directly in the document, shows them exactly how the alternate text may ultimately be used, and so makes it evident what alternate text will work and what won't.