Important Notice: This website shows interim results and does not represent a complete accessibility audit. The content is not final, is under heavy development, and is not legally binding. The website and all its content is for internal use only; unauthorized use or distribution may result in legal consequences.

Documentation of accessibility observations for Deutsche Telekom – Mobilfunk & OneShop

25 issues found on Magena Sport

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

Issues List

Page Notes and General Remarks
Non-text Content 1.1.1 (A)
Images in stage do not have accurate text alternatives
Non-text Content 1.1.1 (A)
Images used as interactive elements do not have purpose equivalent text alternative
Non-text Content 1.1.1 (A)
Image in section "Alle Geräte" does not have accurate text alternative
Non-text Content 1.1.1 (A)
Image in section "Push-Mitteilungen" does not have accurate text alternative
Non-text Content 1.1.1 (A)
Image does not have purpose equivalent text alternative
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)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Line break element <br> used for layout purposes
Use of Color 1.4.1 (A)
Links are indicated by color only
Use of Color 1.4.1 (A)
Magenta button's keyboard focus does not have enough contrast
Use of Color 1.4.1 (A)
Button's keyboard focus (in "Auswählen" dialog window) does not have enough contrast
Reflow 1.4.10 (AA)
Dialog window content does not reflow properly
Text Spacing 1.4.12 (AA)
Changing text spacing lets parts of text spill out of their containers
Content on Hover or Focus 1.4.13 (AA)
Info "i" tooltip not dismissible without losing keyboard focus
Keyboard 2.1.1 (A)
Footnote dialog window does not receive keyboard focus on open
Keyboard 2.1.1 (A)
Dialog window content cannot be scrolled by keyboard
Pause, Stop, Hide 2.2.2 (A)
Video loop has no way to pause, stop, hide
Headings and Labels 2.4.6 (AA)
Main heading not describing purpose of whole page
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
Consistent Identification 3.2.4 (AA)
Button styles are used for links
Name, Role, Value 4.1.2 (A)
League information collapsible not using proper semantic HTML elements
Name, Role, Value 4.1.2 (A)
Named sections used as regions
Priority: Critical Significant Page: Magena Sport Observation Permalink
Observation Details

Page is

  • child page of "Sport". Issues with tariff and tariff option cards and with interactive elements like the FAQ component, are found on both pages. Ensure remediation over all pages.

  • sibling page of "Sport MegaSport Option", "Magenta TV Streaming Dienste Partner DAZN", "Magenta TV Streaming Dienste Partner WOW". Elements that are used in more pages (e.g. the sports channels / league section with collapsible information and video trailer dialog windows & the "Der komplette Live-Sport in einem Paket" section) must be remediated on all pages.

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 High Page: Magena 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: Moderate Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

The video loop in section "Der Highlight-Ticker der 3. Liga, Coupe de France und PENNY DEL" has no option to pause, stop, hide. While it respects user's prefers-reduced-motion preferences, all moving content >5 seconds must still have a way to pause, stop, hide.

Remediation Notes

  • Remove video loop, or

  • Add pause button to video loop

Priority: Moderate Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

Navigating (moving focus) to info "i" icon in tariff cards within section "MagentaSport: Alle Angebote im Überblick" opens a tooltip. Doing so gives cause to apply success criterion 1.4.13 Content on Hover or Focus. The opened tooltip must be dismissible by keyboard without moving keyboard focus. While the tooltip is dismissible (by ESC), the keyboard focus is lost in the process. The keyboard focus must remain on the element that initiated the opening of the tooltip.

Remediation Notes

Consider moving tooltip contents into dialog window to decrease the number of components with same functionality (of hiding content until user initiates).

For technical requirements for tooltips, please refer to BFIT-Bund Handreichung "Accessible design of user interface elements - Tooltip".

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

Some text, when text spacing is changed, spills out of its parent containers, making some text hard, other text impossible to read.

Remediation Notes

Containers of any type (e.g. badges, teasers, stages) must not use fixed dimensions, if they contain text content.

Priority: Serious Low Page: Magena Sport Observation Permalink
Observation Details

HTML heading <h1> is used for "MagentaSport: Alle Angebote im Überblick" which implies all heading level two being "Angebote". While the main heading accurately describes the "Angebote" section with the possibility to learn more about the tariffs, it does not describe following <h2> headings.

As heading structure is the most crucial way to navigate a page for many users of assistive technology, each heading must accurately describe topic / purpose of the content it introduces.

What is used as the page's main heading is a construct of an image and a generic container with textual content being "Magenta Sport. Live-Sport überall streamen". This content however does not use a semantic HTML heading element.

Remediation Notes

Ensure correct heading structure. Each heading must accurately describe topic / purpose of the content it introduces / groups. This means, the main heading <h1> must describe the whole page content.

As the main heading content already exists in form of "Magenta Sport. Live-Sport überall streamen", the current <h1> could be made into an <h2>. The main heading then can be made:

<h1>Magenta Sport. Live-Sport überall streamen</h1>

Or, if the image version of the "Magenta Sport" text is crucial:

<h1>
  <img src="..." alt="Magenta Sport" />
  Live-Sport überall streamen
</h1>
Priority: Critical Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

Images in stage section do not have purpose equivalent text alternatives. Images use wrong descriptions or lack detail in description.

See screenshot for image's alt attributes.

Remediation Notes

  • "Penny DEL" → "Penny DEL – Deutsche Eishockeyliga"

  • "Fyleralarm Frauen-Bundesliga" → "Google Pixel Frauen-Bundesliga Fußball"

  • "Basketball BBL" → "Turkish Airlines Euroleague Basketball"

  • "Basketball DBB" → "Deutscher Basketball Bund – DBB"

  • "Basketball DEB" → "Deutscher Eishockey-Bund – DEB"

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

The images use alt attributes "LEAGUE NAME". The instruction however is only conveyed via alt text and such is only communicated when the logo image is per definition not visible.

Remediation Notes

Purpose of the image is to convey information about the league and optionally to be clicked to reveal more information. An equivalent could be:

"LEAGUE NAME. Klicken Sie für mehr Informationen."

Priority: Moderate Low Page: Magena Sport Observation Permalink
Observation Details

The image for section "Alle Geräte" does not have a purpose equivalent text alternative. Image uses "MagentaSport auf allen Geräten". As the section defines "Alle Geräte" with a specific list, the image of "Alle Geräte", which does not show all devices, is misleading.

Remediation Notes

Ensure accuracy when writing text alternatives while meeting equivalent purpose of the image. The image does show a variety of devices that run MagentaSport. A purpose equivalent text alternative could be "Beispiel-Inhalte aus MagentaSport auf einer Vielzahl von Geräten".

Or, if specificity is of importance the previous recommendation can be extended by adding more details after: "Beispiel-Inhalte aus MagentaSport auf einer Vielzahl von Geräten – Eishockey, Fußball und Basketball auf Fernseher, Laptop, Tablet und DEVICE XYZ.".

Priority: Moderate Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

The image for section "Push-Mitteilungen" does not have a purpose equivalent text alternative. Image uses "MagentaSport Push Mitteilungen" while showing one specific push notification on a smartphone screen.

Remediation Notes

Ensure accuracy when writing text alternatives while meeting equivalent purpose of the image. Remediation depends on wanted specificity. Possible text alternatives could be

  • "Push-Mitteilung über den Start eines kommenden Eishockey-Spiels"

  • "Beispiel Push-Mitteilung auf dem Sperrbildschirm eines Smartphones"

  • "MagentaSport App zeigt Push-Mitteilung, dass ein Eishockey-Spiel bald startet"

Priority: Moderate Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

Image conveys more information than used alt attribute "Mega Sport".

Remediation Notes

Ensure all visually conveyed information are available in a text alternative. This does not need to be via alt attribute and can also be done via visually presented text, but in either case, the purpose equivalent alternative must be met.

"Logos der Dienste, die in der MegaSport Option enthalten sind. Penny..., Magenta Sport, WOW, ..."

Priority: Serious Low Page: Magena 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 is not using semantic list elements. Examples are:

    • the "Das komplette Sport Programm" section

    • the lists in FAQ element "Was kostet MagentaSport?"

    • the phone numbers in FAQ element "Wie kann ich MagentaSport buchen?"

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.

For the FAQ item "Was kostet MagentaSport?", a semantic list structure could look like this:

<ul>
  <li>
    Angebote für Kunden mit bestehendem Telekom-Vertrag
    <ul>
      <li>Dem flexiblen Monatsabo für 12,95 € pro Monat (monatlich kündbar)</li>
      <li>Dem günstigen Jahresabo für 7,95 € pro Monat mit einem Preisvorteil von 60 € pro Jahr im Vergleich zum Monatsabo. Vertragslaufzeit 12 Monate mit einem Monat Kündigungsfrist. Das Angebot beinhaltet unter anderem alle Spiele der 3. Liga, der PENNY DEL (Deutsche Eishockey Liga), der Google Pixel Frauen-Bundesliga und der Turkish Airlines EuroLeague sowie zahlreiche weitere Wettbewerbe. Mehr als 3.000 Live-Events pro Jahr.</li>
    </ul>
  </li>
  <li>
    Angebote für alle ohne Telekom-Vertrag
    <ul>
      <li>Dem flexiblen Monatsabo für 19,95 € pro Monat (monatlich kündbar)</li>
      <li>Dem günstigen Jahresabo für 12,95 € pro Monat mit einem Preisvorteil von 84 € pro Jahr im Vergleich zum Monatsabo. Vertragslaufzeit 12 Monate mit einem Monat Kündigungsfrist. Das Angebot beinhaltet unter anderem alle Spiele der 3. Liga, der PENNY DEL (Deutsche Eishockey Liga), der Google Pixel Frauen-Bundesliga und der Turkish Airlines EuroLeague sowie zahlreiche weitere Wettbewerbe. Mehr als 3.000 Live-Events pro Jahr.</li>
    </ul>
  </li>
</ul>

The phone numbers in FAQ item "Wie kann ich MagentaSport buchen?" can be displayed as a <dl>, ideally with linking the phone numbers.

<dl>
  <div>
    <dt>Für Kunden mit Telekom-Anschluss aus den Bereichen Festnetz und MagentaTV</dt>
    <dd><a href="tel:08003301000">0800 330 1000</a></dd>
  </div>
  <div>
    <dt>Für Telekom Mobilfunk-Kunden</dt>
    <dd><a href="tel:08003302202">0800 330 2202</a></dd>
  </div>
  <div>
    <dt>Für Interessenten ohne Telekom-Vertrag</dt>
    <dd><a href="tel:08005446060">0800 544 6060</a></dd>
  </div>
</dl>
Priority: Best Practice Low Page: Magena Sport Observation Permalink
Observation Details

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.

Remediation Notes

Remove manually provided regions (named sections) and create page structure through heading structure. There is no need for manually created regions. If one is created manually, it should be a very specific use-case, usually the main function of the page, if it is not already easily accessible in another way.

If for example the main purpose of the page would be the CTA to buy MagentaSport AND the tariff option cards wouldn't already be direct context of the main heading, such section could be named as region.

Priority: Critical Medium Page: Magena 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: Moderate Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

Keyboard focus of Magenta button changes background color. Difference between default and focused state does not meet minimum contrast ratio (3:1). Instead, the difference is barely visible at 1.1:1.

Remediation Notes

Ensure enough contrast (3:1) between different button states (default, focused, active, ...).

Priority: Moderate Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

Keyboard focus of buttons "Hast du einen MagentaTV Vertrag?", "Welchen Telekom Vertrag hast du?", and "Close Button" in "Auswählen" dialog window (section "MagentaSport: Alle Angebote im Überblick") changes background color. Difference between default and focused state does not meet minimum contrast ratio (3:1). Instead, the difference is barely visible at 1.2:1.

Remediation Notes

Ensure enough contrast (3:1) between different button states (default, focused, active, ...).

Priority: Critical Medium Page: Magena Sport Observation Permalink
Observation Details

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

Remediation Notes

Ensure, using semantic HTML elements to get existing functionality, operability, and accessibility built-in. Links shall only be used to navigate to a different resource. Buttons shall be used for actions on a page. All three (Expanding collapsible panel by image button, collapsing panel by close button, opening dialog window by "Trailer ansehen" button) have button functionality and must use the semantically correct button functions.

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

Ideally, the structure uses a more fitting HTML construct and is rebuilt using native, semantic HTML elements. To get functionality of collapsing / expanding content panels, a <details> & <summary> construct can be used which would also remediate the issues of the "disconnected" generic <div> structure of the collapsible content panel.

For more immediate remediation, build the buttons as follows:

  • <button><img src="..." alt="Bundesliga – Mehr Informationen" /></button> for the image button

  • <button aria-labelledby="button-label"><span id="button-label" hidden>Schließen</span><svg aria-hidden="true" focusable="false">...</svg></button> for the close button

Priority: Moderate Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

The line break element <br> is used to create new lines. Line break elements do get announced by assistive technology as "empty group", making it less pleasant to navigate a page that uses them for layout purposes. Also, design-wise, a manual line break will inevitably create text content reflow issues.

Remediation Notes

Ensure, creating paragraphs only by using real new lines / paragraphs (HTML element <p>) instead of manually creating them with line breaks. In Rich-text editors within content management systems, you create proper paragraphs by pressing ENTER. Avoid pressing SHIFT + ENTER, as this creates <br> line break elements instead.

Priority: Serious Low Page: Magena Sport Observation Permalink
Observation Details

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 Magenta Sport: Live-Sport überall streamen
  h2 Alle Angebote im Überblick
  h2 Das ganze Sporterlebnis bei MagentaSport
    h3 Alle Spiele live und auf Abruf – auf jedem Gerät
    h3 Der Highlight-Ticker der 3. Liga, Coupe de France und PENNY DEL
  h2 Der komplette Live-Sport in einem Paket
  h2 Häufig gestellte Fragen zu MagentaSport
    h3 Was kostet MagentaSport?
    h3 Wie kann ich MagentaSport buchen?
    h3 Welche Sportarten enthält MagentaSport?
    h3 Auf wie vielen Geräten kann ich MagentaSport nutzen?

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

<H1> MagentaSport: Alle Angebote im Überblick
  <H2> Das ganze Sporterlebnis bei MagentaSport
    <H3> 3. Liga Hidden
    <H3> PENNY DEL Hidden
    <H3> Google Pixel Frauen-Bundesliga Hidden
    <H3> Turkish Airlines EuroLeague Hidden
    <н3> BKT EuroCup Hidden
    <H3> Basketball-Länderspiele Hidden
    <H3> FIBA EuroBasket 2025 Hidden
    <H3> FIBA Women's EuroBasket 2025 Hidden
    <H3> FIBA Länderspiele Hidden
    <H3> Eishockey-Länderspiele Hidden
    <H3> IIHF Weltmeisterschaften Hidden
    <H3> Champions Hockey League Hidden
    <H3> Deutscher Hockey Bund Hidden
    <H3> EuroHockey Championships 2025 Hidden
    <H3> FIH Hockey Pro League Hidden
    <H3> EuroHockey Indoor Championship 2026 Hidden
    <H3> Coupe de France Hidden
    <H3> Sportdigital FUSSBALL Hidden
  <H2> Alle Spiele live und auf Abruf - auf jedem Gerät
  <H2> Der Highlight-Ticker der 3. Liga, Coupe de France und PENNY DEL
  <H2> Push-Mitteilungen direkt auf Ihr Smartphone
  <H2> Der komplette Live-Sport in einem Paket
  <H2> Häufig gestellte Fragen zu MagentaSport
    <H3> Was kostet MagentaSport?
    <H3> Wie kann ich MagentaSport buchen?
    <H3> Welche Sportarten enthält MagentaSport?
    <H3> Auf wie vielen Geräten kann ich MagentaSport nutzen?
Remediation Notes

Ensure, visually presented heading structure matches programmatically determinable heading structure by only using HTML heading elements for heading content and using HTML heading elements for all heading content.

Side note: This criterion does not specifically look at proper heading content (i.e. wordings, usefulness of headings). See 2.4.6 Headings and Labels for this.

Priority: Serious Low Page: Magena Sport Observation Permalink
Observation Details

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:

  • Alle Paketdetails anzeigen

Remediation Notes

Ensure, links can be differentiated from surrounding text content by at least one other visually perceivable factor. Preferably use underline to indicate link text as it is browser default and known pattern to users.

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

  • <b> used for emphasis of text content in tariff cards

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.

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

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

Priority: Minor Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

Content of dialog window "Auswählen" does not correctly reflow and the close button is cut off.

Remediation Notes

While, as long as the close button is partially accessible as it is, this issue is not failing this criterion, ensuring proper reflow will allow for more situations without issues. Creating robust user experience by eliminating possible reflow issues.

Priority: Critical High Page: Magena Sport Observation Permalink
Observation Details

When opening a dialog window:

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

Dialog window "Alle Geräte ansehen" can be opened and closed by keyboard but contents cannot be scrolled by keyboard.

Remediation Notes

Opening a dialog window by keyboard navigation must set the focus to the dialog window's content. Opening a dialog window must trap keyboard focus inside the dialog window, so underlying content cannot be accessed while dialog window is opened. Closing the dialog window, focus must be set to the triggering element again.

Ideally, the first focusable element in a dialog window can be used to close the dialog window, so opening and closing of a dialog window can be done without the need of navigating through other focusable elements. Although simple dialog windows, e.g. asking for confirmation, and providing "Accept" and "Cancel" buttons, might not have an explicit "Close" button and may set focus to the dialog window's "main purpose action" instead.

The non-interactive content of the dialog window, when overflowing, must be accessible via scrolling by keyboard navigation (ARROW UP / DOWN).

Priority: Moderate Low Page: Magena Sport Observation Permalink
Observation Details

Links, styled as buttons, will imply a certain functionality and result in user expectation.

Button "Alle Geräte ansehen" is correctly using button styles, but the following link "Mehr zur MegaSport Option" does so, too. The same styling is used for different purposes (link vs. button), leading to unexpected behavior when clicking.

Remediation Notes

Ensure consistent use of components. Ideally throughout the whole website, but at least throughout a single page. On one page, no two different purpose elements (e.g. link and button) should be styled the same and no differently styled elements should have the same purpose / functionality.

Priority: Serious Medium Page: Magena Sport Observation Permalink
Observation Details

Footnote trigger (star icon) and info icon "i" 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.