SIA-R2Images have an accessible name

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

Description

This rule checks that images have an accessible name.

Applicability

This rule applies to every element in the HTML namespace with a semantic role of img where the element is included in the accessibility tree.

Expectations

  1. The element has an accessible name that is not empty.

Assumptions

This rule makes no assumptions.

Accessibility support

This rule has the following accessibility support concern:

Examples

Passed

This image has an accessible name that is not empty and therefore passes the rule:

<img src="https://picsum.photos/700/150" alt="A placeholder image" />

This image is marked up using an explicit semantic role and an aria-label, but is otherwise identical to the previous example and therefore passes the rule:

<div
    role="img"
    style="width: 700px; height: 150px; background-image: url(https://picsum.photos/700/150)"
    aria-label="A placeholder image"
></div>

Failed

This image has no accessible name and therefore fails the rule:

<img src="https://picsum.photos/700/150" />

Inapplicable

This image is not included in the accessibility tree and is therefore inapplicable:

<img src="https://picsum.photos/700/150" aria-hidden="true" />

Acknowledgments

This document includes material copied from or derived from https://www.w3.org/WAI/standards-guidelines/act/rules/23a2a8/. Copyright © 2023 W3C® (MIT, ERCIM, Keio, Beihang).