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: iPhone Erleben 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.

Mismatch of text content and accessible name:

  • "Mehr erfahren" has accessible name "Entdecken Sie die innovative Mobilfunktechnologie"

  • "Fragen? Wir helfen auch persönlich." has accessible name "Weiter zum Apple Business Chat"

  • "Mehr erfahren" has accessible name "Erfahre mehr wie wir uns für einen verantwortungsvollen Umgang mit der Umwelt einsetzen"

  • "Jetzt iPhone Modelle vergleichen" has accessible name "iPhone vergleichen: Alle Modelle im Überblick"

  • "iPhone Vergleich" has accessible name "Zum iPhone Vergleich"

  • "Smartphone-Tarif" has accessible name "Zu unseren Smartphone-Tarifen"

  • "Prepaid-Tarife" has accessible name "Zu unseren Prepaid-Tarifen"

  • "monatlich kündbaren Handyverträge" has accessible name "Wechselassistent für Smartphones"

  • "Handyvergleich" has accessible name "Zu unserem Handyvergleich"

  • "iPad" has accessible name "Alle iPads bei der Telekom entdecken"

title attribute on link:

  • "Wo finde ich die Angaben?" uses title attribute that duplicates accessible name

  • "Zurück" uses title attribute that duplicates accessible name

Cards show button style link; mismatch of text content and accessible name:

  • "iPhone 'Zum Angebot'" have accessible names "Zum iPhone X Angebot"

Remediation Notes

Ensure visible text labels match the accessible name. If not, the visible label must be the first part of the accessible name ("more info" → "more info about X").

The title attribute is not a way to give an accessible name. It is to provide additional information that is not important, thus there is rarely a reason to use it on links.

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="#">Zum Angebot</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="#">Zum product X Angebot</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="#">
  Zum Angebot <span class="visually-hidden" id="link-product-x-about">für das</span>
</a>

This will result in visible label being "Zum Angebot" and accessible name being "Zum Angebot für das Product X", using "für das" 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="Zum Angebot für das Product X" href="#">Zum Angebot</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.