Images

All images must have an alternative description (often referred to as "alt text") which serves the equivalent purpose of the image. The description should omit words like "image" or "photo" unless they are required for an understanding of the image's contents. The user's accessible technology will indicate to the user that it is reading the description of an image on the page, so the description does not need to do so.

Do

Use the alt attribute to describe the image

The alternative description must be placed in the image's alt attribute:

If an image only serves a decorative purpose on the page, the value of the alt attribute may be blank, but the alt attribute must still be included:

Use the Image with Caption component

To add an image to your page's WYSIWYG content, use the Image with Caption component, even if you are not providing a caption. When a caption is used, this will place the image in a <figure> element and place the caption in a <figcaption> element. Refer to the heading "Do not duplicate the alt text in the caption" for more guidance on captions.

Do Not

Do not use the title attribute

The title attribute adds a tooltip to the image which appears when the cursor hovers over the image. Most users will never have access to the title, as it is not supported in mobile browsers or by most assistive technology. No desktop browser provides a practical method to display the title attribute via the keyboard.

Do not duplicate the alt text in the caption

When using a caption, do not duplicate the alt text in the caption. The alternative description and caption may seem like they serve similar purposes, but not only do they not, but a screen reader would likely read the caption right after the alt text, making the duplication annoying to the user. A common use of a caption may be to list a group of people by name from one side of the image to the other (e.g. "From left: Dr. Seuss, Dr. Who, Dr. No, and Dr. Zhivago"), which isn't describing the contents of the image, but instead helping the sited visitor associate the names in the list with the faces in the image.

Adaptable

When referencing an image from a page's text, avoid using words which require the layout of the text and image to stay the same. The page layout may change based on the device used to access the page (or the size of the window used), or the user may not be able to easily determine whether an image is displayed on the right/left or above/below the current text. Further, changes to the website's layout or the page's content may change these types of relationships.

Do not rely solely on sensory characteristics such as shape, size, visual location, orientation, sound, color, etc. when providing instructions.

Distinguishable

Do not present images of text to the user. Text should be presented as text within the page's content and CSS should be used to apply the desired styles (font, size, color, etc.). This allows the user's accessible technology to modify the presentation according to their needs.

When text is presented in front of an image or background color, the text needs to have a sufficient contrast ratio when compared to the background (whether that is a solid color or part of an image).

For SDSU's color palette:

avoid using red text on a black, charcoal, or light gray background (or black/charcoal/light gray text on a red background)
avoid using the bright red, bright teal, or dark teal colors with text, but if you must:
- avoid using dark teal or bright red with black
- avoid using bright teal with white

(Note: the color referred to as dark teal in the color palette is referred to in the CSS Color Module Level 3 as teal, in case you want to save yourself 3 characters in your CSS rules.)

Accessibility

Images Accessibility

Do