Page URL
https://www.telekom.de/sport

Issues List

Non-text Content 1.1.1 (A)
"EM" image does not have purpose equivalent text alternative
Non-text Content 1.1.1 (A)
Functional images (sports league logos) do not have purpose equivalent text alternative
Non-text Content 1.1.1 (A)
Decorative images have determinable text alternative
Info and Relationships 1.3.1 (A)
Headings do not use semantic HTML heading elements
Info and Relationships 1.3.1 (A)
Visual presentation of elements does not match code markup
Info and Relationships 1.3.1 (A)
Improper use of semantic HTML list elements
Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
Keyboard 2.1.1 (A)
Sports channel selection not keyboard accessible
Keyboard 2.1.1 (A)
Footnote dialog window does not receive keyboard focus on open
Pause, Stop, Hide 2.2.2 (A)
Animated arrows cannot be paused, stopped, hidden
Focus Order 2.4.3 (A)
"Empfehlung ansehen" link in pop-up is out of order
Focus Order 2.4.3 (A)
User-activated dynamic content not in correct focus order
Link Purpose (In Context) 2.4.4 (A)
Tariff option "Mehr Infos" links' purpose not determinable
Link Purpose (In Context) 2.4.4 (A)
Link texts in FAQ section do not provide simple access to link purpose
Focus Visible 2.4.7 (AA)
"Empfehlung ansehen" link focusable but focus not visible
Focus Not Obscured (Minimum) 2.4.11 (AA)
Activated dialog window (footnotes) obscure element focus
Target Size (Minimum) 2.5.8 (AA)
Interactive element does not meet minimum target size
Name, Role, Value 4.1.2 (A)
Sports channel images used as buttons, announced as images
Name, Role, Value 4.1.2 (A)
"Empfehlung" badge in tariff options section used as but not using live region
Priority: Moderate Low Page: Sport Observation Permalink
Accompanying Files
Observation Details

The animated arrows in the stage area cannot be paused, stopped, hidden. All animations >5 seconds must have the mechanism available.

Side note: While not part of this criterion, it is best practice to honor user preferences. During testing, prefers-reduced-motion settings were applied, but all animations on the site still working.

Remediation Notes

The easiest fix for this criterion's failure observation is to limit all animation to <5 seconds. This way the animation is excluded from the criterion's requirements.

For more complex animations, a mechanism to pause, stop, hide (e.g. pause button) is another solution.

Best Practice: All moving content could have a static version which is used as the default. If and only if prefers-reduced-motion is not set, animations should be added as progressive enhancements.

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

The pop-up window with "Empfehlung ansehen" link (element 15 in screenshot) is focused after the options (elements 3-14 in screenshot). The link is focusable, even if no selection is made and no "Empfehlung" was set. The "Empfehlung" is set when selecting elements in "Welchen Sport wollen Sie live bei MagentaTV sehen?".

Remediation Notes

The link "Empfehlung ansehen" should be in order after selecting sports channels, not after the tariff options.

The link should not be focusable at all when there is no selection made before.

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

The tariff options in section "Die Sportoptionen im Überblick" use "Mehr Infos" links. The links' purpose cannot be determined in a simple way, as the links' accessible names are not enriched, not is the visual context determinable programmatically via surrounding paragraph text or accurate heading structure.

Link purpose must be determinable either directly (AAA criterion) or at least with given code context.

Remediation Notes

When a generic "Mehr Infos" link is used, ensure the link purpose can be determined by its context. For a button style link as used here, the context would be the most recent heading that should describe the sections topic. In this case, the "tile" (card) should use a semantic HTML heading element to describe the content's purpose, thus providing enough context to determine the "Mehr Infos" link's purpose as well.

As links can be displayed in a "link list" (e.g. Screen reader macOS VoiceOver → Rotor) or navigated in order from link to link, ideally each link with unique link target has a unique accessible name.

As a last resort, this can be done by using ARIA attributes like aria-labelledby to use the card's heading to provide a unique accessible name like "Mehr Infos zur MegaSport 12M Option".

Priority: Best Practice Low Page: Sport Observation Permalink
Observation Details

While this is not a failure of this criterion, it is a usability issue to have link texts that not directly include the link's purpose. In the FAQ section "Häufig gestellte Fragen rund um Sport bei MagentaTV", the following link texts are present:

  1. www.magentasport.de → The link target URL should no be used as link text as it duplicates the information of the link target.

  2. MagentaTV

  3. MagentaTV Stick

  4. Hier

  5. hier

Links 2-5 are using one or two word link texts which forces the user to rely on link context to determine the purpose of the link. If a link's purpose can be determined by direct context (e.g. a single-word link text within a single sentence) it is no failure of this success criterion. If however the purpose cannot be easily determined by the context, it is seen as a failure. Arguably, a long paragraph is not enough context to pass this criterion, as to determine the link purpose, a user of assistive technology would ideally need to perceive the full paragraph (again).

Another issue arises, as screen readers will announce text parts but "stop" with changes within the paragraph. If a single-word link is used within a sentence, the user must click through to the next element like this:

Eine Alternative bietet der [CLICK]
MagentaTV [CLICK]
Anschluss der Telekom, den Sie zum Empfang von MagentaSport nutzen können.
Remediation Notes

By using full sentence link texts within paragraphs, a user of assistive technology can easily determine the link's purpose. The user can also do so without clicking ahead on each HTML element change. A possible change would be from the original

Hier können Sie püfen, ob Sie bereits einen Telekom Login haben, oder Sie können sich auch ohne Telekom-Vertrag einen neuen Telekom Login anlegen.

to an alternative version of

Hier können Sie püfen, ob Sie bereits einen Telekom Login haben, oder Sie können sich auch ohne Telekom-Vertrag einen neuen Telekom Login anlegen.

This will provide the link purpose within a single announcement of assistive technology without the need to click ahead, remember contents before or after the link or re-listen to whole paragraphs of text.

A link like

Streaming: Streamen Sie einfach das Programm über die MagentaSport App, den MagentaTV Stick, den Amazon Fire TV Stick oder Apple TV. Oder alternativ über Google Chromecast oder Apple Airplay.

could be moved to the end of the list item to achieve the same user experience

Streaming: Streamen Sie einfach das Programm über die MagentaSport App, den MagentaTV Stick, den Amazon Fire TV Stick oder Apple TV. Oder alternativ über Google Chromecast oder Apple Airplay. Hier erfahren Sie mehr über den MagentaTV Stick und passende Tarife.

Priority: Critical Low Page: Sport Observation Permalink
Observation Details

The "Empfehlung ansehen" link is focusable by keyboard navigation. The pop-up window showing the link however just becomes visible after a selection of sports channels. As is, the focus is not visible.

Remediation Notes

Focus of all interactive elements must be visible. The "Empfehlung ansehen" pop-up and link must not be focusable while no "Empfehlung" is set. When focused, the pop-up must be visible for the focused link to be visible as well.

Side note: The pop-up also disappears on scroll, even when the link inside is focused. This is another issue that should be fixed at the same time. See e.g. "UK.GOV Design System – Notification Banner" as an idea.

Priority: Serious High Page: Sport Observation Permalink
Observation Details

Opening a footnote dialog window can obscure underlying focused elements (partially AND completely).

Since the dialog window cannot be closed via ESC in that situation, the underlying element cannot be made visible without removing the keyboard focus from it.

Remediation Notes

Dialog windows must be made accessible. They must trap the keyboard focus when opened and must not allow scrolling of the page and focusing of underlying interactive elements. This will remediate the obscuring of focused elements.

Priority: Serious Medium Page: Sport Observation Permalink
Accompanying Files
Observation Details

The sports league logos in section "Welchen Sport wollen Sie live bei MagentaTV sehen?" do not have purpose equivalent text alternatives set. The images use the league names as accessible names. As the images are used as interactive elements, they are used as functional images, making the function of the interactive element the purpose of the image. Simply naming the sports league does not describe the element's function accurately.

Remediation Notes

Purpose equivalent text alternative to a functional image is the description of the function of the image. As the images are used as "Select / Deselect" buttons for user's choice, answering the question "Welchen Sport wollen Sie live bei MagentaTV sehen?", a more appropriate text alternative would be "[Bundesliga] hinzufügen / entfernen".

The construct has more issues, which should be remediated together. As the section is used as a selection form, proper form structure with fieldset, checkboxes for inputs (rather than buttons with switch role) and the images as the input field's label, would create a more usable and accessible experience. The base construct could look like this:

<div>
  <fieldset aria-describedby="sports-hint">
    <legend>
      <h2>
        Welchen Sport wollen Sie live bei MagentaTV sehen?
      </h2>
    </legend>
    <div id="sports-hint">
      Wählen Sie alle zutreffenden Optionen
    </div>

    <div>
      <div>
        <input id="sports-1" name="sports" type="checkbox" value="bundesliga">
        <label for="sports-1">
          <img src="..." alt="Bundesliga" />
        </label>
      </div>
      <div>
        <input id="sports-2" name="sports" type="checkbox" value="bundesliga2">
        <label for="sports-2">
          <img src="..." alt="2. Bundesliga" />
        </label>
      </div>
      <div>
        <input id="sports-3" name="sports" type="checkbox" value="bundesliga3">
        <label for="sports-3">
          <img src="..." alt="3. Liga" />
        </label>
      </div>

      ...
    </div>
  </fieldset>
</div>
Priority: Moderate Low Page: Sport Observation Permalink
Accompanying Files
Observation Details

Decorative images must use a null alt attribute to hide them from assistive technology. The icons in section "Die Sportoptionen im Überblick" have non-null alt attributes set, despite being decorative. The icons are decorative, as they duplicate already determinable text content. "MEGA Sport" → "MegaSport 12M Option", etc.

Remediation Notes

Hide decorative images by using a null alt attribute (alt="").

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

The image for section "Mehr EM ging nicht!" duplicates the heading as text alternative by using alt="Mehr EM ging nicht!". The text alternative does not equivalently describes the image's purpose.

Remediation Notes

The image is informative. As such, it is most appropriate to describe its contents to accurately convey its purpose. Instead of duplicating the section heading, a better alternative could be "Die Spanische Fußball-Nationalmannschaft der Männer feiert nach dem Finalsieg mit dem Pokal. Es fliegt Konfetti."

Priority: Serious Low Page: Sport Observation Permalink
Observation Details
  • The page uses HTML list elements for non-list content. See class="container-grid--list". E.g. stage section with main heading.

  • On the other hand, what is arguably list content in the "Die Sportoptionen im Überblick" section, is not using semantic list elements.

Remediation Notes

Do not use semantic lists for non-list content. But do use semantic list for all list content.

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

Priority: Critical Low Page: Sport Observation Permalink
Observation Details

Content, used as headings, is not using semantic HTML heading elements. Content that does use semantic HTML heading elements then is not used as headings. This mismatch renders the page completely inaccessible and unusable for certain people.

The perceived visual heading structure of the page is:

h1 Live-Sport bei Magenta TV
  h2 Welchen Sport wollen Sie live bei MagentaTV sehen?
  h2 Die Sportoptionen im Überblick
    h3 MegaSport 12M Option
    h3 WOW Live-Sport by Telekom 12M Option
    h3 DAZN by Telekom Option
    h3 MagentaSport
  h2 Mehr EM ging nicht!
  h2 Das Telekom Sport-Angebot: Fußball, Eishockey & mehr
  h2 Häufig gestellte Fragen rund um Sport bei MagentaTV
    h3 Was beinhalten die Telekom Sport-Angebote auf MagentaTV?
    h3 Wie funktioniert Sport bei der Telekom?
    h3 Wie kann ich die Sport-Inhalte der Telekom empfangen?
    h3 Muss ich Telekom Kunde sein?
    h3 Was ist der Telekom Login?

The code structure however removes all essential functionality of the page, only keeps "SEO content" with FAQ section and even uses a heading element for body copy.

h1 Das Telekom Sport-Angebot: Fußball, Eishockey & mehr
  h2 Erleben Sie Ihre Lieblingssport-Inhalte jederzeit und überall. 
     Der ganze Live-Sport von WOW, DAZN und MagentaSport an einem Ort mit MagentaTV.
  h2 Häufig gestellte Fragen rund um Sport bei MagentaTV
    h3 Was beinhalten die Telekom Sport-Angebote auf MagentaTV?
    h3 Wie funktioniert Sport bei der Telekom?
    h3 Wie kann ich die Sport-Inhalte der Telekom empfangen?
    h3 Muss ich Telekom Kunde sein?
    h3 Was ist der Telekom Login?
Remediation Notes

Ensure proper heading structure. Every element and only those elements, used as a heading visually must use semantic HTML heading elements. A recommendation for proper page structure by headings would be:

h1 Live-Sport bei Magenta TV
  h2 Welchen Sport wollen Sie live bei MagentaTV sehen?
    <!-- optional -->
    h3 Fußball
    h3 Basketball
    h3 Eishockey
    h3 Weiterer Sport
  h2 Die Sportoptionen im Überblick
    h3 MegaSport 12M Option
    h3 WOW Live-Sport by Telekom 12M Option
    h3 DAZN by Telekom Option
    h3 MagentaSport
  h2 Mehr EM ging nicht!
  h2 Häufig gestellte Fragen rund um Sport bei MagentaTV
    h3 Was beinhalten die Telekom Sport-Angebote auf MagentaTV?
    h3 Wie funktioniert Sport bei der Telekom?
    h3 Wie kann ich die Sport-Inhalte der Telekom empfangen?
    h3 Muss ich Telekom Kunde sein?
    h3 Was ist der Telekom Login?

Section "Das Telekom Sport-Angebot: Fußball, Eishockey & mehr" as it only contains a single paragraph without any new information, should be skipped in here.

Priority: Critical Medium Page: Sport Observation Permalink
Observation Details

When opening a footnote dialog window, the keyboard focus is not set to said dialog window. This leads to multiple issues:

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

  • The dialog window can not be closed with the 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.

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

Remediation Notes

Opening a dialog window with the keyboard must set the focus into the dialog window. Preferably onto the close button as the first interactive element in the dialog window. The focus must also be trapped inside the dialog window so the underlying page cannot be reached by keyboard while the dialog window is opened.

A better approach would be to use a <dialog> element for dialog windows.

Priority: Critical Low Page: Sport Observation Permalink
Observation Details

The selection of sports channels in section "Welchen Sport wollen Sie live bei MagentaTV sehen?" is not accessible by keyboard navigation. Depending on classification of page purpose, the selection of sports channels, leading to the recommendation of a tariff option ("Empfehlung" system) is a main function of the page. Having this function not available to keyboard users is a crucial error.

The interactive elements for the sports channel selection do not use semantic HTML structure and trying to rebuild functionality with non-interactive or with different interactive elements. E.g. a button element is used with a switch role to mimic functionality of a checkbox.

Remediation Notes

Ensure keyboard navigation is possible by using proper semantic HTML elements. For checkbox functionality for channel images, use base structure of

<div>
  <fieldset aria-describedby="sports-hint">
    <legend>
      <h2>
        Welchen Sport wollen Sie live bei MagentaTV sehen?
      </h2>
    </legend>
    <div id="sports-hint">
      Wählen Sie alle zutreffenden Optionen
    </div>

    <div>
      <div>
        <input id="sports-1" name="sports" type="checkbox" value="bundesliga">
        <label for="sports-1">
          <img src="..." alt="Bundesliga" />
        </label>
      </div>
      <div>
        <input id="sports-2" name="sports" type="checkbox" value="bundesliga2">
        <label for="sports-2">
          <img src="..." alt="2. Bundesliga" />
        </label>
      </div>
      <div>
        <input id="sports-3" name="sports" type="checkbox" value="bundesliga3">
        <label for="sports-3">
          <img src="..." alt="3. Liga" />
        </label>
      </div>

      ...
    </div>
  </fieldset>
</div>

The accordion functionality (expanding/collapsing sports categories) could be built with a <details> & <summary> construct. For more information about accordions, you can also see BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion" and "GOV.UK Design System – Accordion"

By using existing semantic HTML elements instead of rebuilding functionality with generic elements, keyboard navigation can be ensured.

Priority: Critical Medium Page: Sport Observation Permalink
Accompanying Files
Observation Details

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.

Remediation Notes

Ensure accessibility for assistive technology by using existing semantic HTML element structure. Ideally, use a form structure as outlined in observation "Sports channel selection not keyboard accessible" (2.1.1 Keyboard). For more immediate fixes, these recommendations can be followed:

  • Instead of using <button>...</button><label>...<img ... />...</label>, use the button's property of getting its accessible name from its content and move the image into it like <button><img alt="Bundesliga hinzufügen" /></button>

  • Instead of buttons, use checkboxes with their property of providing a checked / unchecked state function without the need of using aria-checked, manually setting role="switch", etc.

Priority: Critical High Page: Sport Observation Permalink
Accompanying Files
Observation Details

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.

Remediation Notes

Use of ARIA live regions can remediate this issue. For information about ARIA live regions, refer to "MDN docs – Guides – ARIA live-regions", "GOV.UK Design System – Notification banner", and "dequeUniversity – Live Region Playground".

A few remarks about ARIA live regions:

  • Basis of an ARIA live region is an empty container that must exist on page load. Adding a container later on will not work with ARIA live regions.

  • As the change, happening on this page, is not an alert, the ARIA role="status" should be used to implicitly set aria-live="polite"

  • Do not announce every change; this can be done by setting a timeout on announcements, so a user clicking multiple image buttons is not interrupted on every click


Most of the time there also is a "work-around" for ARIA live region use-cases. ARIA live regions can solve the problem of unwanted, unexpected, and inaccessible content changes. On this page, the selection in one section, leads to a different tariff option to be recommended as "Empfehlung".

Easier than a live region structure would be a change of method altogether. Some possible ways to accommodate the functionality:

  • A form structure, showing the possible (and recommended) tariff option after submit

  • Tabular data of what sports channels / leagues are included in which tariff option

  • A hint / description at the beginning of the selection section, informing the user of possible changes, like "Wählen Sie alle Ligen(?), für die Sie sich interessieren. Je nach Auswahl empfehlen wir eine andere Sportoption, die Sie unter 'Die Sportoptionen im Überblick' finden können". This way, the content changes become expected and there is no need to announce every change after each click

Priority: Moderate Low Page: Sport Observation Permalink
Accompanying Files
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".

  • Line break elements found in FAQ item "Was beinhalten die Telekom Sport-Angebote auf MagentaTV?"

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; for all other purposes, use actual paragraph elements

Priority: Critical Significant Page: Sport Observation Permalink
Accompanying Files
Observation Details

Elements found:

  • <b> for emphasized text content


These mis-matches happen with improper use of semantic HTML or lack thereof. Content, visually presented in a certain way, communicating certain purpose or functionality, uses mis-matched HTML elements.

This occurs in two "directions". Visually presented as X, using element Y, and using element X, while content is non-X content. The former includes:

  • Links, using HTML elements other than <a href="">

  • Buttons, using HTML elements other than <button>

  • Input elements, not using appropriate semantic HTML elements for e.g. selects or text inputs with type attributes

  • Headings, using HTML elements other than <h1> - <h6>

  • Lists, not using <ul>, <ol>, <dl>

  • ...

The latter includes, using semantic HTML elements for content that does not fit the semantically conveyed role of that element, includes:

  • Lists for non-list content

  • Headings for non-heading content

  • ...

Improper use of semantic HTML leads to numerous issues for many users, also affecting other success criteria at the same time, including those, ensuring keyboard navigation and accessible use of assistive technology.

Remediation Notes

Ensure proper use of semantic HTML.

  • Elements with needed or wanted functionality use the native HTML element, fitting said functionality

    • Links use <a href="">

    • Buttons use <button>

    • Lists use <ul>, <ol>, <dl>; this includes all list content (e.g. navigations and lists of articles / cards)

    • Headings use <h1>, <h2>, <h3>, <h4>

    • Emphasis of text content uses <strong> and <em> instead of <b> and <i>

    • ...

  • Only content with that functionality uses said HTML elements.

  • No grouping for layout or styling is done, using semantic HTML elements; use <div> and <span> only

  • No styling is done, using semantic HTML elements; this includes creating paragraphs with line break elements or spacings with empty paragraphs

Priority: Serious Medium Page: Sport Observation Permalink
Observation Details

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

Remediation Notes

Ensure, all interactive elements' target size is at least 24×24px.

While this does not necessarily mean, e.g. an icon itself must be 24×24px, the clickable area around it counts as the target size, if there is no overlapping interactive element in that area. Ideally, the element's visual boundaries adhere to the minimum target size of 24×24px itself.

Priority: Serious High Page: Sport Observation Permalink
Observation Details

Footnote icon does not receive focus on dialog window close


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.

Remediation Notes

Ensure, for all dynamically added and then removed content that can be activated by user,

  • keyboard focus

    • remains (e.g. collapsing/expanding accordion items) on the triggering element or

    • is set to (e.g. opening and closing a dialog window) the triggering element again.