SIA-R2Images have an accessible name

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

1.1.1 Non-text Content

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

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:

There exists a known combination of a popular browser and an assistive technology that does not by default support use of the title attribute as an accessible name.

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" />