SIA-R117Image accessible name is descriptive

Accessibility requirements

This rule is not required for conformance to any accessibility requirements.

Description

This rule checks that the accessible names of images serve an equivalent purpose to the image.

Applicability

This rule applies to any <img>, <canvas> or <svg> element that is visible and has a non-empty accessible name, except if the following is true:

The element has an ancestor in the flat tree that is named from author.

Expectation

The test target has an accessible name that serves an equivalent purpose to the non-text content of that test target.

Assumptions

This rule makes no assumptions.

Accessibility Support

Some popular browser / screen reader combinations do not announce the accessible names of <svg> elements. This can be resolved by adding an explicit semantic role of <img> to the <svg> element.

Examples

Passed

This <img> element has an alt attribute that describes the image.

<html lang="en">
    <img src="/test-assets/shared/w3c-logo.png" alt="W3C logo" />
</html>

This <svg> element has an aria-label attribute that describes the HTML 5 logo image.

<html lang="en">
    <svg viewBox="0 0 512 512" aria-label="HTML 5 logo" role="img">
        <path
            d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"
        />
        <path
            fill="#e44d26"
            d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"
        />
        <path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
        <path
            fill="#ebebeb"
            d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"
        />
        <path
            fill="#fff"
            d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"
        />
    </svg>
</html>

This <canvas> element has an aria-label attribute that describes the W3C logo image.

<html lang="en">
    <canvas id="logo" width="72" height="48" aria-label="W3C logo"></canvas>
    <script>
        const img = new Image();
        img.src = "/test-assets/shared/w3c-logo.png";
        img.onload = function () {
            const ctx = document.querySelector("#logo").getContext("2d");
            ctx.drawImage(img, 0, 0);
        };
    </script>
</html>

Failed

This <img> element has an alt attribute that incorrectly describes the image.

<html lang="en">
    <img src="/test-assets/shared/w3c-logo.png" alt="ERCIM logo" />
</html>

This <svg> element has an aria-label attribute that incorrectly describes the image (the aria-label is "W3C" but the actual image is the HTML 5 logo).

<html lang="en">
    <svg viewBox="0 0 512 512" aria-label="W3C" role="img">
        <path
            d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"
        />
        <path
            fill="#e44d26"
            d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"
        />
        <path fill="#f16529" d="M256 480.5V131H404.3L376 447" />
        <path
            fill="#ebebeb"
            d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"
        />
        <path
            fill="#fff"
            d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"
        />
    </svg>
</html>

This <canvas> element has an aria-label attribute that incorrectly describes the image (the aria-label is "HTML 5 logo" but the actual image is the W3C logo).

<html lang="en">
    <canvas id="logo" width="72" height="48" aria-label="HTML 5 logo"></canvas>
    <script>
        const img = new Image();
        img.src = "/test-assets/shared/w3c-logo.png";
        img.onload = function () {
            const ctx = document.querySelector("#logo").getContext("2d");
            ctx.drawImage(img, 0, 0);
        };
    </script>
</html>

Inapplicable

This <img> element has an empty ("") accessible name. The image is described by the adjacent text.

<img src="/test-assets/shared/pdf-icon.png" alt="" /> PDF document

This decorative <img> element has an empty ("") accessible name because it has no attributes or content to provide an accessible name.

<html lang="en">
    <p>Happy new year!</p>
    <img src="/test-assets/shared/fireworks.jpg" role="presentation" />
</html>

This <svg> element has an empty ("") accessible name because it has no attributes or content to provide an accessible name.

<html lang="en">
    <p>Happy new year!</p>
    <svg height="200" xmlns="http://www.w3.org/2000/svg">
        <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
    </svg>
</html>

This <canvas> element has an empty ("") accessible name because it has no attributes or content to provide an accessible name.

<html lang="en">
    <p>Happy new year!</p>
    <canvas id="newyear" width="200" height="200"></canvas>
    <script>
        const ctx = document.querySelector("#newyear").getContext("2d");
        ctx.fillStyle = "yellow";
        ctx.beginPath();
        ctx.moveTo(100, 10);
        ctx.lineTo(40, 180);
        ctx.lineTo(190, 60);
        ctx.lineTo(10, 60);
        ctx.lineTo(160, 180);
        ctx.fill();
    </script>
</html>

This <img> element is not visible.

<html lang="en">
    <img
        src="/test-assets/shared/w3c-logo.png"
        alt="W3C logo"
        style="display:none"
    />
</html>

This <img> element has no accessible name because it is not included in the accessibility tree.

<html lang="en">
    <img
        aria-hidden="true"
        src="/test-assets/shared/fireworks.jpg"
        alt="fireworks"
    />
</html>

This <svg> element is ignored because it is a child of a link that provides its accessible name.

<a href="https://w3.org" aria-label="W3C Website">
    <svg height="200" xmlns="http://www.w3.org/2000/svg" aria-label="star">
        <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
    </svg>
</a>