Image Inside Link Missing Alternative Text

Compliance Data & User Impact

User Impact: Major

60% Complete

Disabilities Affected:

  • all

WCAG Version:
2

WCAG Levels:

  • A

WCAG Guidelines:

Solution Techniques:

Automated Test Accuracy:
High

Check1st Severity:
2

DRRSAG Designations:

  • description

How to Fix Yhe Problem

Add an alt attribute with text describing the purpose of the link.

The Algorithm, In Simple Terms

The engine scans the page for <img> elements that are children an <a> element that contains no text, and checks their alt attributes.

Why Is It Important?

Assistive technologies, such as screen readers, rely on alternative text (alt text) to relay important information to the user. An link with no text content and only an image with no description does not provide sufficent information to the assistive technology user.

Code Example

<a href="#example">
    <img src="image.png" alt="Example"/>
</a>

Additional Information

More associated techniques related to broken links are: G1: Adding a link at the top of each page that directly goes to the main content area (https://www.w3.org/TR/WCAG20-TECHS/G1.html), G126: Providing a list of links to all other web pages (https://www.w3.org/TR/WCAG20-TECHS/G126.html).

This element perfoms as a container, and has no functionality. This container may contain another elements that has functionality or logical role.

Ignore this issue if this element has an alternative that performs the same and overrides the content of this element.