Screen reader with a non breaking space in alt attrib

Question

I am using a CMS for images which is by default not generating alt attributes in image tags unless the alt text is provided.

I can provide an empty space " " into the alt tag to produce :

<img src="../.." alt=" "/>

Would this be a problem with screen readers, and web accessibility ?

Answer 1

If you are not using an alt text, you can go without the alt attribute. It won't validate, but it won't change a thing, it will work exactly the same. You are just pleasing the validator.

Using a space shouldn't bring any problems.

Answer 2

There are three ways that HTML authors can write ALT text on their images:

1. With no ALT attribute given
2. With an ALT attribute that doesn't contain any readable characters
3. With an ALT attribute that can be read

These are handled in different ways.

In the case of an image that lacks an ALT attribute, like this:

<img src="fruit.png" width="100" height="100" />

... the default screen reader behavior is read the SRC attribute aloud. So, assuming that this image was hosted in the images folder on example.com, the screen reader would say: Graphic: h ttp://www.example.com/images/fruit.png. Omitting the ALT attribute is bad practice, because blind visitors wind up having to wade through tons of irrelevant gibberish.

In the case of an image that has an ALT attribute which does not contain any readable information, like either of these two:

<img src="fruit.png" width="100" height="100" alt="" />
<img src="fruit.png" width="100" height="100" alt=" " />

... the default behavior is to silently pass over that image. The screen reader cannot pronounce a space or an empty string; and so it says nothing. This is the correct way to suppress the announcement of purely decorative images. Note, however, that the most recent WebAIM screen reader usage survey found that most blind users want to know an image is there even if it doesn't convey much to them. So be judicious in suppressing images with empty alt text; use it only when there really is zero information conveyed by the image.

Lastly, of course, is regular alt text:

<img src="fruit.png" width="100" height="100" alt="Photo of apples." />

In this case the screen reader will say "Graphic: Photo of apples." Putting a period in makes the screen reader pause at the end of the ALT text.

Picking good ALT text is important, and can be hard. In general, if your image contains a picture of text, then you should reproduce that text (or a suitable abbreviation of it) in your ALT text. If it is illustrative or photographic, your ALT text should be a concise description of the photo's contents. If it's a complex image like a diagram, well, you may need to use the ALT text to direct the user to a more complete description elsewhere in the page. (The LONGDESC attribute was designed for this purpose, but isn't widely supported by screen readers.)

If your image is also a link, it's absolutely vital to have sensible ALT text; otherwise your blind visitors won't have any idea what the link does.

I recommend getting a screen reader (such as NVDA, which is open source) and testing with it. It can be -- excuse the bad pun -- an eye-opener.

Answer 3

only problem is the customer wants the site to state that it is XHTML compliant - so we need the pages to validate :(