Creating Accessible LibGuides

Images include icons, pictures, non-text screen captures, logotypes, and graphics on a webpage.

Images can be important to convey information, to provide context, and to break up large text blocks. They can also be an alternative to text.

Level A

• Provide alt-text for images using HTML or an image description, unless the image is decorative or a logo. See the criteria for full list of exceptions (Success Criterion 1.1.1)

Level AA

• The contrast between images of text and the background should be minimum 4.5:1. For large text the contrast should be minimum 3:1 (Success Requirement 1.4.3)
• Only use images of text if the user can alter the image (e.g. increase size or change colour) or if the image of text is essential. Note: images of text do not include graphs, screenshots, and diagrams which visually convey important information (Success Criterion 1.4.5)

Level AAA

• Images of text should be only be used for pure decorative or when absolutely essential to the information (Success Criterion 1.4.9)

Non-text Content

All non-text content has a text alternative that serves the same purpose, except for:

• Input Controls - If non-text content has a description within its name, then alt text is not necessary. For example, a box in a form where a last name will be entered, and “Last Name” is next to the box.
• Time-Based Media - When non-text content such as video or audio is used (media that relays information over a period of time), alternative descriptions can be provided for identification. (for Level A)
• Test - If the non-text content is in a test and directly naming it in the alt text would give away the answer, provide a useful description. For example, people are asked to identify a picture of Chris Hadfield and his name is the answer. The alt text can be “A famous Canadian astronaut”.
• Sensory - Non-text content that presents information to make people feel a certain way upon viewing/listening, a descriptive text can be used instead of a transcript.
• CAPTCHA - Captcha is strongly discouraged by the accessibility community. However, if it is necessary, consider more than two captcha options or a sign-in that allows registered users to avoid having to use it.
• Decoration - Non-text content can be ignored by assistive technology if it is just decoration and can be marked so with ARIA.

Images that do not convey content, are decorative, or contain content that is already conveyed in text are given empty alternative text (alt="") or implemented as CSS backgrounds. All linked images have descriptive alternative text.

WCAG 2.2 example:

The link to an audio clip says, "Chairman's speech to the assembly." A link to a text transcript is provided immediately after the link to the audio clip.

Contrast (Minimum) (Level AA)

Text and images of text must meet the contrast ratio of 4.5:1, except for:

• Large Font text must be 3:1;
• Incidental text or images do not have a required contrast;
• Logotypes - Logo/brand text has no required contrast.

Images of Text (Level AA)

If it is possible to use text, then text is always preferred over images of text. However, images of text can be used if the image is:

• Customizable – The image of the text can be changed by the user as needed;
• Essential – The particular images of text are absolutely necessary for the information.

*Note - Logotypes are considered essential.

** - This does not include text that is part of a picture that contains significant other visual content. Examples of such pictures include graphs, screenshots, and diagrams which visually convey important information through more than just text.

Images of Text (No Exception) (Level AAA)

Images of text are only used decoratively or when the image is absolutely necessary to the information presented.

*Note - Logotypes are essential.

** - This does not include text that is part of a picture that contains significant other visual content. Examples of such pictures include graphs, screenshots, and diagrams which visually convey important information through more than just text.

"Copyright © 2020 W3C® (MIT, ERCIM, Keio, Beihang). This software or document includes material copied from or derived from Web Content Accessibility Guidelines (WCAG) 2.2."