90 issues found for 4.1.2 Name, Role, Value

Accordions (e.g. FAQ) are built with <div> and ARIA attributes. While the implementation meets the current success criterion, it introduces problems (or possible problems) in other success criteria. E.g. hidden links being focusable by keyboard, while being successfully hidden from screen readers. These discrepancies and problems can be avoided, using semantic HTML.

The whole table is inside an element with ARIA role "scrollbar" rendering the table completely inaccessible. This issue results in failures of quite a few success criteria. Quite possibly, results in issues that are not auditable until this issue is fixed.

The accordion button uses <div role="button">.

Section "Smartphone Highlights" uses aria-labelledby with a non-existing element ID smarphone-highlights-heading.

<section 
  id="smartphone-highlights" 
  class="SmartphoneHighlightsSmartphoneHighlights_3U6z0" 
  aria-labelledby="smarphone-highlights-heading"
>

Multiple elements are not using proper semantic HTML but instead are custom built, leading to numerous issues e.g. with keyboard accessibility (see 2.1.1 Keyboard). Including but not limited to, are the following elements:

• Links ("Weiter ohne Gerät", Product cards, ...)

• Buttons (Filter, Info icons, Footnote Asterisks)

An accordion component consists of collapsible elements with a header and content, which can be hidden. To hide / show the content, an interactive element must be present to operate the accordion. The FAQ on the shop pages are not using any semantic interactive elements.

No interaction possibility is announced via screen reader, navigating the accordion. Instead, the only announcements made are headings and images with no alt attribute, which are announced as "image". Without "guessing", a screen reader user will not be able to know that the element is interactive.

Side note: Hovering over the accordion at any point, changes the mouse cursor to pointer. As this is set on the collapsible elements and not reversed on the content panel, the cursor looks like it is hovering an interactive element inside the whole accordion, mistakenly giving the user the impression of hovering interactive elements. While this is not part of the criterion's failure, it is highly recommended to remediate.

The close button of the "league collapsibles" is using ARIA to hide it from screen readers. It also is not using a semantic button element (see 1.3.1 Info and Relationships).

The link "Ihre Vorteile im größten 5G-Netz Deutschlands" is used as a button element, opening a dialog window. It however is marked up as an HTML link, using an href="#".

The link's purpose, opening the dialog window with a video trailer, is also duplicating the "Play" button's purpose next to it.

The images of sports channels in section "Welchen Sport wollen Sie live bei MagentaTV sehen?" are used as buttons / button labels. Navigating with assistive technology, the image can be selected instead of the button. As such, the button is not even announced properly as an interactive element. Without guessing, there is no announcement that conveys the information of the image being used as an interactive element.

If the image (button) is then clicked using assistive technology, the button is triggered, the change however is not announced. There is

• no announcement of selection state,

• no announcement of changes made to the "accordion button" showing the count of selected buttons

• no announcement of pop-up window with "Empfehlung ansehen" link

Without correct announcements to assistive technology, the section "Welchen Sport wollen Sie live bei MagentaTV sehen?" is rendered completely inaccessible.

The "Empfehlung" badge is added to the tariff option section when selection is changed in section "Welchen Sport wollen Sie live bei MagentaTV sehen?".

This change of content mimics what is usually built with ARIA live regions. Those can be used to announce content changes without moving the current focus, providing information about changed content in other parts of the page. Live regions are often used for alerts, notifications, etc.

The "Empfehlung" badge is added / removed, depending on prior button selection. Changes of adding or removing however are not announced to assistive technology. Without proper announcement, the changes will happen silently and cannot be accessed by certain user groups.

The close button of the "league collapsibles" is using ARIA to hide it from screen readers. It also is not using a semantic button element (see 1.3.1 Info and Relationships).

The league information collapsible structure in section "Das komplette Sport Programm" does not use proper semantic HTML elements for interactive elements.

• Image button uses <div role="button" tabindex="0"><img alt="XYZ Logo" /></div>.

• Close button uses <span aria-hidden="true"><svg role="img" focusable="false">...</svg></span>

• "Trailer ansehen" dialog window button uses <a href="#">

The collapsed content panel uses a generic <div> structure as well.

Those are three variants of buttons, none of which are using the actual semantic HTML button element, leading to numerous problems.

1. Image button cannot be operated, using keyboard navigation

2. Close button cannot be operated, using keyboard navigation

3. "Trailer ansehen" button is communicated as link but functions as a button, opening a dialog window

Sections, named by ARIA attributes (e.g. <section class="..." aria-label="Live-Sport überall streamen">) will get assigned role "region". Regions are considered landmarks which should be used sparingly for most important landmarks of a page, not for all sections. Page structure after using the main landmarks (header, main, footer, nav) is conveyed by heading structure, rather than manually creating custom landmarks / regions for each section.

The league information collapsible structure in section "Das komplette Sport Programm" does not use proper semantic HTML elements for interactive elements.

• Image button uses <div role="button" tabindex="0"><img alt="XYZ Logo" /></div>.

• Close button uses <span aria-hidden="true"><svg role="img" focusable="false">...</svg></span>

The collapsed content panel uses a generic <div> structure as well.

Those are variants of buttons, none of which are using the actual semantic HTML button element, leading to numerous problems.

1. Image button cannot be operated, using keyboard navigation

2. Close button cannot be operated, using keyboard navigation

FAQ uses non-interactive description list <dl> to build accordion functionality. Using tabindex="0" allows (keyboard) focus of non-interactive <dt> element. Needed accessibility functionality however is not provided. Besides focus, an accordion item must accurately announce its state (collapsed / expanded) and its own interactivity (so the user knows it is operable), and a few more.

Side note: Failure of keyboard accessibility is noted in observation "FAQ not accessible via keyboard" (2.1.1 Keyboard).

FAQ uses non-interactive description list <dl> to build accordion functionality. Using tabindex="0" allows (keyboard) focus of non-interactive <dt> element. Needed accessibility functionality however is not provided. Besides focus, an accordion item must accurately announce its state (collapsed / expanded) and its own interactivity (so the user knows it is operable), and a few more.

Side note: Failure of keyboard accessibility is noted in observation "FAQ not accessible via keyboard" (2.1.1 Keyboard).

FAQ uses non-interactive description list <dl> to build accordion functionality. Using tabindex="0" allows (keyboard) focus of non-interactive <dt> element. Needed accessibility functionality however is not provided. Besides focus, an accordion item must accurately announce its state (collapsed / expanded) and its own interactivity (so the user knows it is operable), and a few more.

Side note: Failure of keyboard accessibility is noted in observation "FAQ not accessible via keyboard" (2.1.1 Keyboard).

Tabular data is displayed with generic container elements. Navigation by row and or column is not possible.

• CTA links in content cards using <button> for link functionality

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Accordion (FAQ) uses non-semantic HTML.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

The buttons to open "Vertrag verlängern" and "Tarif wechseln" guide dialog windows use <a href="#"> instead of HTML button elements. The announcement of "link" in assistive technology will imply, moving to a different resource, may it be a different page or document. All performed actions, like opening and closing dialog windows, must use HTML button elements.

Pagination buttons below product carousel use non-semantic elements instead of semantic HTML button elements. Role / functionality of buttons is not correctly conveyed to assistive technology.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Buttons use <a href="#"> instead of semantic button element.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Button "Mehr anzeigen" in SEO content uses <a href="#"> instead of semantic button element.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

The title attribute can be used to provide additional information to the already existing accessible name of an interactive element like a link. It should not be used for the same or less information. If the attribute does not provide additional information, it should not be used.

Some assistive technology do not announce the title at all, so providing relevant information only through the title attribute should always be prevented. If assistive technology announces the title attribute, it will do so after announcing the accessible name of the element, usually resulting in duplicate announcement of the same information.

For more information about using the title attribute to provide additional information, refer to W3C Technique H33: Supplementing link text with the title attribute.

Title attribute with same content as existing accessible name found on links:

• "Gerät hinzufügen" in tariff cards

• "Tarif ohne Gerät" in tariff cards

• "Weiter zum XYZ" in product cards

Title attribute with different content but same information as existing accessible name found on links:

• "Weiter zu XYZ" in "Weitere Young Vorteile" section

The switch "Mit Young-Streaming-Vorteil" can be operated by keyboard and assistive technology. Operating the switch by assistive technology has the following issues:

• Off state is announced as "invalid data off" (using attribute aria-invalid="true")

• Changes made to the following content are not announced; the user will not know of the changes

Anchor links in "Seiten-Sektionen Navigation" navigation use <button> instead of semantic link element.

The navigation code markup is structured as follows:

<nav aria-label="Seiten-Sektionen Navigation">
  <section aria-roledescription="carousel">
    <div>
      <div>
        <div>
          <div role="group" aria-roledescription=slide" aria-label="Slide X von 4"> <!-- nav item -->
            <div>
              <button 
                type="button" 
                title="Springe zur Sektion ..." 
                aria-label="Springe zur Sektion ..."
              >
                <span aria-hidden="true">
                  <img alt="..." />
                  <img alt="..." />
                  <!-- more images -->
                <span>
                  <span> <!-- visible label -->
                  <span>
                    <span aria-hidden="true">
                      <svg role="img" focusable="false"> <!-- caret icon -->
                  <span> <!-- duplicating visible label -->
...

Observations:

• Navigation structure

  • Navigation label includes "Navigation"; each navigation is announced by assistive technology as "navigation" already, adding same wording to a navigation's label will duplicate announcement as "Seiten-Sektionen Navigation, navigation"

  • Section element used in uniquely identified navigation landmark without any sibling elements

  • Multiple levels of <div> elements

  • Navigation does not use semantic HTML list element to list navigation items

  • Navigation items are links but use HTML button element; button does not set correct focus, so clicking (by keyboard or assistive technology) will scroll the page but the focus remains on the triggering element

• ARIA

  • aria-roledescription

    • does not add functionality

    • "carousel" and "slide" is not in main page language

  • Role "group" used for single interface object (as opposed to intended use to "identify a set of user interface objects", see MDN ARIA group role)

  • "Slide" labels "Slide X von 4" do not convey valuable information

• Button

  • Attributes

    • <button type="button"> is redundant

    • uses title attribute

    • labeled by aria-label

    • title duplicated aria-label

  • Images

    • Hidden from assistive technology by use of aria-hidden="true"

  • Visible label

    • Includes aria-hidden="true" <span> element which then includes an SVG with role="img"

    • Duplicated by visually hidden text

    • Not at all used, because it is overwritten by aria-label on the button element

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Page uses landmarks. Accessible landmarks (including <article> elements) are:

• Main, using <main>

• Breadcrumb (Navigation), using <nav>

• Region "Unsere Smartphone-Tarife", using <section aria-labelledby="...">

• Article "Holt euch jetzt UNLIMITED*", using <article aria-labelledby="...">

• Article "MagentaMobil Young", using <article aria-labelledby="...">

• Article "Prepaid-Tarife", using <article>

• Article "Datentarife", using <article>

• Article "Watch- & Tracker-Tarife", using <article>

Observations:

• While section "Unsere Smartphone-Tarife" uses a labeled section which changes its accessible role to "region", section "Weitere Mobilfunk-Tarife" is not labeled, therefore has role "generic" and is not added to the landmark list

• Article elements have non-generic role "article" and as such are included in the landmark list on macOS VoiceOver screen reader rotor, even when not explicitly labeled

Product color "variant circles" use <div value="..." aria-describedby="..." role="button" tabindex="0">. The buttons are accessible by keyboard but have no functionality at all, which results in multiple (color count) non-interactive but focusable elements. For each card, a user of keyboard navigation has to click up to six times to get to the next card.

aria-describedby="tooltip-content-id" refers to a <span> element in the sidebar, with the following content. This whole content is the accessible name of each of the color circle "buttons":

Jubiläumsaktion: Als Neukunde 240 € Wechselbonus sichern

Internet

• 50 GB Highspeed-Volumen (mit LTE Max/5G)

• Mit einer Pluskarte zu 19,95 € monatlich: deutschlandweit unbegrenztes Datenvolumen für den Hauptvertrag und alle Pluskarten

• Geschwindigkeit im Download: bis zu 300 MBit/s

• Geschwindigkeit im Upload: bis zu 50 MBit/s

• Nach Verbrauch des Highspeed-Volumens wird die Geschwindigkeit im jeweiligen Monat auf max. 64 KBit/s (Download) und 16 KBit/s (Upload) reduziert.

Inklusivleistungen

• Telefonie- und SMS-Flat in alle deutschen Netze:
  Telefonieren Sie unbegrenzt ins deutsche Mobilfunk- und Festnetz und versenden Sie unbegrenzt SMS.

• Hotspot Flat:
  Mit einem Telekom HotSpot in Ihrer Nähe können Sie auch unterwegs surfen, ohne dabei das eigene Datenvolumen zu verbrauchen. Mehr Infos unter www.hotspot.de

• Roaming:
  In der EU inkl. Schweiz & Großbritannien surfen und telefonieren Sie auf vorübergehenden Reisen ohne zusätzliche Kosten wie im Inland.

Tarife ohne Mindestlaufzeit

• Infos zu Tarifen ohne Mindestlaufzeit, die lediglich ohne Gerät erhältlich sind, finden Sie unter www.telekom.de/flex-mobil oder in der Preisliste.

Produktinformationsblatt (PDF)

Preisliste, Leistungsbeschreibung und AGB

As the accessible name, this whole text content is announced by assistive technology for every color variant circle.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Assistive technology relies on use of proper semantic HTML. The screenshots show lists of elements, a user of assistive technology gets, using e.g. macOS VoiceOver screen reader rotor:

• Landmarks list

• Links list

• Buttons list

All of these give an idea of improper use of semantic HTML. Observations:

Landmarks

• Main and navigation landmarks are used

• Each product price uses three(!) semantic article elements, two of which are empty

Each product price (e.g. "889,95 €") is marked up as follows:

<div class="...">
  <div class="...">
    <div class="...">
      <section class="...">
        Einmalig
      </section>
      <article class="...">
        <div class="...">
          889,95 €
        </div>
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
  <section class="...">
    <div class="...">
      <article class="...">
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
      <div class="...">
        <article class="...">
        </article>
      </div>
    </div>
  </section>
</div>

Links

• Product card link elements are empty

• assistive technology will always try to find a fallback for missing information; in this case, the last part of the link's URL path (stripping query parameters) is used; href="/shop/geraet/apple/apple-ipad-air-13-2025-m3/space-grau-256-gb?tariffId=MF17498&tariffSubTenId=MF17496&categoryId=alle-geraete" → space-grau-256-gb

• As the product color and storage is part of the URL path, multiple products with same color and storage will have the same fallback name (see e.g. "space-schwarz-256-gb")

• "Weitere Geräte anzeigen" has button functionality but is using a semantic link element

• "Tarif ändern" has button functionality but is using a semantic link element

• "Tarif entfernen" has button functionality but is using a semantic link element

• "Preisübersicht anzeigen"

  • has button functionality but is using a semantic link element

  • uses a <div role="link"> inside the aforementioned link element

  • as two nested links are used, the link is duplicated in the link list

Buttons

• Color variant circles use buttons as <div value="#262529" class="..." aria-describedby="tooltip-content-id" role="button" tabindex="0">...</div>;

• Color variants use buttons without any functionality

• Color variant buttons are labeled by sidebar content tooltip-content-id

• All color variant buttons are labeled the same, thus cannot be differentiated

• "* Schaltfläche" announces footnotes. All footnote buttons are announced the same: "*" / "STAR"

Multiple elements are not using proper semantic HTML but instead are custom built, leading to numerous issues e.g. with keyboard accessibility (see 2.1.1 Keyboard). Including but not limited to, are the following elements:

• Links (Product cards, ...)

• Buttons (Filter, Sorting dropdown, Info icons,)

Product color "variant circles" use <div value="..." aria-describedby="..." role="button" tabindex="0">. The buttons are accessible by keyboard but have no functionality at all, which results in multiple (color count) non-interactive but focusable elements. For each card, a user of keyboard navigation has to click up to six times to get to the next card.

aria-describedby="tooltip-content-id" refers to a <span> element in the sidebar, with the following content. This whole content is the accessible name of each of the color circle "buttons":

Internet

• 100 GB Highspeed-Volumen (mit LTE Max/5G)

• Datennutzung im Telekom Mobilfunknetz

• Gilt für Datenverkehr in Deutschland.

• Geschwindigkeit im Download: bis zu 300 MBit/s (bei externer Stromversorgung) bzw. 20 MBit/s (im Akkubetrieb)

• Geschwindigkeit im Upload: bis zu 50 MBit/s (bei externer Stromversorgung) bzw. 5 MBit/s (im Akkubetrieb)

• Ab einem Verbrauch von 100 GB pro Monat wird die Internetverbindung im jeweiligen Monat automatisch beendet.

• Mit SpeedOn haben Sie die Möglichkeit, die Internetverbindung wiederherzustellen.

Zubuchbare SpeedOn Pässe (31 Tage ab Buchung gültig)

• 15 GB: 14,95 €

• 50 GB: 29,95 €

• 100 GB: 44,95 €

Produktinformationsblatt (PDF)

Preisliste, Leistungsbeschreibung und AGB

As the accessible name, this whole text content is announced by assistive technology for every color variant circle.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Assistive technology relies on use of proper semantic HTML. The screenshots show lists of elements, a user of assistive technology gets, using e.g. macOS VoiceOver screen reader rotor:

• Landmarks list

• Links list

• Buttons list

All of these give an idea of improper use of semantic HTML. Observations:

Landmarks

• Main and navigation landmarks are used

• Each product price uses three(!) semantic article elements, two of which are empty

Each product price (e.g. "889,95 €") is marked up as follows:

<div class="...">
  <div class="...">
    <div class="...">
      <section class="...">
        Einmalig
      </section>
      <article class="...">
        <div class="...">
          889,95 €
        </div>
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
  <section class="...">
    <div class="...">
      <article class="...">
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
      <div class="...">
        <article class="...">
        </article>
      </div>
    </div>
  </section>
</div>

Links

• Product card link elements are empty

• assistive technology will always try to find a fallback for missing information; in this case, the last part of the link's URL path (stripping query parameters) is used; href="/shop/geraet/apple/apple-ipad-air-13-2025-m3/space-grau-256-gb?tariffId=MF17498&tariffSubTenId=MF17496&categoryId=alle-geraete" → space-grau-256-gb

• As the product color and storage is part of the URL path, multiple products with same color and storage will have the same fallback name (see e.g. "space-schwarz-256-gb")

• "Weitere Geräte anzeigen" has button functionality but is using a semantic link element

• "Tarif ändern" has button functionality but is using a semantic link element

• "Tarif entfernen" has button functionality but is using a semantic link element

• "Preisübersicht anzeigen"

  • has button functionality but is using a semantic link element

  • uses a <div role="link"> inside the aforementioned link element

  • as two nested links are used, the link is duplicated in the link list

Buttons

• Color variant circles use buttons as <div value="#262529" class="..." aria-describedby="tooltip-content-id" role="button" tabindex="0">...</div>;

• Color variants use buttons without any functionality

• Color variant buttons are labeled by sidebar content tooltip-content-id

• All color variant buttons are labeled the same, thus cannot be differentiated

• "* Schaltfläche" announces footnotes. All footnote buttons are announced the same: "*" / "STAR"

Buttons use <a> without href attribute and <div> with tabindex="0", instead of semantic button element.

• Tarif ändern

• Tarif entfernen

• Preisübersicht anzeigen

Button uses span tabindex="0" role="button" aria-label="..." aria-describedby="..." instead of semantic button element.

• Info Icon in sidebar

Buttons uses <section> instead of semantic button element.

• Filter button

Links use <div class="clickable"> instead of semantic link element.

• Shop category links (Handys, Smartwatches, Tablets, ...)

• side note: category links are arguably a navigation element and as such should use <nav><ul><li><a href=""> structure

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

FAQ items use visually hidden text that duplicates existing content twice (button label & region label)

<span id="ODSAccordion-ContentSpan-:r0:" class="sr-only">
  <span class="ods-accordion-heading">
    Was ist der Vorteil von Surfsticks und mobilen 5G-Routern mit Vertrag?
  </span> 
  content
</span>

Multiple elements are not using proper semantic HTML but instead are custom built, leading to numerous issues e.g. with keyboard accessibility (see 2.1.1 Keyboard). Including but not limited to, are the following elements:

• Links (Product cards)

• Buttons (Filter, Info icons, Footnote Asterisks)

Product color "variant circles" use <div value="..." aria-describedby="..." role="button" tabindex="0">. The buttons are accessible by keyboard but have no functionality at all, which results in multiple (color count) non-interactive but focusable elements. For each card, a user of keyboard navigation has to click up to six times to get to the next card.

aria-describedby="tooltip-content-id" refers to a <span> element in the sidebar, with the following content. This whole content is the accessible name of each of the color circle "buttons":

Jubiläumsaktion: Als Neukunde 240 € Wechselbonus sichern

Internet

• 50 GB Highspeed-Volumen (mit LTE Max/5G)

• Mit einer Pluskarte zu 19,95 € monatlich: deutschlandweit unbegrenztes Datenvolumen für den Hauptvertrag und alle Pluskarten

• Geschwindigkeit im Download: bis zu 300 MBit/s

• Geschwindigkeit im Upload: bis zu 50 MBit/s

• Nach Verbrauch des Highspeed-Volumens wird die Geschwindigkeit im jeweiligen Monat auf max. 64 KBit/s (Download) und 16 KBit/s (Upload) reduziert.

Inklusivleistungen

• Telefonie- und SMS-Flat in alle deutschen Netze:
  Telefonieren Sie unbegrenzt ins deutsche Mobilfunk- und Festnetz und versenden Sie unbegrenzt SMS.

• Hotspot Flat:
  Mit einem Telekom HotSpot in Ihrer Nähe können Sie auch unterwegs surfen, ohne dabei das eigene Datenvolumen zu verbrauchen. Mehr Infos unter www.hotspot.de

• Roaming:
  In der EU inkl. Schweiz & Großbritannien surfen und telefonieren Sie auf vorübergehenden Reisen ohne zusätzliche Kosten wie im Inland.

Tarife ohne Mindestlaufzeit

• Infos zu Tarifen ohne Mindestlaufzeit, die lediglich ohne Gerät erhältlich sind, finden Sie unter www.telekom.de/flex-mobil oder in der Preisliste.

Produktinformationsblatt (PDF)

Preisliste, Leistungsbeschreibung und AGB

As the accessible name, this whole text content is announced by assistive technology for every color variant circle.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Assistive technology relies on use of proper semantic HTML. The screenshots show lists of elements, a user of assistive technology gets, using e.g. macOS VoiceOver screen reader rotor:

• Landmarks list

• Links list

• Buttons list

All of these give an idea of improper use of semantic HTML. Observations:

Landmarks

• Main and navigation landmarks are used

• Each product price uses three(!) semantic article elements, two of which are empty

Each product price (e.g. "889,95 €") is marked up as follows:

<div class="...">
  <div class="...">
    <div class="...">
      <section class="...">
        Einmalig
      </section>
      <article class="...">
        <div class="...">
          889,95 €
        </div>
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
  <section class="...">
    <div class="...">
      <article class="...">
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
      <div class="...">
        <article class="...">
        </article>
      </div>
    </div>
  </section>
</div>

Links

• Product card link elements are empty

• assistive technology will always try to find a fallback for missing information; in this case, the last part of the link's URL path (stripping query parameters) is used; href="/shop/geraet/apple/apple-ipad-air-13-2025-m3/space-grau-256-gb?tariffId=MF17498&tariffSubTenId=MF17496&categoryId=alle-geraete" → space-grau-256-gb

• As the product color and storage is part of the URL path, multiple products with same color and storage will have the same fallback name (see e.g. "space-schwarz-256-gb")

• "Weitere Geräte anzeigen" has button functionality but is using a semantic link element

• "Tarif ändern" has button functionality but is using a semantic link element

• "Tarif entfernen" has button functionality but is using a semantic link element

• "Preisübersicht anzeigen"

  • has button functionality but is using a semantic link element

  • uses a <div role="link"> inside the aforementioned link element

  • as two nested links are used, the link is duplicated in the link list

Buttons

• Color variant circles use buttons as <div value="#262529" class="..." aria-describedby="tooltip-content-id" role="button" tabindex="0">...</div>;

• Color variants use buttons without any functionality

• Color variant buttons are labeled by sidebar content tooltip-content-id

• All color variant buttons are labeled the same, thus cannot be differentiated

• "* Schaltfläche" announces footnotes. All footnote buttons are announced the same: "*" / "STAR"

Product color "variant circles" use <div value="..." aria-describedby="..." role="button" tabindex="0">. The buttons are accessible by keyboard but have no functionality at all, which results in multiple (color count) non-interactive but focusable elements. For each card, a user of keyboard navigation has to click up to six times to get to the next card.

aria-describedby="tooltip-content-id" refers to a <span> element in the sidebar, with the following content. This whole content is the accessible name of each of the color circle "buttons":

Internet

• Tracking-Flat im Telekom Mobilfunknetz

• 1 GB Inklusiv-Volumen

• Geschwindigkeit im Download: bis zu 1 MBit/s

• Geschwindigkeit im Upload: bis zu 1 MBit/s

• Nach Verbrauch des Inklusiv-Volumens wird die Geschwindigkeit im jeweiligen Monat auf max. 64 KBit/s im Upload reduziert.

• Die GPS-Ortung funktioniert auch bei reduzierter Übertragungsgeschwindigkeit.

Kommunikation

• Telefonie in alle deutsche Netze: 150 Min./Monat inklusive, danach 0,09 €/Min.

• SMS in alle deutsche Netze: 150 SMS/Monat inklusive, danach 0,09 €/SMS

Inklusivleistungen

• EU-Roaming inkl. Großbritannien, Schweiz, Island und Norwegen
  (Bei der Apple Watch wird Roaming nur mit der MultiSIM unterstützt, nicht mit der Familienkonfiguration)

Vertragslaufzeit

• 24 Monate Mindestvertragslaufzeit

Produktinformationsblatt (PDF)

Preisliste, Leistungsbeschreibung und AGB

As the accessible name, this whole text content is announced by assistive technology for every color variant circle.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Assistive technology relies on use of proper semantic HTML. The screenshots show lists of elements, a user of assistive technology gets, using e.g. macOS VoiceOver screen reader rotor:

• Landmarks list

• Links list

• Buttons list

All of these give an idea of improper use of semantic HTML. Observations:

Landmarks

• Main and navigation landmarks are used

• Each product price uses three(!) semantic article elements, two of which are empty

Each product price (e.g. "889,95 €") is marked up as follows:

<div class="...">
  <div class="...">
    <div class="...">
      <section class="...">
        Einmalig
      </section>
      <article class="...">
        <div class="...">
          889,95 €
        </div>
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
  <section class="...">
    <div class="...">
      <article class="...">
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
      <div class="...">
        <article class="...">
        </article>
      </div>
    </div>
  </section>
</div>

Links

• Product card link elements are empty

• assistive technology will always try to find a fallback for missing information; in this case, the last part of the link's URL path (stripping query parameters) is used; href="/shop/geraet/apple/apple-ipad-air-13-2025-m3/space-grau-256-gb?tariffId=MF17498&tariffSubTenId=MF17496&categoryId=alle-geraete" → space-grau-256-gb

• As the product color and storage is part of the URL path, multiple products with same color and storage will have the same fallback name (see e.g. "space-schwarz-256-gb")

• "Weitere Geräte anzeigen" has button functionality but is using a semantic link element

• "Tarif ändern" has button functionality but is using a semantic link element

• "Tarif entfernen" has button functionality but is using a semantic link element

• "Preisübersicht anzeigen"

  • has button functionality but is using a semantic link element

  • uses a <div role="link"> inside the aforementioned link element

  • as two nested links are used, the link is duplicated in the link list

Buttons

• Color variant circles use buttons as <div value="#262529" class="..." aria-describedby="tooltip-content-id" role="button" tabindex="0">...</div>;

• Color variants use buttons without any functionality

• Color variant buttons are labeled by sidebar content tooltip-content-id

• All color variant buttons are labeled the same, thus cannot be differentiated

• "* Schaltfläche" announces footnotes. All footnote buttons are announced the same: "*" / "STAR"

Buttons use <a> without href attribute and <div> with tabindex="0", instead of semantic button element.

• Tarif ändern

• Tarif entfernen

• Preisübersicht anzeigen

Button uses span tabindex="0" role="button" aria-label="..." aria-describedby="..." instead of semantic button element.

• Info Icon in sidebar

Buttons uses <section> instead of semantic button element.

• Filter button

Links use <div class="clickable"> instead of semantic link element.

• Shop category links (Handys, Smartwatches, Tablets, ...)

• side note: category links are arguably a navigation element and as such should use <nav><ul><li><a href=""> structure

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

FAQ items use visually hidden text that duplicates existing content twice (button label & region label)

<span id="ODSAccordion-ContentSpan-:r0:" class="sr-only">
  <span class="ods-accordion-heading">
    Was ist der Vorteil von Surfsticks und mobilen 5G-Routern mit Vertrag?
  </span> 
  content
</span>

Product color "variant circles" use <div value="..." aria-describedby="..." role="button" tabindex="0">. The buttons are accessible by keyboard but have no functionality at all, which results in multiple (color count) non-interactive but focusable elements. For each card, a user of keyboard navigation has to click up to six times to get to the next card.

aria-describedby="tooltip-content-id" refers to a <span> element in the sidebar, with the following content. This whole content is the accessible name of each of the color circle "buttons":

Jubiläumsaktion: Als Neukunde 240 € Wechselbonus sichern

Internet

• 50 GB Highspeed-Volumen (mit LTE Max/5G)

• Mit einer Pluskarte zu 19,95 € monatlich: deutschlandweit unbegrenztes Datenvolumen für den Hauptvertrag und alle Pluskarten

• Geschwindigkeit im Download: bis zu 300 MBit/s

• Geschwindigkeit im Upload: bis zu 50 MBit/s

• Nach Verbrauch des Highspeed-Volumens wird die Geschwindigkeit im jeweiligen Monat auf max. 64 KBit/s (Download) und 16 KBit/s (Upload) reduziert.

Inklusivleistungen

• Telefonie- und SMS-Flat in alle deutschen Netze:
  Telefonieren Sie unbegrenzt ins deutsche Mobilfunk- und Festnetz und versenden Sie unbegrenzt SMS.

• Hotspot Flat:
  Mit einem Telekom HotSpot in Ihrer Nähe können Sie auch unterwegs surfen, ohne dabei das eigene Datenvolumen zu verbrauchen. Mehr Infos unter www.hotspot.de

• Roaming:
  In der EU inkl. Schweiz & Großbritannien surfen und telefonieren Sie auf vorübergehenden Reisen ohne zusätzliche Kosten wie im Inland.

Tarife ohne Mindestlaufzeit

• Infos zu Tarifen ohne Mindestlaufzeit, die lediglich ohne Gerät erhältlich sind, finden Sie unter www.telekom.de/flex-mobil oder in der Preisliste.

Produktinformationsblatt (PDF)

Preisliste, Leistungsbeschreibung und AGB

As the accessible name, this whole text content is announced by assistive technology for every color variant circle.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Assistive technology relies on use of proper semantic HTML. The screenshots show lists of elements, a user of assistive technology gets, using e.g. macOS VoiceOver screen reader rotor:

• Landmarks list

• Links list

• Buttons list

All of these give an idea of improper use of semantic HTML. Observations:

Landmarks

• Main and navigation landmarks are used

• Each product price uses three(!) semantic article elements, two of which are empty

Each product price (e.g. "889,95 €") is marked up as follows:

<div class="...">
  <div class="...">
    <div class="...">
      <section class="...">
        Einmalig
      </section>
      <article class="...">
        <div class="...">
          889,95 €
        </div>
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
  <section class="...">
    <div class="...">
      <article class="...">
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
      <div class="...">
        <article class="...">
        </article>
      </div>
    </div>
  </section>
</div>

Links

• Product card link elements are empty

• assistive technology will always try to find a fallback for missing information; in this case, the last part of the link's URL path (stripping query parameters) is used; href="/shop/geraet/apple/apple-ipad-air-13-2025-m3/space-grau-256-gb?tariffId=MF17498&tariffSubTenId=MF17496&categoryId=alle-geraete" → space-grau-256-gb

• As the product color and storage is part of the URL path, multiple products with same color and storage will have the same fallback name (see e.g. "space-schwarz-256-gb")

• "Weitere Geräte anzeigen" has button functionality but is using a semantic link element

• "Tarif ändern" has button functionality but is using a semantic link element

• "Tarif entfernen" has button functionality but is using a semantic link element

• "Preisübersicht anzeigen"

  • has button functionality but is using a semantic link element

  • uses a <div role="link"> inside the aforementioned link element

  • as two nested links are used, the link is duplicated in the link list

Buttons

• Color variant circles use buttons as <div value="#262529" class="..." aria-describedby="tooltip-content-id" role="button" tabindex="0">...</div>;

• Color variants use buttons without any functionality

• Color variant buttons are labeled by sidebar content tooltip-content-id

• All color variant buttons are labeled the same, thus cannot be differentiated

• "* Schaltfläche" announces footnotes. All footnote buttons are announced the same: "*" / "STAR"

Buttons use <a> without href attribute and <div> with tabindex="0", instead of semantic button element.

• Tarif ändern

• Tarif entfernen

• Preisübersicht anzeigen

Button uses span tabindex="0" role="button" aria-label="..." aria-describedby="..." instead of semantic button element.

• Info Icon in sidebar

Buttons uses <section> instead of semantic button element.

• Filter button

Links use <div class="clickable"> instead of semantic link element.

• Shop category links (Handys, Smartwatches, Tablets, ...)

• side note: category links are arguably a navigation element and as such should use <nav><ul><li><a href=""> structure

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

FAQ items use visually hidden text that duplicates existing content twice (button label & region label)

<span id="ODSAccordion-ContentSpan-:r0:" class="sr-only">
  <span class="ods-accordion-heading">
    Was ist der Vorteil von Surfsticks und mobilen 5G-Routern mit Vertrag?
  </span> 
  content
</span>

Multiple elements are not using proper semantic HTML but instead are custom built, leading to numerous issues e.g. with keyboard accessibility (see 2.1.1 Keyboard). Including but not limited to, are the following elements:

• Links (Product cards)

• Buttons (Filter, Info icons)

Product color "variant circles" use <div value="..." aria-describedby="..." role="button" tabindex="0">. The buttons are accessible by keyboard but have no functionality at all, which results in multiple (color count) non-interactive but focusable elements. For each card, a user of keyboard navigation has to click up to six times to get to the next card.

aria-describedby="tooltip-content-id" refers to a <span> element in the sidebar, with the following content. This whole content is the accessible name of each of the color circle "buttons":

Internet

• 5 GB Highspeed-Volumen (1 GB zus. Datenvolumen mit MagentaEINS: 6 GB)

• Daten-Flat im Telekom Mobilfunknetz

• Geschwindigkeit im Download: LTE Max/5G

• Geschwindigkeit im Upload: bis zu 50 MBit/s

 

Inklusivleistungen

• HotSpot Flat:
  Mit einem Telekom HotSpot in Ihrer Nähe können Sie auch unterwegs surfen, ohne dabei das eigene Datenvolumen zu verbrauchen.
  Mehr Infos unter www.hotspot.de

• Roaming:
  In der EU inkl. Schweiz & Großbritannien surfen Sie auf vorübergehenden Reisen ohne zusätzliche Kosten wie im Inland.

 

Zubuchbare Datenpässe

• WeekPass (+ 3 GB): 5,95 €

• WeekPass (+ 10 GB): 14,95 €

• 4-WeekPass (+ 20 GB): 19,95 €

• 4-WeekPass (+ 40 GB): 29,95 €

• DayFlat unlimited: 9,95 €

So buchen Sie SpeedOn Datenpässe:
Sie erhalten jeweils eine SMS, wenn Sie Ihr Highspeed-Volumen zu 80 % und komplett verbraucht haben. Klicken Sie auf den kostenlosen Link http://pass.telekom.de in der SMS: hier können Sie Ihren aktuellen Verbrauch kontrollieren und bei Bedarf neues Highspeed-Volumen mit SpeedOn nachkaufen.
Die Buchung der SpeedOn Datenpässe ist auch in der MeinMagenta App möglich.

 

Tarife ohne Mindestlaufzeit

• Infos zu Tarifen ohne Mindestlaufzeit, die lediglich ohne Gerät erhältlich sind, finden Sie unter www.telekom.de/flex-mobil oder in der Preisliste.

Produktinformationsblatt (PDF)

Preisliste, Leistungsbeschreibung und AGB

As the accessible name, this whole text content is announced by assistive technology for every color variant circle.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Assistive technology relies on use of proper semantic HTML. The screenshots show lists of elements, a user of assistive technology gets, using e.g. macOS VoiceOver screen reader rotor:

• Landmarks list

• Links list

• Buttons list

All of these give an idea of improper use of semantic HTML. Observations:

Landmarks

• Main and navigation landmarks are used

• Each product price uses three(!) semantic article elements, two of which are empty

Each product price (e.g. "889,95 €") is marked up as follows:

<div class="...">
  <div class="...">
    <div class="...">
      <section class="...">
        Einmalig
      </section>
      <article class="...">
        <div class="...">
          889,95 €
        </div>
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
  <section class="...">
    <div class="...">
      <article class="...">
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
      <div class="...">
        <article class="...">
        </article>
      </div>
    </div>
  </section>
</div>

Links

• Product card link elements are empty

• assistive technology will always try to find a fallback for missing information; in this case, the last part of the link's URL path (stripping query parameters) is used; href="/shop/geraet/apple/apple-ipad-air-13-2025-m3/space-grau-256-gb?tariffId=MF17498&tariffSubTenId=MF17496&categoryId=alle-geraete" → space-grau-256-gb

• As the product color and storage is part of the URL path, multiple products with same color and storage will have the same fallback name (see e.g. "space-schwarz-256-gb")

• "Weitere Geräte anzeigen" has button functionality but is using a semantic link element

• "Tarif ändern" has button functionality but is using a semantic link element

• "Tarif entfernen" has button functionality but is using a semantic link element

• "Preisübersicht anzeigen"

  • has button functionality but is using a semantic link element

  • uses a <div role="link"> inside the aforementioned link element

  • as two nested links are used, the link is duplicated in the link list

Buttons

• Color variant circles use buttons as <div value="#262529" class="..." aria-describedby="tooltip-content-id" role="button" tabindex="0">...</div>;

• Color variants use buttons without any functionality

• Color variant buttons are labeled by sidebar content tooltip-content-id

• All color variant buttons are labeled the same, thus cannot be differentiated

• "* Schaltfläche" announces footnotes. All footnote buttons are announced the same: "*" / "STAR"

Links use <button> instead of semantic link element.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

"Zum Angebot" link does not use <a href=""> but omits href attribute. Clicking the link scrolls the page to the desired location but does not set focus correctly. Using assistive technology, clicking the link will keep the focus on the triggering element.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Footnote button in section "Jetzt Apple Watch SE mit Smart Connect M bestellen" is marked up as follows:

<span 
  data-url="/unterwegs/ajax?ssb_block=dynamic-mapping&amp;toGet=footnotes-popup&amp;productId=tariff:16309" 
  class="..." 
  data-tealium-rel="content" 
  id="legal-notes-18794751934">
  ::before
</span>

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Observations:

• Dropdown "Wählen Sie ein iPhone aus" uses span role="combobox" tabindex="0" instead of semantic input field for selection / dropdown

• Handyankauf form

  • Step indicators use <button type="button" disabled> but are not buttons

  • CAPTCHA reload button uses span aria-hidden="true" instead of button element

  • "Wo finde ich die IMEI-Nummer" uses a href="#imei" title="..." instead of button element; side note, #imei is not found in DOM

    • Close button in dialog window uses <button type="button"> which is redundant and unnecessary

  • "Zurück" button use a href="#" title="Zurück" instead of button element

  • Info "i" icon buttons (step 3) use <span aria-hidden="true"><svg>... instead of semantic (accessible) button element

    • Close button in dialog window uses <button type="button"> which is redundant and unnecessary

  • "Wo finde ich die Angabe" uses a href="#imei" title="..." instead of button element; side note, #imei is not found in DOM

    • Close button in dialog window uses <button type="button"> which is redundant and unnecessary

  • "Prüfen" button uses <button type="button"> which is redundant and unnecessary

  • "Ohne Aktion fortfahren" button uses <button type="button"> which is redundant and unnecessary

  • "Anrede" dropdown uses span role="button" tabindex="0" ... and select id="..." name="title" (with non-unique id) instead of semantic input element

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Footnote dialog window is not keyboard accessible.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Multiple (nested) main elements found. Ensure only a single main landmark is used per page.

Dropdown / selection "Wählen Sie ein iPhone aus" uses <span role="combobox" tabindex="0" ...>. Dropdown caret icon uses <span aria-hidden="true"><svg role="img" focusable="false">.

Navigating by screen reader, after the section heading, the main image is selected. After that, the right container half is skipped by the screen reader.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Button "Preisübersicht anzeigen" in sidebar uses <a tabindex="0"> instead of semantic button element.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Buttons and links not used correctly.

• Dialog windows should be triggered by button elements, instead, many are triggered by link elements with missing href attribute

  • Weitere Details

  • Anderes Gerät verkaufen

  • Tarif ändern

  • Tarif entfernen

  • Preisübersicht anzeigen

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

• Device color buttons do not use semantic button element

• While not a failure of this criterion, device color choice arguably should be a radio button group instead; as should storage option and "Einmalzahlung" option

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

• Device color buttons do not use semantic button element; no content given, no label given

  • assistive technology announces wrong colors

  • assistive technology announces button, group

• While not a failure of this criterion, device color choice arguably should be a radio button group instead; as should storage option and "Einmalzahlung" option

• "Handyversicherung" is displayed as radio button group but is not using proper radio button group syntax

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Buttons and links not used correctly.

• Dialog windows should be triggered by button elements, instead, many are triggered by link elements with missing href attribute

  • Weitere Details

  • Jetzt gebrauchtes Handy verkaufen / Anderes Gerät verkaufen

  • "Details" links in "Handyversicherung"

  • Tarif ändern

  • Tarif entfernen

  • Preisübersicht anzeigen

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Interactive elements not announced interactive, making it inaccessible to users of assistive technology

• Device thumbnails announced as images

• "Speichergröße"

• "Einmalzahlung"

• "Handyversicherung"

  • Details button

  • "radio buttons"

Interactive elements not using correct semantic HTML

• "Spezifikationen" collapsible button is announced; assistive technology can navigate into content but is trapped inside until collapsible is closed again

Interactive element can be operated by mouse but not by keyboard. The issue may occur when:

• Non-semantic HTML elements (e.g. <div>, <span>) are used for interactive purposes (e.g. links, buttons, inputs), instead of semantic HTML elements (e.g. <a href="">, <button>). This often also leads to other issues, concerning 4.1.2 Name, Role, Value.

• Semantic elements are used but required attributes are missing (e.g. <a>, missing href attribute)

• Semantic HTML elements are mis-used (e.g. <a> used as a button, or <button> used as a link)

Anchor links use <li data-scroll-trigger="scrollTarget"> instead of semantic link element with <a href="#scrollTarget">.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

The button teaser__subline-expander does not use semantic button element. Instead it uses <div data-subline-addition="expander">.

Buttons use <a href="#"> instead of semantic button element.

• "Paketdetails" in tariff option card

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

See observation details for "FAQ not screen reader accessible"

Links use <a data-scroll-trigger="scrollTarget"> instead of semantic <a href="#scrollTarget">. An HTML anchor element without href attribute, basically loses its link role and as such is not accessible to keyboard navigation and use via assistive technology.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

FAQ "Häufig gestellte Fragen zur 5G Netzabdeckung" uses <ul role="tablist">.

Observations:

• The whole list is one focusable element; TAB can navigate to it, but the next TAB will already leave the FAQ and navigate to the next focusable element; expected behavior is to use TAB to navigate to each individual FAQ item

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

• Multiple main landmarks used

• Main is nested within other landmark

• Sections / Regions are used instead of correct heading structure

Landmarks may be used for on page navigation by users of assistive technology and as such should follow best practices.

Navigation links use <a href="#"> instead of semantic button element. Observations:

• Improper use of href attribute

• Use of title attribute

• Multiple links have the same visible label "Mehr erfahren"; the first occurrence is in the "Sternstunde der Fotografie" slide in the hero section; as the visible label is e.g. used by users of speech recognition software, it is important to have unique link labels for every unique link target; using the same visible label implies the same link target

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Links use <a href=""></a><div><span>LINK TEXT</span></div> instead of labeling the link by its content.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

FAQ section cannot be operated (expand / collapse) by assistive technology as the interactive elements are custom built and do not use correct semantic HTML. The FAQ accordion uses an HTML description list <dl>. Example code:

<dt class="accordion__term" data-accordion="term" tabindex="0">
  <h3 class="accordion__title">...</h3>
</dt>
<dd
  class="accordion__description accordion__description--hidden"
  data-open-class="accordion__description--open"
  data-hidden-class="accordion__description--hidden"
  data-accordion="description"
>
  <div class="accordion__content">
    <p class="paragraph">...</p>
  </div>
</dd>

Observations about the example code:

• Description lists consist of terms and descriptions. An FAQ question item can not be considered a term.

• Setting tabindex="0" to allow keyboard focus of non-interactive element is bad practice and should be avoided

• data-* attributes in description try to build accordion functionality

• <div class="accordion__content"> is an unnecessary hierarchy level

• A CSS paragraph class <p class="paragraph"> should not ever be needed

Collapsible button uses <a href="#"> instead of semantic button element.

• "Die neuen PlusKarten im Vergleich"

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Device selection input elements use the same label and as such cannot be easily operated by assistive technology.

Device selection input elements use the same label and as such cannot be easily operated by assistive technology.

FAQ section cannot be operated (expand / collapse) by assistive technology as the interactive elements are custom built and do not use correct semantic HTML. The FAQ accordion uses an HTML description list <dl>. Example code:

<dt class="accordion__term" data-accordion="term" tabindex="0">
  <h3 class="accordion__title">...</h3>
</dt>
<dd
  class="accordion__description accordion__description--hidden"
  data-open-class="accordion__description--open"
  data-hidden-class="accordion__description--hidden"
  data-accordion="description"
>
  <div class="accordion__content">
    <p class="paragraph">...</p>
  </div>
</dd>

Observations about the example code:

• Description lists consist of terms and descriptions. An FAQ question item can not be considered a term.

• Setting tabindex="0" to allow keyboard focus of non-interactive element is bad practice and should be avoided

• data-* attributes in description try to build accordion functionality

• <div class="accordion__content"> is an unnecessary hierarchy level

• A CSS paragraph class <p class="paragraph"> should not ever be needed

FAQ section cannot be operated (expand / collapse) by assistive technology as the interactive elements are custom built and do not use correct semantic HTML. The FAQ accordion uses an HTML description list <dl>. Example code:

<dt class="accordion__term" data-accordion="term" tabindex="0">
  <h3 class="accordion__title">...</h3>
</dt>
<dd
  class="accordion__description accordion__description--hidden"
  data-open-class="accordion__description--open"
  data-hidden-class="accordion__description--hidden"
  data-accordion="description"
>
  <div class="accordion__content">
    <p class="paragraph">...</p>
  </div>
</dd>

Observations about the example code:

• Description lists consist of terms and descriptions. An FAQ question item can not be considered a term.

• Setting tabindex="0" to allow keyboard focus of non-interactive element is bad practice and should be avoided

• data-* attributes in description try to build accordion functionality

• <div class="accordion__content"> is an unnecessary hierarchy level

• A CSS paragraph class <p class="paragraph"> should not ever be needed

Buttons use <a href="#"> instead of semantic button element.

• Dialog windows "Ländergruppe"

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

• Tariff carousel pagination buttons use <span>

• FAQ item buttons use div role="button" instead of button element

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Changing radio selection in form will change the displayed tariff option cards. The content change is not announced to assistive technology.

Buttons use <a href="#"> or missing href attribute completely, instead of semantic button element.

• Dialog windows "Länderliste..."

• Dialog windows "Zum Wunschtermin buchen"

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

• Tariff carousel pagination buttons use <span>

• "Zum Wunschtermin buchen" dialog window buttons use <a>, omitting href attribute

• FAQ item buttons use div role="button" instead of button element

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

• Selection input element uses generic HTML elements instead of <select> element

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Navigating the form by assistive technology, leaving an input field in error state will announce the error to the assistive technology. In the scenario we are

• moving to the form by assistive technology,

• moving to the empty "Vorname" input field,

• leaving it empty and

• moving to the "Nachname" input field.

The "Vorname" input will error, announcing the error message "Vorname", "Bitte geben Sie Ihren Vornamen ein." – as the focus right now is already set to input "Nachname", but announcement is "Bitte geben Sie Ihren Vornamen ein.", users of assistive technology will inevitable send wrong data via the form.

Button "Preisübersicht anzeigen" in sidebar uses <a tabindex="0"> instead of semantic button element.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Elements include multiple buttons that do not use semantic button elements, including:

• "Farbe" button

• "Speichergröße" button

• Close button in "Handyankauf" dialog window

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Buttons using link elements and vice versa, Link elements without text. Link elements without href attribute, with empty href attribute or using href attribute not for link target.

Including:

• "Preisübersicht anzeigen"

• "Tarif ändern"

• "Tarif entfernen"

• "Zurück" in "Handyankauf" dialog window

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

"Aktionen Auswahl" tabs ("Mobilfunk" / "Internet & Festnetz") are not using semantically correct HTML elements.

Navigating the tabs by assistive technology, focussing a tab panel automatically reveals the tab's content, making it difficult for users of assistive technology to reach the first tab's content.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Observations:

• Handyankauf form

  • Step indicators use <button type="button" disabled> but are not buttons

  • CAPTCHA reload button uses span aria-hidden="true" instead of button element

  • "Wo finde ich die IMEI-Nummer" uses a href="#imei" title="..." instead of button element; side note, #imei is not found in DOM

    • Close button in dialog window uses <button type="button"> which is redundant and unnecessary

  • "Zurück" button use a href="#" title="Zurück" instead of button element

  • Info "i" icon buttons (step 3) use <span aria-hidden="true"><svg>... instead of semantic (accessible) button element

    • Close button in dialog window uses <button type="button"> which is redundant and unnecessary

  • "Wo finde ich die Angabe" uses a href="#imei" title="..." instead of button element; side note, #imei is not found in DOM

    • Close button in dialog window uses <button type="button"> which is redundant and unnecessary

  • "Prüfen" button uses <button type="button"> which is redundant and unnecessary

  • "Ohne Aktion fortfahren" button uses <button type="button"> which is redundant and unnecessary

  • "Anrede" dropdown uses span role="button" tabindex="0" ... and select id="..." name="title" (with non-unique id) instead of semantic input element

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

FAQ section cannot be operated (expand / collapse) by assistive technology as the interactive elements are custom built and do not use correct semantic HTML. The FAQ accordion uses an HTML description list <dl>. Example code:

<dt class="accordion__term" data-accordion="term" tabindex="0">
  <h3 class="accordion__title">...</h3>
</dt>
<dd
  class="accordion__description accordion__description--hidden"
  data-open-class="accordion__description--open"
  data-hidden-class="accordion__description--hidden"
  data-accordion="description"
>
  <div class="accordion__content">
    <p class="paragraph">...</p>
  </div>
</dd>

Observations about the example code:

• Description lists consist of terms and descriptions. An FAQ question item can not be considered a term.

• Setting tabindex="0" to allow keyboard focus of non-interactive element is bad practice and should be avoided

• data-* attributes in description try to build accordion functionality

• <div class="accordion__content"> is an unnecessary hierarchy level

• A CSS paragraph class <p class="paragraph"> should not ever be needed

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.