Alle Geräte (2 issues)
Filter button labels not part of accessible name
+
Sorting dropdown label not part of accessible name
+
Android Betriebssystem (1 issues)
Visible label is not matching interactive element's accessible name
+
Apple (1 issues)
Multiple links with same label but different accessible names
+
Apple iPad Air 11 2025 (1 issues)
Visible label is not matching interactive element's accessible name
+
Cashback Einlösen (1 issues)
Visible label is not matching interactive element's accessible name
+
For Friends (1 issues)
Visible label is not matching interactive element's accessible name
+
Mobile Router (1 issues)
Filter button labels not part of accessible name
+
Smartphones (1 issues)
Filter button labels not part of accessible name
+
Smartwatches (1 issues)
Filter button labels not part of accessible name
+
Tablets (1 issues)
Filter button labels not part of accessible name
+
Tastenhandys (1 issues)
Filter button labels not part of accessible name
+
VIP Lieferung (1 issues)
Selection input element uses selection as accessible name
+
Vertragsverlängerung (1 issues)
Discrepancy of Label and Accessible Name
+
Xiaomi 15 (1 issues)
Visible label is not matching interactive element's accessible name
+
iPhone Erleben (1 issues)
Visible label is not matching interactive element's accessible name
+
Accompanying Files
Observation Details
The product tiles are complicated card components with a lot of content. The surrounding link, using <a>, uses the product's model name as its accessible name. (e.g. "Galaxy A56" or "15 Ultra")
Assistive technology like voice control software uses the accessible name to control interactive elements. By stating the accessible name, I can activate the element. To activate the product tile link I must state the product's model name (e.g. "Galaxy A56" or "15 Ultra"). As there is no indication of this part of the tile's content being "the clickable link", a user of voice control software will not be able to navigate the product tiles.
Remediation Notes
The visible label must be the (or part of the) accessible name of an interactive element. In a card component this means, there should be an element inside that is visually identifiable as an interactive element (e.g. a link or a button) that then is labeled as such to match the accessible name.
The product tile as is cannot be made accessible in that effect, as the "visible label" would be the full text content of the tile. The tile should include a visible link or button that could be labeled by "Manufacturer + Model" (i.e. "Samsung Galaxy A56" or "Xiaomi 15 Ultra").
Accompanying Files
Observation Details
There are multiple links with the same visible label "Weitere Infos" / "Kaufen" that have different accessible names, set by aria-label. Since the visual label is e.g. used by assistive technology like voice control to activate the given link, using multiple links with the same label might lead to issues.
If the accessible name differs from the visible label, the label must be the first part of the accessible name.
Remediation Notes
Ideally, use link text to convey purpose directly and choose different link text content for each target. If not possible, and link texts are enriched by ARIA attributes, ensure the visible label is used as the first part of the accessible name in the exact wording. If the visible label is "Mehr Infos", the accessible name can be enriched to say "Mehr Infos über XYZ".
Accompanying Files
Observation Details
The sorting dropdown has no accessible name but is "labeled" by "Sortieren:".
Remediation Notes
The dropdown MUST be a user accessible interface component. Ideally, use a native semantic HTML <select> element for the dropdown and an explicit label to go with it. As is, there is neither a programmatically determinable connection between the "label" "Sortieren:" and the dropdown, nor does the dropdown has any accessible name, let alone one including the label.
Please (also) refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.
Observation Details
The filter buttons have no accessible name but are "labeled" by their text and/or image content.
Remediation Notes
The buttons MUST be user accessible interface components. Ideally, use a native semantic HTML <button> element for the filter button, <fieldset> including <input type="checkbox"> for the "direct manufacturer filter" buttons, and explicit labels to go with them. As is, there is neither a programmatically determinable connection between the "labels" and the buttons, nor does the buttons have any accessible name, let alone one including the label.
Please (also) refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.
Observation Details
The filter buttons have no accessible name but are "labeled" by their text and/or image content.
Remediation Notes
The buttons MUST be user accessible interface components. Ideally, use a native semantic HTML <button> element for the filter button, <fieldset> including <input type="checkbox"> for the "direct manufacturer filter" buttons, and explicit labels to go with them. As is, there is neither a programmatically determinable connection between the "labels" and the buttons, nor does the buttons have any accessible name, let alone one including the label.
Please (also) refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.
Observation Details
The filter buttons have no accessible name but are "labeled" by their text and/or image content.
Remediation Notes
The buttons MUST be user accessible interface components. Ideally, use a native semantic HTML <button> element for the filter button, <fieldset> including <input type="checkbox"> for the "direct manufacturer filter" buttons, and explicit labels to go with them. As is, there is neither a programmatically determinable connection between the "labels" and the buttons, nor does the buttons have any accessible name, let alone one including the label.
Please (also) refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.
Observation Details
The filter buttons have no accessible name but are "labeled" by their text and/or image content.
Remediation Notes
The buttons MUST be user accessible interface components. Ideally, use a native semantic HTML <button> element for the filter button, <fieldset> including <input type="checkbox"> for the "direct manufacturer filter" buttons, and explicit labels to go with them. As is, there is neither a programmatically determinable connection between the "labels" and the buttons, nor does the buttons have any accessible name, let alone one including the label.
Please (also) refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.
Observation Details
The filter buttons have no accessible name but are "labeled" by their text and/or image content.
Remediation Notes
The buttons MUST be user accessible interface components. Ideally, use a native semantic HTML <button> element for the filter button, <fieldset> including <input type="checkbox"> for the "direct manufacturer filter" buttons, and explicit labels to go with them. As is, there is neither a programmatically determinable connection between the "labels" and the buttons, nor does the buttons have any accessible name, let alone one including the label.
Please (also) refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.
Observation Details
The filter buttons have no accessible name but are "labeled" by their text and/or image content.
Remediation Notes
The buttons MUST be user accessible interface components. Ideally, use a native semantic HTML <button> element for the filter button, <fieldset> including <input type="checkbox"> for the "direct manufacturer filter" buttons, and explicit labels to go with them. As is, there is neither a programmatically determinable connection between the "labels" and the buttons, nor does the buttons have any accessible name, let alone one including the label.
Please (also) refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.
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
titleattribute that duplicates accessible name"Zurück" uses
titleattribute 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.
Observation Details
"Anderes Gerät verkaufen" labelled "Handyankauf"
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
Accompanying Files
Observation Details
"Anderes Gerät verkaufen" labelled "Handyankauf"
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
Observation Details
Hero carousel CTAs
"Mehr erfahren" → "Jetzt mehr erfahren über das neue Xiaomi 15"
"Jetzt bestellen" → "Das Samsung Galaxy S25 Ultra jetzt bestellen"
"Jetzt kaufen" → "Zur Auswahl"
"Zum Angebot" → "Das neue Google Pixel 9 Pro entdecken"
"Mehr erfahren" links in on-page navigation
"Mehr erfahren" → "Springe weiter zu Sektion ..."
Info icons in AI section
TOPIC + info icon → "Erfahre mehr über TOPIC"
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
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-labelfrom 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.
Accompanying Files
Observation Details
Selection inputs' ("Modell", "Farbe", "Speicher") accessible name is equal to the selected item. Selecting "Modell iPhone 16" gives the input element the accessible name "iPhone 16", as it uses aria-labelledby="label-dropdown-1". The accessible name of the selection input must be the visible label ("Modell").
Remediation Notes
Ensure the use of semantic HTML elements, correct input and label, a visible label that is used as the input's accessible name.
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.
"Zur Registrierung" using "Weiter zur Registrierung, 240 € Wechselbonus"
"0800 330 2202" using "Telefon anrufen"
Remediation Notes
Ensure, the visible label matches the accessible name of the interactive element. If it is not identical, the visible label must be part of the accessible name and should be the first part of the accessible name. Ideally, manually changing the accessible name should rarely if not never be necessary, as changing the visible label should always be the first option to remediate issues with the content.
Visible label is not matching interactive element's accessible name
+
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.