Page URL
https://www.telekom.de/shop/tarife

Issues List

Page Notes and General Remarks
Non-text Content 1.1.1 (A)
Image is missing alt attribute
Info and Relationships 1.3.1 (A)
Heading's visual presentation does not match code markup
Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
Contrast (Minimum) 1.4.3 (AA)
Link text (blue) on grey background does not meet minimum contrast
Reflow 1.4.10 (AA)
Content requires two-dimensional scrolling on small viewports
Keyboard 2.1.1 (A)
FAQ not accessible via keyboard
Link Purpose (In Context) 2.4.4 (A)
Content card link purpose not determinable
Focus Visible 2.4.7 (AA)
Primary buttons' focus not visible
Focus Visible 2.4.7 (AA)
Content Cards' focus partially visible
Pointer Gestures 2.5.1 (A)
Content cards can only be operated by dragging motion on mobile
Name, Role, Value 4.1.2 (A)
Interactive element uses wrong semantic HTML
Name, Role, Value 4.1.2 (A)
Interactive element uses non-semantic HTML
Priority: Critical Significant Page: Tarife Observation Permalink
Observation Details

Page is

  • 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.

Priority: Serious Low Page: Tarife Observation Permalink
Accompanying Files
Observation Details

Primary buttons are focusable but focus is not visible.

Remediation Notes

Ensure, a visible focus state exists for all interactive elements, including buttons. Ideally, focused buttons have a visible outline set.

Priority: Moderate Low Page: Tarife Observation Permalink
Accompanying Files
Observation Details

Content cards are focusable but focus is only partially visible. Depending on which card is focused, different sides of the focus outline are obscured.

Remediation Notes

Ensure, a visible focus state exists for all interactive elements, including the content cards. Ideally, focused buttons have a visible outline set that is not obscured and goes all around the focused element.

Priority: Moderate Medium Page: Tarife Observation Permalink
Accompanying Files
Observation Details

The content card link is empty, resulting in a null accessible name. As such it is announced only as "link" to assistive technology.

As the content cards are not semantically structured e.g. by using <article> for the whole card, a clear heading structure, etc., there is no programmatically determinable context that makes the link purpose clear to the user.

Interactive, focusable elements like links must have an accessible name. The name should state the link's purpose. If not directly, it must be determinable by context.

Remediation Notes

Ensure, link purpose is determinable. Ideally, a proper semantic structure on content card is used. As the base structure is already visually presented as such a card, consider the following structure:

<nav aria-labelledby="heading-tariff-list">
  <h2 id="heading-tariff-list">Alle Tarifgruppen im Überblick</h2>
  
  <ul>
    <!-- Content Card -->
    <li>
      <article class="card">
        <div>
          <h3 id="heading-TARIFF">TARIFF GROUP NAME</h3>
          <p>TARIFF DESCRIPTION</p>
          <a href="..." id="link-TARIFF">Zu den TARIFF GROUP-Tarifen</a>
        </div>
        <div style="order:-1;">
          <img src="..." alt="PROPER TEXT ALTERNATIVE" />
        </div>
      </article>
    </li>

    <!-- More Cards -->
  </ul>
</nav>

Setting up the link with a pseudo element like this:

.card a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

And the card itself with:

.card { 
  position: relative; 
}

/* Add focus state to card when link WITHIN is focused */
.card:focus-within,
.card:hover {
  outline: 2px solid magenta;
  box-shadow: 8px 8px black;
}

/* Remove focus outline from link */
.card:focus-within :focus {
  outline: none;
}

Will make the card be focus visible, while the link in it still is the focused element with the correct accessible name.


Ensure, adding proper text alternative to the images.

Priority: Moderate Low Page: Tarife Observation Permalink
Accompanying Files
Observation Details

Visually presented, we can identify the following heading structure:

1 Alles rund um die Telekom Tarife
  2 MagentaMobil
  2 MagentaZuhause
  2 MagentaTV
  2 MagentaEINS
  2 MagentaMobil Prepaid
  2 Young Tarife
  2 Glasfaser-Tarife
  2 MagentaMobil Data
  2 Zusatzkarten
  2 Häufig gestellte Fragen zu unseren Telekom Tarifen
    3 Telekom Tarife
      4 Was ist der billigste Tarif der Telekom?
      4 Welche Telekom Tarife sind am beliebtesten?
      4 Welcher Telekom Vertrag ist der beste?
      4 Was ist das Besondere bei Telekom Tarifen?

The code markup however shows the actual heading structure to be:

1 Telekom Tarife
  2 Alles rund um die Telekom Tarife
    3 MagentaMobil
      4 Mit den Telekom Tarifen ...
    3 MagentaZuhause
      4 Bequem zu Hause im Festnetz ...
    3 MagentaTV
      4 Erleben Sie Entertainment zu Hause und unterwegs ...
    3 MagentaEINS
      4 Kombinieren Sie ganz einfach Ihre Telekom Tarife ...
    3 MagentaMobil Prepaid
      4 Sie möchten unbeschwert telefonieren und surfen, ...
    3 Young Tarife
      4 Mit den Telekom Tarifen für junge Leute ...
    3 Glasfaser-Tarife
      4 Mit den Telekom Tarifen für Glasfaser ...
    3 MagentaMobil Data
      4 Wenn Sie Tablet oder Laptop ...
    3 Zusatzkarten
      4 Haben Sie bereits einen Telekom Tarif ...
  2 Häufig gestellte Fragen zu unseren Telekom Tarifen
    3 Was ist der billigste Tarif der Telekom?
    3 Welche Telekom Tarife sind am beliebtesten?
    3 Welcher Telekom Vertrag ist der beste?
    3 Was ist das Besondere bei Telekom Tarifen?
Remediation Notes

Ensure, visual presentation matches the code markup and proper heading nesting is done.

Short: only what is an actual heading (using semantic HTML element) should be visually presented as such. And everything that is visually presented as a heading must be an actual heading.

Approach to better heading structure / outline, grouping the tariff group cards under a new <h2> heading.

p Telekom Tarife

1 Alles rund um die Telekom Tarife
  2 Alle Tarifgruppen im Überblick
    3 MagentaMobil
      p Mit den Telekom Tarifen ...

    3 MagentaZuhause
      p Bequem zu Hause im Festnetz ...

    3 MagentaTV
      p Erleben Sie Entertainment zu Hause und unterwegs ...

    3 MagentaEINS
      p Kombinieren Sie ganz einfach Ihre Telekom Tarife ...

    3 MagentaMobil Prepaid
      p Sie möchten unbeschwert telefonieren und surfen, ...

    3 Young Tarife
      p Mit den Telekom Tarifen für junge Leute ...

    3 Glasfaser-Tarife
      p Mit den Telekom Tarifen für Glasfaser ...

    3 MagentaMobil Data
      p Wenn Sie Tablet oder Laptop ...

    3 Zusatzkarten
      p Haben Sie bereits einen Telekom Tarif ...

  2 Häufig gestellte Fragen zu unseren Telekom Tarifen
    p Telekom Tarife

    3 Was ist der billigste Tarif der Telekom?
    3 Welche Telekom Tarife sind am beliebtesten?
    3 Welcher Telekom Vertrag ist der beste?
    3 Was ist das Besondere bei Telekom Tarifen?

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


When remediating, please also refer to observation "Content card link purpose not determinable" (2.4.4 Link Purpose (In Context)), where remediation recommends the use of proper card structure, as those work in tandem.

Priority: Serious Low Page: Tarife Observation Permalink
Accompanying Files
Observation Details

Link text (blue) on grey background has contrast ratio of 3.9:1 which does not meet color contrast ratio minimum requirements of 4.5:1.

See links in FAQ section panels.

Remediation Notes

Ensure, all text content meets required contrast minimum of 4.5:1 for all text content with font size <24px and 3:1 for all text content with font size ≥24px.

Side Note: this success criterion is not about identification of links. When a link would have no underline and its color is the only way to differentiate from surrounding text, it is considered a failure under 1.4.1 Use of Color. This is not the case here. This criterion is for all text content.

Priority: Serious Low Page: Tarife Observation Permalink
Observation Details

Testing for WCAG 1.4.10 with viewport set to 320×256px and page zoom set to 100%.

The "content cards" are grouped in rows which overflow the viewport and require two-dimensional scrolling. Content must reflow on smaller viewports to not require two-dimensional scrolling.

Remediation Notes

Ensure proper reflow of content on smaller viewports. Ideally, content reflows responsively based on available space. This can be achieved by a setup like this:

.grid {
  --min-item-width: 200px;
  --grid-gap: 1rem;

  display: grid;
  grid-gap: var(--grid-gap);
}

@supports (width: min(var(--min-item-width), 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-item-width), 100%), 1fr));
  }
}

Note: remediating this issue, please be aware of changes to the "content cards" in other observations as well. Please refer to observation "Content card link purpose not determinable" (2.4.4 Link Purpose (In Context)) for more information.

Priority: Critical Low Page: Tarife Observation Permalink
Observation Details

FAQ section cannot be reached by keyboard navigation as the interactive elements are custom built and do not use correct semantic HTML.

Remediation Notes

Ensure, using correct semantic HTML elements for all interactive elements. In case of accordions, these could be <detail> and <summary> constructs or ones with <button> as the accordion item "header".

Keyboard navigation is a must.

For custom building an accessible accordion component, please refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion".

Priority: Serious Low Page: Tarife Observation Permalink
Observation Details

The content cards can only be operated by horizontal scroll or by dragging movement on smaller viewports / mobile. As the dragging needs a base precision to stop the movement at the right time to reach the wanted content card, a single pointer alternative for operation / navigation must be offered.

Remediation Notes

Possible methods to remediate and to ensure access to the links:

  • Adding pagination (single pointer arrow buttons)

  • Reflow to multiple lines (also see 1.4.10 Reflow)

Note, that the WCAG, and success criterion 2.5.7 Dragging Movements specifically, do not require presentation / layout parity of different devices, viewports, etc. This means, while functionality and information parity is a must, the layout and presentation can be different.

Priority: Critical Low Page: Tarife Observation Permalink
Accompanying Files
Observation Details

The HTML image element must always use have alt attribute present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

  • All images in cards (see classes dt_mainImage, dt_column_content_item)

Remediation Notes

Ensure, all HTML image elements properly set the alt attribute. Depending on the purpose of the image, choose whether to declare an image decorative, informative, or functional. For more guidance in choosing, refer to the W3C Alt-decision tree.

If the image is

  • purely decorative, set a null alt attribute as follows: <img alt="" />

  • not purely decorative, the alt attribute must not be null

Priority: Moderate Low Page: Tarife Observation Permalink
Observation Details

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".

Semantic elements:

  • <p>&nbsp;</p>

  • <br>

  • ...

Non-semantic empty elements:

  • <div>&nbsp;</div>

  • <div class="leftFade"></div>

  • <div class="rightFade"></div>

  • ...

Remediation Notes

Ensure proper use of semantic HTML.

  • Semantic elements must not solely be used for styling or layout purposes

  • All styling and layout changes must use CSS

  • Limit use of line breaks to intended purposes, e.g. in poetry or code snippets

Priority: Critical Medium Page: Tarife Observation Permalink
Observation Details
  • 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.

Remediation Notes
  • Only use <button> for buttons

  • Use <a href=""> for links


Using non-native, non-semantic HTML elements to build functionality, native, semantic HTML elements already provide should be a rare occasion. As the first rule of ARIA use describes, if there is a semantic HTML with needed or wanted functionality this should always be used instead of ARIA.

Ensure, semantic HTML elements are used for all interactive elements and components. Refer to BFIT-Bund Handreichung "Accessible design of user interface elements" for technical requirements for building interactive user interface components.

Priority: Critical Medium Page: Tarife Observation Permalink
Observation Details

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.

Remediation Notes

Ensure, using semantic HTML elements to build accordion functionality.


Using non-native, non-semantic HTML elements to build functionality, native, semantic HTML elements already provide should be a rare occasion. As the first rule of ARIA use describes, if there is a semantic HTML with needed or wanted functionality this should always be used instead of ARIA.

Ensure, semantic HTML elements are used for all interactive elements and components. Refer to BFIT-Bund Handreichung "Accessible design of user interface elements" for technical requirements for building interactive user interface components.