ALT-TEXT AND TEXT ANCHORS


Problem:

Screen readers will often read the alt-text of image anchors and/or text anchors as one link if there is no punctuation between them.

For example: a menu bar at the bottom of a page made up of one image anchor and two text anchors. The alt-text of the image and the first text anchor are read as one.

<A HREF="http://trace.wisc.edu/pathname/link1.html"> <IMG SRC="http://trace.wisc.edu/pathname/image.gif" "link1" ALT = "link1"></A> <A HREF ="http://trace.wisc.edu/pathname/link2.html">"link2"</A> <A HREF ="http://trace.wisc.edu/text/guidelns/htmlgide/htmlgide.pcs/path/link3.lhtml">"link3"</A>

Experimental solution:

a space and a vertical bar on either side of the text anchors resolve the problem. This will also separate the links for visual users. Some authors use two vertical bars instead of just one.

Note: adding JUST a space or JUST a vertical bar is not enough to solve the problem ALL of the time. In some instances one or the other might work, but together the screen reader software we are using has consistently paused between links. Other punctuation may work, but we tested with vertical bars because we felt it not only increased the accessibility by a screen reader but it separated the text visually as well.

Example:

<A HREF="http://trace.wisc.edu/pathname/link1.html"> <IMG SRC="http://trace.wisc.edu/pathname/image.gif" "link1" ALT = "link1"></A> | <A HREF ="http://trace.wisc.edu/pathname/link2.html">"link2"</A> | <A HREF ="http://trace.wisc.edu/text/guidelns/htmlgide/htmlgide.pcs/path/link3.lhtml">"link3"</A> <P> <B>Note</B> that there is a space before and after each vertical bar.



Problem:

alt-text is sometimes centered vertically next to the image icon and thus read on a different line.

Example:

| <A HREF ="http://trace.wisc.edu/pathname/link1.html">"link1"</A> | <A HREF="http://trace.wisc.edu/pathname/link2.html"> <IMG SRC="http://trace.wisc.edu/pathname/image.gif" "link2" ALT = "link2"></A> | <A HREF ="http://trace.wisc.edu/text/guidelns/htmlgide/htmlgide.pcs/path/link3.lhtml">"link3"</A> <P>
Would most likely be read:

link2, link1, link3

Experimental solution:

A possible strategy is to take the image out of the sentence and put it before or after the paragraph or sentence. Authors can turn images off and see the placement of the alt-text, but the words may wrap differently on different browsers depending on the width and text size that users have chosen.


Problem:

Sometimes when alt-text is included in a sentence it is hard to tell where the alt-text ends and the text of the paragraph that it is included in begins.

Experimental solutions:

Place a character before and after the alt-text string. For example an x. This will be read by all screen readers, but may make things MORE confusing. For example, if this were the alt-text of an image map, "x see links below x" the "x" could be confused with an entity. i.e. icon x, x distance of miles to go, etc. This also adds two syllables to each alt-text entry.

Another alternative is a slash (/). This way a person using a screen reader could turn the correct level of punctutaiton on so that a slash will be read or turn it off if they do not wish to hear the begin and end of the alt-text. With some screen readers, no punctuation means NO punctuation and in order to hear the slash some punctuation needs to be turned on. However, this also means that point (.), comma (,), @, %, ^, &, \, # etc. will be read which can greatly increase the amount of time and energy it takes to read a page. Including pumctuation sometimes confuses the context of a sentence. For instance, "With some screen readers point no punctuation mean no punctuation point"



Problem:

If height and width are specified for an image, the alt-text might wrap. If there are several images in a row all whose alt-text have wrapped a person with a screen reader might not be able to read this at all since a screen reader will read across the page. For instance if the alt-text were, "TRACE logo" "TRACE documents", "TRACE calendar." And depending on how the images were sized, a screen reader could read this as:

TRACE TRACE TRACE

logo documents calendar.

This also may make the alt-text unreadable for sighted people.


Current solution:

At this time, a text-only version seems to be the only solution, unless the author can find a way around using the height and width attributes of images or use them in such a way that the text will not wrap. This is almost impossible to test however because people will have selected different fonts and sizes to be displayed by their browser.

To Appendix B (Table of Contents)
To Previous Section - D-tags
To Next Section - Edit Boxes and Forms

Please send comments and suggestions to: web-team@trace.wisc.edu