Images on a website, document, or other electronic media can be helpful by adding visual information or enhancing the aesthetics with decorative impact. However, for users that are not able to see images adequately, we need to use "alternative text" that can convey this information, especially when it is important to the context of the content.
What is Alternative Text?
Alternative text, which is often referred to as "alt text" is a text alternative to non-text elements that is presented to the user so the conveyed information serves the equivalent purpose, with some exceptions such as decorative text. Web Communication primarily focuses on alternative text for images.
Alt 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.
Alt text should be concise and communicate the information conveyed in the image. Typically, the alt text should be 140 characters or less.
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
When Should I Use Alternative Text?
Any time an image is used to convey content information or functionality to a web page, it should have equivalent alternative text. Determining appropriate alternative text for images will often be a matter of personal interpretation.
- Images that convey simple information such as a logo or a photograph, the alt text should be a short description of the content of the image.
- Images that are purely decorative and not informative do not require a descriptive alt text.
- Best practices ask that in the field requested for alt text, place a "" which indicates to a screen readers to omit the image.
- Images that uses text within the image, are first recommended to use text and not image to convey the information.
- If this cannot be accommodated, put the text conveyed in the image, in the alt text description.
- If an image is depicting too much information that would not be appropriate or succinct for alt text, than that would be considered a complex image.
Complex Images
If you are considering placing images of charts, diagrams, infographics, or heavy use of graphically conveyed text on your website, we ask for a detailed description of the information shown by the image. This description will be provided elsewhere (e.g., on the same page or on a separate page).
We ask that when requesting a use of a complex image, that there is:
- A text version in a Word document of all of the information conveyed in the graphic
- A high-quality file of your graphic and the document with the text version via ServiceNow ticket
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 alternative text for your web images.