Skip to main content

Add alternative text to pictures and links

Provide necessary information for blind users

Pictures and images should have text equivalent descriptions and links should be adequately described so the target is clearly identified.

Reason

When a screen-reader user is navigating a page there will be images and pictures that they cannot see so some alternative description is required for the user to make sense of the page, also there will be links which require further description so the user can understand what the links do.

Implementation

Pictures and images can be described using the alt attribute, this will be read out by a screen reader so that the user has a brief description of the picture.

Many images and pictures are just eye-candy, that is they make the page visually attractive but do not add any extra information to the page. The most obvious eye-candy is decoration and borders that clearly have no semantic meaning. Many other images do not add any information that is not in the text of the page for example photos of products in a catalogue.

Do not include any description of the image that would not be obvious to a person viewing the image (for example if the picture is of two men the alt text should not say 'photo of John on the right and Jim on the left' if that is important it should be in the text available to all users).

Any picture or image that is eye-candy should have a null alt attribute at which point the screen reader will skip over it.

Images or pictures that really do add information need to have an alt description but it should not be more than 50 characters. If it requires a longer description it should be included in a longdesc.