[A11y] Link in Carousel Code Contains No Text

[katiebethbrown]

Impacted plugin

Jetpack

Quick summary

What's Happening

The Carousel code has a hidden link that does not have any text. It's an anchor element with an href attribute, but contains no text (or only spaces) and no images with alternative text.

<a class="jp-carousel-image-download" href="#" target="_blank" style="display: none;">
<svg width="0" height="0" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="19" height="18">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.84615 5V19H19.7775V12H21.7677V19C21.7677 20.1 20.8721 21 19.7775 21H5.84615C4.74159 21 3.85596 20.1 3.85596 19V5C3.85596 3.9 4.74159 3 5.84615 3H12.8118V5H5.84615ZM14.802 5V3H21.7677V10H19.7775V6.41L9.99569 16.24L8.59261 14.83L18.3744 5H14.802Z" fill="white"></path>
</mask>
<g mask="url(#mask0)">
<rect x="0.870605" width="23.8823" height="24" fill="#FFFFFF"></rect>
</g>
</svg>
<span class="jp-carousel-download-text"></span>
</a>

Why It Matters

If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.

How to Fix It

Remove the empty link or provide text within the link that describes the functionality and/or target of that link.

Standards and Guidelines

2.4.4 Link Purpose (In Context) (Level A)

Steps to reproduce

Visit a site with the carousel enabled. Run a check with the A11y tool of your choice.

WAVE a11y check:
https://wave.webaim.org/

Logs or notes

Noted on atomic sites. Surfaced via QA testing on multiple Team51 partner sites.

[jeherve]

Related: #29168

[ryelle]

This empty link is part of the carousel skeleton, which is all empty HTML and is hidden from sighted and screen reader users. Once the carousel is open, the link is given text content, so it is accessible then. The only issue is that automated testers are flagging it.

Do we need to add content here for the sake of automated testers? If so, should it be wrapped in a translation function? It will look strange if not, but it should never be shown to users.