What is Alternative Text?
- According to WebAIM, alternative text for images is the first principal of web accessibility.
- Section 508 1194.22 (a) - A text equivalent for every non-text element shall be provided using 'alt', 'long descr, in element content.
- WCAG 2.0 Guideline 1.1.1 (level A) - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, with some exceptions such as decorative text, etc.
- Determining appropriate alternative text for images will often be a matter of personal interpretation.
- Alt text should be 140 characters or less.
When Should I Use Alternative Text?
- Alternative text is used for images, media, applets, and other non-text web content.
- Any time an image is used to provide content or function to a web page, it should have equivalent alternative text.
- Our primary focus will be on alternative text for images.
Alternative Text Functions:
- Read by screen readers, allowing the content and function of the image to be accessible to users with visual or cognitive disabilities.
- Displayed in place of the image in browsers, if image file doesn't load.
- Proves a semantic meaning and description to images which can be read by search engines.
How Do We Present Alternative Text?
- Within the 'alt' attribute of the 'img' element.
- within the context or surroundings of the image.
- Every image must have an 'alt' attribute.
- Images may be given an empty or null alt attribute.
Examples of When to Use Alternative Text:
There are lots of examples of how to provide provide the best alternative text option(s) for images. Below are some great examples to help you determine the best alternantive text for your web images.