Accessibility

Accessible image requirements

When it comes to accessibility, the Web Content Accessibility Guidelines (WCAG) 2.1 provide several guidelines related to images:

Our default image styles have already been designed to meet accessibility requirements however keep these considerations in mind if you're modifying the Design System or creating a custom component.

Fundamentals

The following are recommendations from the Australian Government style manual:

• include images on a page only if they meet a real user need
• understand the purpose of the image to write alt text
• use real text rather than images of text whenever technically possible. (Logos can be an exception.)
• make sure that colour isn't the only visual means of conveying information in graphs and diagrams. Text labels and patterns can supplement the use of colour. Make sure the contrast is sufficient for all users.

WCAG guideline

1.1.1 Non-text Content (Level A)

All images should have alternative text that serves the equivalent purpose or presents the same information as the image itself.

1.4.5 Images of Text

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for certain situations.

1.4.3 Contrast (Minimum)

Images that convey information must have a contrast ratio of at least 4.5:1, especially if it includes text.

1.4.11 Non-Text Contrast

The visual presentation of user interface components, graphical objects, and states have a contrast ratio of at least 3:1 against adjacent colours.

2.4.4 Link Purpose (In Context)

If an image is used as a link, the alternative text for the image must describe the purpose of the link.

By following these guidelines, you ensure that your website is accessible to all users, including those with visual impairments or other disabilities.