Component Library

An informative image does not include an alternative text attribute.

• A complex image (such as an infographic) uses the <alt> attribute to present excessive information.
• A background overlay image lacks alt text, but is accessible via assistive technology, making the interaction difficult for someone who cannot see the content.

All informative non-text content (images) must provide text alternatives that provide equivalent information, context, and purpose to the user. Each image element (<a>, <img>) must either contain text or an image with alt text <alt="image description">.

• Use the alt attribute for brief descriptions under 150 characters.

NOTE: Sometimes it would be inappropriate to just describe what is in an image. The alt text might need to describe the purpose and author's intent in context, which is not the same thing as a general description of what is in the image.

If a <title> tooltip is used, it should not describe the image, but expand on the functionality or purpose of an image.

https://accessibility.oregonstate.edu/alttext#:~:text=In%20this%20case%2C%20the%20alt,add%20anything%20to%20the%20meaning