Observation Details
Interactive elements, like links, buttons, inputs, must have a label that is visible at all times and an accessible name that is programmatically determinable. The visible label of interactive elements must be equal to, or part of the accessible name.
If the accessible name is changed programmatically to differ from the natively set name, the visible label must be part of it in the exact wording. If the accessible name is changed, ideally, the visible label is the first part of the accessible name.
Assistive technology like voice control software uses the accessible name to control interactive elements. By stating the accessible name, the interactive element can be activated. So to activate a button, labeled "Submit", a user of voice control software can say "Click button Submit". If the accessible name of the button has been changed to "Send Form", the user is not able to access the button this way. If the accessible name of the button has been changed to "Submit Form", the name differs from the visible label but still includes the visible name as first part, making it still accessible to voice control software.
Remediation Notes
Given the following example of heading and CTA of a product card:
<h2 id="heading-product-x">Product X</h2>
<a id="link-product-x" href="#">More info</a>Whenever possible, use native accessible names for interactive elements and do not overwrite them. E.g. links and button will use their contents as the accessible name. Overwriting them with ARIA methods most like is not necessary, as the element's contents can be changed to reflect the wanted or needed accessible name.
<h2 id="heading-product-x">Product X</h2>
<a id="link-product-x" href="#">More info about product X</a>If this is not possible, ARIA can be used to enrich an element's accessible name for users of assistive technology. Using ARIA in an accessible way will introduce code complexity, as shown below, so the native way of changing the visible label is most always preferred. See also W3C WAI – First Rule of ARIA Use.
As this method is especially used for users of assistive technology, it is important to use it accessibly as well, by keeping the exact wording of the visible label in place and use it as the first part of the accessible name.
<h2 id="heading-product-x">Product X</h2>
<a id="link-product-x" aria-labelledby="link-product-x link-product-x-about heading-product-x" href="#">
More info <span class="visually-hidden" id="link-product-x-about">about</span>
</a>This will result in visible label being "More info" and accessible name being "More info about Product X", using "about" from the visually hidden <span> and "Product X" from the already existing, visible heading <h2>.
Dynamically building web applications, aria-label often is used to enrich an element's accessible name by implicitly using existing visible content as opposed to explicitly use it with aria-labelledby.
<h2 id="heading-product-x">Product X</h2>
<a id="link-product-x" aria-label="More info about Product X" href="#">More info</a>This method, while not a failure per se, can introduce other issues. While this reduces complexity as opposed to aria-labelledby, and will result in an accessible name that passes this success criterion, aria-label may be overwritten by aria-labelledby at any time.
When using existing content anyways, ensure using aria-labelledby to do so.