What is alternative text?
Slot gameAlternative text provides a textual alternative to non-text content in web pages, such as photographs, logos and other images.
Alternative text serves several functions:
- It's read by screen readers in place of images so the content and function of the image are accessible to people with visual or certain cognitive disabilities.
- It's displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
- It provides a semantic meaning and description for images that can be read by search engines or be used to later determine the content of the image from page context alone.
Do not use alternative text to describe decorative elements or visual elements that are not not important to the page content. You don't need to provide alternative text to describe a visual pattern, colour or visual style of a site element (such as a navigation element). For these elements leave the ‘alt attribute’ of the image blank.
Slot gameAll of these functions are important so you must provide alternative text wherever practical.
Alternative text can be presented in two ways:
- within the alt attribute of the img element (in code) – this will be picked up by screen readers but invisible to the majority of page visitors
- within the context or surroundings of the image itself – this may be in the form of an image caption, for example
Using an image caption instead of using an ‘alt attribute’ may be more appropriate in some contexts. For example, a photo within an article.
When using a caption it’s important not to duplicate the alternative text so the ‘alt attribute’ should be left blank in this case.
Slot gameIn many cases using a caption won't be possible, so an ‘alt attribute’ must be used.
Examples of proper use
Example 1: Photos
Reviewed 05 October 2020