-
Notifications
You must be signed in to change notification settings - Fork 14
Description
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.