Skip to content

New window warning aria-label incorrect for links with images and text in link #1268

@amberhinds

Description

@amberhinds

If a link has both a decorative image and also text in in the aria-label that is being created by the new window warnings fix fails to get the link text, resulting in inaccessible links that fail WCAG Name in Label.

If there is an image and text in a link, the aria-label for the link needs to use both.

Failure 1

Example code in editor:
<p><a href="https://www.w3.org/TR/WCAG22/" target="_blank" rel="noreferrer noopener"><img class="wp-image-3330" style="width: 150px;box-shadow:none !important;" src="https://equalizedigital.com/wp-content/uploads/2020/04/user-testing-icon.png" alt=""><br>Visit the WCAG 2.2 website </a></p>

This results in a link like this:
<a href="https://www.w3.org/TR/WCAG22/" target="_blank" rel="noreferrer noopener" aria-label="opens a new window" data-nww-processed="true"><img decoding="async" width="203" height="173" class="wp-image-3330" style="width: 150px;box-shadow:none !important;" src="https://equalizedigital.com/wp-content/uploads/2020/04/user-testing-icon.png" alt=""><br>Visit the WCAG 2.2 website <i class="edac-nww-external-link-icon" aria-hidden="true"></i></a>

The expected result should be:
<a href="https://www.w3.org/TR/WCAG22/" target="_blank" rel="noreferrer noopener" aria-label="Visit the WCAG 2.2 website, opens a new window" data-nww-processed="true"><img decoding="async" width="203" height="173" class="wp-image-3330" style="width: 150px;box-shadow:none !important;" src="https://equalizedigital.com/wp-content/uploads/2020/04/user-testing-icon.png" alt=""><br>Visit the WCAG 2.2 website <i class="edac-nww-external-link-icon" aria-hidden="true"></i></a>

Failure 2

Example code in editor:
<p><a href="https://www.w3.org/TR/WCAG22/" target="_blank" rel="noreferrer noopener"><img class="wp-image-3330" style="width: 150px;box-shadow:none !important;" src="https://equalizedigital.com/wp-content/uploads/2020/04/user-testing-icon.png" alt="meaningful image"><br>Visit the WCAG 2.2 website </a></p>

Resulting link code:
<a href="https://www.w3.org/TR/WCAG22/" target="_blank" rel="noreferrer noopener" aria-label="meaningful image, opens a new window" data-nww-processed="true"><img decoding="async" width="203" height="173" class="wp-image-3330" style="width: 150px;box-shadow:none !important;" src="https://equalizedigital.com/wp-content/uploads/2020/04/user-testing-icon.png" alt="meaningful image"><br>Visit the WCAG 2.2 website <i class="edac-nww-external-link-icon" aria-hidden="true"></i></a>

Expected link code:
<a href="https://www.w3.org/TR/WCAG22/" target="_blank" rel="noreferrer noopener" aria-label="meaningful image Visit the WCAG 2.2 website, opens a new window" data-nww-processed="true"><img decoding="async" width="203" height="173" class="wp-image-3330" style="width: 150px;box-shadow:none !important;" src="https://equalizedigital.com/wp-content/uploads/2020/04/user-testing-icon.png" alt="meaningful image"><br>Visit the WCAG 2.2 website <i class="edac-nww-external-link-icon" aria-hidden="true"></i></a>

This is high priority as it's breaking front-end accessibility in some cases.

Metadata

Metadata

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions