32 issues found on Smartphone Tarife

Page is

• child page of "Tarife" and

• closely connected to other Shop pages like "Alle Geräte".

All (or most) of issues in parent pages and sibling pages are also found on this page. Ensure, following global issues and page specific issues of parent pages and sibling pages closely. Remediation of this page is only done, when all parent pages, all sibling pages, and all global issues are remediated.

Please refer to global observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

The silhouette icon on the "Anmelden" button has no alt attribute. When the icon is considered decorative, as it arguably can be, the image must have a null alt attribute set to hide it from the accessibility tree.

The image uses "Pluskarte" as text alternative. The text content of the image alone is "Hauptkarte Unlimited = 1. PlusKarte Unlimited". The text beside it says "Durch Zubuchung mindestens einer PlusKarte für Erwachsene zum Hauptvertrag, erhalten ab dem Tarif MagentaMobil M alle Karten unbegrenztes Datenvolumen."

Those three (accessible alt attribute, image contents, description text) do not convey the same information, making the used text alternative for the image inequivalent to the image's purpose.

As this audit excludes the header area for testing, this test even has more vertical space available than the customer facing page.

Button text in "Weiter ohne Gerät" is not reflowing on small viewport.

Link text contrast ratio to background is 3.9:1 which is below the minimum ratio of 4.5:1.

Side note: while no failure of WCAG, please check font sizes of text content, especially for important information like legal documents.

This observation is set to priority 5 "Best Practice", so it is not considered a failure. As the full header section of the page is out of scope for this audit, the authentication process via "Anmelden" button cannot be tested in the scope of this audit. Thus, 3.3.8 Accessible Authentication (Minimum) is marked as "Not Evaluated".

• Tooltips in tariff carousel are not dismissible.

• Tooltips in tariff carousel are not (accessibly) hoverable. Hover is possible, when quickly and precisely moving the mouse cursor to the tooltip from the tooltip opening element. Moving "too slow", the tooltip is closed before reaching it.

Heading <h1> describes the tariff carousel but used as main heading, which should have the purpose of describing the whole page.

The toggle switch "Ich bin unter 28 Jahre alt" does not use semantic HTML elements for a toggle switch. The switch functions as a link. The markup does not reflect this.

• Presented as toggle switch

• Functions like a link

• Marked up without any interactive elements

Code for the link is:

<span class="co-ab_outerWrapper co-ab_outerWrapper--desktop">
  <span class="co-ab_ageToggleWrapper">
    <div class="co-ab_ageToggle_textWrapper">
      Ich bin unter 28 Jahre alt
      <div>&nbsp;</div>
    </div>
    <span class="co-ab_ageToggle_switchWrapper">
      <span class="co-ab_ageToggle_switchStyle"></span>
    </span>
  </span>
</span>

Footnote trigger (star icon) does not meet minimum target size.

Interactive elements must have a target size of at least 24×24px. Minimum target size is required also for single icon buttons, stand-alone interactive icons and links. When target size is smaller, it will make it difficult for people to reliably interact with the elements. This includes people with motor disabilities, people using devices like styluses, people in moving vehicles, and mobile users altogether. Especially considering its use inside other interactive elements (e.g. footnote in badge) or multiple small interactive elements next to each other (e.g. social icons in a list).

Open dialog windows can obscure focus of underlying interactive elements. Obscuring can be partial or complete. This will impact users of keyboard navigation as focus cannot be tracked while a dialog window is open. Dialog windows may be triggered by:

• Footnotes

• Info Icons

• Buttons

• Footnotes

• Info icon dialog windows

• Tarifdetails dialog window

• PlusKarte dialog window

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

• Opening a dialog window

• Expanding an accordion item

• Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

When opening a dialog window (e.g. via footnote or info icon), said dialog window does not receive keyboard focus. This leads to multiple issues:

• The contents of the dialog window are not accessible via keyboard.

• The dialog window can not be closed by keyboard (easily or at all).

• While the dialog window is open, keyboard navigation of the underlying page is still possible; the dialog window however blocks the view. (see also 2.4.11 Focus Not Obscured (Minimum))

• Since keyboard navigation stays possible, opening multiple dialog windows above each other also is possible.

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

• MagentaMobil Young

• Speedbox-Tarife

Image's text alternative duplicates visible text content.

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Functional images like images used as links, must have a text alternative that equivalently describes the purpose of the link.

Functional Images with non-equivalent text alternative:

• "Testsieger Siegel" images

Landmarks like named sections / regions should only be used rarely and for content that is not otherwise structured already. When a proper heading structure is in place, grouping the same content into a region as well does not provide any benefits navigating page structure.

As regions and headings both are announced by assistive technology, it can make navigating a page sequentially less pleasant to access, as it takes multiple clicks to move between items and content announcements are duplicated.

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Noch nie war wechseln so attraktiv
  h2 Wählen Sie Ihren Smartphone-Tarif
    h3 20 GB Datenvolumen
    h3 30 GB Datenvolumen
    h3 50 GB Datenvolumen
    h3 100 GB Datenvolumen
    h3 Unbegrenzt

  h2 Jetzt zum Testsieger wechseln
  h2 In unseren Handytarifen inklusive
    h3 Telefon- und SMS-Flat
    h3 Größtes 5G-Netz
    h3 HotSpot-Flatrate
    h3 EU-Roaming
  h2 Gute Gründe jetzt einzusteigen
    h3 Unbegrenztes Datenvolumen
    h3 MagentaEINS
    h3 Vorteile in der MeinMagenta App
    h3 Optional mit Wunschgerät
    h3 Rufnummernmitnahme
  h2 Weitere Tarife der Telekom entdecken
    h3 MagentaMobil Young
    h3 Speedbox-Tarife
  h2 Häufig gestellte Fragen zu den Handytarifen
    h3 ...

  <!-- sidebar -->
  h2 Vorteile im Überblick
    h3 Unbegrenztes Datenvolumen
    h3 MagentaEINS Vorteil

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 Wählen Sie Ihren Smartphone-Tarif
  h2 Change number of Karten für Erwachsene. Values between 1 and 6 are valid. 
  h2 Jetzt zum Testsieger wechseln
  h2 In unseren Handytarifen inklusive
    h3 Telefon- und SMS-Flat
    h3 Größtes 5G-Netz *
    h3 HotSpot-Flatrate
    h3 EU-Roaming
  h2 Gute Gründe jetzt einzusteigen
    h3 Gute Gründe jetzt einzusteigen 
    h3 Unbegrenztes Datenvolumen
    h3 MagentaEINS
    h3 Vorteile in der MeinMagenta App
    h3 Optional mit Wunschgerät
    h3 Rufnummernmitnahme
  h2 Weitere Tarife der Telekom entdecken
    h3 MagentaMobil Young
    h3 Speedbox-Tarife
  h2 Häufig gestellte Fragen zu den Handytarifen
    h3 Vorteile im Überblick
      h4 Unbegrenztes Datenvolumen
      h4 MagentaEINS Vorteil

Observations for heading structure:

• Visual main heading in main stage "Noch nie war wechseln so attraktiv" is not using main heading <h1> element or any other HTML heading element for that matter

• Arguably most important content of Smartphone-Tarife page –the tariff cards– do not use heading elements

• Hidden headings found

  • Change number of Karten für Erwachsene. Values between 1 and 6 are valid.

  • Gute Gründe jetzt einzusteigen (<h3>), duplicating preceding <h2>

• Sections "In unseren Handytarifen inklusive" and "Gute Gründe jetzt einzusteigen" use subsequent headings for shot form content that might better be defined as list content

• Sections "Jetzt zum Testsieger wechseln", "In unseren Handytarifen inklusive", "Gute Gründe jetzt einzusteigen" could be grouped as "Vorteile" to more broadly structure page content

• Sidebar content is not grouped via <h2> heading and as such might be seen as content of "Häufig gestellte Fragen zu den Handytarifen"

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

FAQ section:

• Empty paragraph after section heading

• Improper use of line breaks in FAQ item "Worauf sollte ich bei meinem neuen Handytarif achten?"

• Table content in FAQ item "Was verbraucht am meisten Datenvolumen?" displayed by use of non breaking spaces: <li><strong>Serienstreaming</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ... 1 Stunde</li>

"Tarifdetails" / "Jetzt zur Telekom wechseln" dialog windows:

• Extensive use of line break elements

• Use of <strong> elements for heading content

• Info icon dialog window

  • Use of line breaks

  • Use of <b> to emphasize text content

  • Use of emphasis for heading content

"PlusKarte" dialog window uses headings:

    h3 Jetzt mit der PlusKarte unbegrenztes Datenvolumen sichern:
        h5 Die PlusKarte ist eine zusätzliche Karte zu einem aktuellen MagentaMobil Vertrag mit eigener Rufnummer und eigenem Datenvolumen in derselben Höhe wie das der Hauptkarte.   So einfach geht’s: MagentaMobil Hauptkarte aussuchen MagentaMobil M oder L auswählen PlusKarte für 19,95 € hinzufügen Entweder direkt hier, indem Sie oben mehr als eine Karte auswählen, oder im Warenkorb Unbegrenzt surfen Mit ausgewählten Karten deutschlandweit unbegrenztes Datenvolumen nutzen. Im Nachgang können noch weitere PlusKarten+, PlusKarten Kids und Teens sowie PlusKarten Data dazugebucht werden, die ebenfalls vom unbegrenzten Datenvolumen profitieren.

Observations:

• Skipped heading level

• Heading extremely long

• Heading includes whole body copy

Links solely rely on color to be differentiated from other, surrounding text content and color contrast ratio of link text color to surrounding text color does not meet minimum required 3:1 color contrast ratio. Links, relying on color only and with insufficient color contrast ratio to surrounding text content include:

• link "Preisliste, Leistungsbeschreibung und AGB" in tariff cards

• link "Telekom Netz" in 5G Netz dialog window

• links in "Tarifdetails" dialog windows

On base viewport size of 320×256px and page zoom of 100%,

• the available vertical space, as soon as tariff carousel is displayed, is just 75px.

• tool tips content cannot be reached

Text content in certain containers may overflow the container's boundaries, when text spacings are changed, making some text harder, other text impossible to perceive. This often includes:

• Stage areas

• Badges

• Manually outlined elements like buttons (e.g. footnote icon buttons)

• Teasers

• Card components

Magenta text on magenta background has contrast ratio of 4.3:1 which does not meet color contrast ratio minimum of 4.5:1 for text content.

On base viewport size of 1024×768px and page zoom of 200%, the available:

• vertical space in the tariff carousel, is 400px.

• horizontal space, due to page zoom, is limited and cuts of hover tooltips

All content must be presented without loss of information or functionality.

In tariff carousel, keyboard focus is trapped after selecting tariff. Following these steps:

1. Press TAB until tariff carousel is focused

2. Press ARROW LEFT / RIGHT to focus tariff

3. Press ENTER to select focused tariff

4. Pressing TAB now will rotate within tariff card

Shop Pages are repeating certain content blocks. Depending on shop page:

• Breadcrumb navigation

• Optional product highlights

• Product group navigation

• Main heading and description

• Filtering and sorting mechanisms

• Product list

• Side bar with payment information and offer details

• SEO content/landing page content, including FAQ section

• Direkteinstiege

Those parts are not correctly identifiable by common mechanisms like landmarks (only main landmark used) or heading structure (only main heading and headings in optional landing page/SEO content). Reaching certain parts of the page is made very difficult for users of keyboard or other assistive technology like screen readers.

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.

Text content "Anmelden" in button "Anmelden" uses <text-replacer tabindex="0"> making text content focusable, while surrounding button already can be focused and interacted with. The button markup looks as follows:

<button class="...">
  <span class="...">
    <span class="...">
      <div class="...">
        <div class="...">
          <img class="..." 
               src="....svg" 
               data-img="...">
          <div class="...">
            <svg width="..." height="..." viewBox="..." fill="none" xmlns="...">...</svg>
          </div>
        </div>
      </div>
      <span>
        <text-replacer data-id="..." 
                       style="..." 
                       tabindex="0">
          <span style="...">Anmelden</span>
        </text-replacer>
      </span>
    </span>
  </span>
</button>

Nesting focusable elements like this will make assistive technology focus all elements in sequence, adding duplication without added information.