Important Notice: This website shows interim results and does not represent a complete accessibility audit. The content is not final, is under heavy development, and is not legally binding. The website and all its content is for internal use only; unauthorized use or distribution may result in legal consequences.

Documentation of accessibility observations for Deutsche Telekom – Mobilfunk & OneShop

2.5.3 Label in Name (A) Visible label is not matching interactive element's accessible name

Priority: Serious Low Page: For Friends Observation Permalink
Accompanying Files
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.

  • "Navigation" items use aria-label="Navigation Item XXX"

Remediation Notes

Visible label should ideally be the same as the accessible name. If not, then label must be part of the accessible name and should be the first part of the accessible name.

  • Remove manually set aria-label from links as text content already sets the needed accessible name

Instead of the current markup:

<a 
  class="..." 
  href="..." 
  data-tealium-rel="..." 
  aria-label="Navigation Item XXX"
>
  <span class="...">
    <span class="..." aria-hidden="true">
      <svg ... focusable="false">...</svg>
   </span>
  </span>
  <span class="...">
    Prepaid<br>
    for Friends
    <span class="...">
      <span class="..." aria-hidden="true">
        <svg ... focusable="false">...</svg>
      </span>
    </span>
  </span>
</a>

The link should be

<a href="...">
  <svg aria-hidden="true">...</svg>
  <span>
    <span>Prepaid for Friends</span>
    <svg aria-hidden="true">...</svg>
  </span>
</a>

This will hide the icon and the caret link indicator from screen readers and use the visible label "Prepaid for Friends" as the accessible name of the link.