How do I use the 'ALT' attribute correctly?

All images within a web page should have an 'alt' attribute. The most important purpose of the 'alt' attribute is to provide a text alternative for people who are unable to see the images on the web page.

Crownpeak DQM provides a number of checkpoints to help you get your 'alt' attributes right: 

• 'alt' text should not be longer than 100 characters
• Image 'alt' attribute should not be empty, except for on known 'decorative' images
• ​Do not provide text alternatives for decorative images
• Image 'alt' text should contain more than one word 
• ​Graphical form buttons should have 'alt' text
• If an image is the only content in a link it must have 'alt' text

Alt text should not be longer than 100 characters

Alternative text should not be longer than 100 characters; screen readers such as JAWS will break up longer text into blocks of characters and reads them each separately as if they belonged to separate images, which can be potentially confusing to users. If a longer description is needed then the long description (longdesc) attribute should be used.

 

Image 'alt' attribute should not be empty, except for on known 'decorative' images

The "alt" attribute is designed to provide a short text description that can be used in place of the image. It should only be left empty if the image does not convey any meaning, e.g. is purely decorative. An “alt” attribute should still be provided for decorative images but simply left empty, which allows a screen reader to ignore these type of images. If an error is being reported on what you believe to be a decorative image, then please contact the Crownpeak Support Team and they will be happy to help you and configure the checkpoint. By default the checkpoint recognizes common decorative images such as "spacer.gif".

 

Do not provide text alternatives for decorative images

This is the opposite check to the previous checkpoint: ‘Image "alt" attribute should not be empty, except for on known 'decorative' images’ Images which are only there for decorative or layout control purposes should not have text alternatives. An "alt" attribute should be specified but it should be left empty or 'null'. This checkpoint will detect commonly named decorative images such as 'spacer.gif', and "alt" text containing only words such as 'blank','bullet','line','image','spacer'. If there are further decorative images you would like the checkpoint to recognise then please contact the Crownpeak Support Team and they will be happy to help you and configure the checkpoint.

 

Image 'alt' text should contain more than one word

The "alt" text should supply a meaningful text alternative to an image. A single word may not provide an adequate description of the image. In some cases you may believe that having a single word for the “alt” text is sufficient, in which case please contact the Crownpeak Support Team who will configure the checkpoint to reflect this.

 

Graphical form buttons should have 'alt' text

The "alt" text should always be included for graphical form buttons in order to describe the action that the button will trigger. In some cases an image could be used to trigger a search on the page, the “alt” text should provide a description of the effect on the page from activating the image.

 

If an image is the only content in a link it must have 'alt' text

If an image is the only content in a link then it must have "alt" text, in order to provide information about the link destination to users who can't see the image. When a screen reader comes across a link, it has to read something to the user to give context to the content of the page. If an image links to a new destination and has no alternative text the screen reader is unable to give context to the link. If this is the case then the screen reader would read the file name or even the URL of the page being linked to. This provides little value to the user and could cause confusion.

Providing alt attribute for all images is required for WCAG Success Criterion 1.1.1 Provide text alternatives for any non-text content - Non-text Content