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

28 issues found on Sport Megasport Option

Page URL
https://www.telekom.de/sport/megasport-option

Issues List

Page Notes and General Remarks
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 of text not using purpose equivalent text alternative
Non-text Content 1.1.1 (A)
Decorative icons have non-null alt attribute or no text alternative at all
Non-text Content 1.1.1 (A)
Logo images are used as headings
Captions (Prerecorded) 1.2.2 (A)
No non-audio alternative to audio in video trailers given
Audio Description or Media Alternative (Prerecorded) 1.2.3 (A)
No non-video alternative to video trailers given
Info and Relationships 1.3.1 (A)
Improper use of semantic HTML list elements
Info and Relationships 1.3.1 (A)
Heading element used for non-heading content
Info and Relationships 1.3.1 (A)
Main heading hidden and replaced by images
Use of Color 1.4.1 (A)
Interactive element uses color as only way to differentiate
Use of Color 1.4.1 (A)
Magenta button's keyboard focus does not have enough contrast
Non-text Contrast 1.4.11 (AA)
Selection (Radio) "MagentaTV-Kunde" has weak contrast between selected and unselected state
Text Spacing 1.4.12 (AA)
Text content floats out of badges on text spacing changes
Content on Hover or Focus 1.4.13 (AA)
Tooltip not dismissible by keyboard when hovered
Keyboard 2.1.1 (A)
League information collapsible cannot be opened by SPACE/ENTER
Keyboard 2.1.1 (A)
Video trailer dialog window does not receive keyboard focus on open
Keyboard 2.1.1 (A)
League information collapsible does not receive keyboard focus on open
Keyboard 2.1.1 (A)
"Auswahlfeld" dropdown list not fully keyboard accessible
Focus Order 2.4.3 (A)
Focus order in stage section (pause animation)
Focus Order 2.4.3 (A)
Sports channel logo buttons duplicated
Focus Order 2.4.3 (A)
Element without interactive function is focusable
Focus Visible 2.4.7 (AA)
Sports channel logo buttons duplicated
Focus Not Obscured (Minimum) 2.4.11 (AA)
Activated dialog windows obscure element focus
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Name, Role, Value 4.1.2 (A)
League information collapsible not using proper semantic HTML elements
Name, Role, Value 4.1.2 (A)
Close button is hidden from screen readers
Unrelated to Success Criteria / Best Practice
Non-interactive element focusable
Priority: Critical Significant Page: Sport Megasport Option 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 "Magenta TV Streaming Dienste Partner DAZN", "Magenta TV Streaming Dienste Partner WOW". Elements that are used in both pages (e.g. the sports channels / league section with collapsible information and video trailer dialog windows) 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: Moderate Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

Text content in containers (badges) floats out of said containers on text spacing changes.

Remediation Notes

Ensure no container that contains text content uses fixed size values.

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

In section "Buchen Sie die ganze Welt des Sports bei MagentaTV", the radio button / selection "Ich bin MagentaTV-Kunde / Ich bin noch kein MagentaTV-Kunde" does not use high enough contrast between selected and unselected states. The color difference between selected (#D9D9D9) and unselected (#FFFFFF) is 1.4:1. The minimum required contrast is 3:1. Using this weak a contrast between states, makes it impossible for certain user groups to perceive the difference, thus making it impossible to know which option is selected.

Remediation Notes

Ensure color contrast minimum ratios are met for all states of interactive elements, so that a default and selected state is easily perceivable.

Priority: Moderate Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

While having the animation pause button as the first interactive element after the navigation does make sense, the visual presentation does not match the focus order. As the footnote that is focused after, is visually quite small, perception of the focus state can be an issue, as the eyes try to find a focussed state after the pause button.

Remediation Notes

Place the animation pause button in the top left corner to avoid mismatches between expected and actual focus order.

Priority: Moderate Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

The buttons in section "Das komplette Sport Programm" with sports channel logos are duplicated. The HTML structure is as follows:

<div class="styles_Program__switch__10Eau">
  <button type="button"><img alt="Wow Logo" src="..." /></button>
  <button type="button"><img alt="Dazn Logo" src="..." /></button>
  <button type="button"><img alt="MagentaSport" src="..." /></button>
  <div class="styles_Program__switch-window__dWIIF">
    <div>
      <button type="button"><img alt="Wow Logo" src="..." /></button>
      <button type="button"><img alt="Dazn Logo" src="..." /></button>
      <button type="button"><img alt="MagentaSport" src="..." /></button>
    </div>
  </div>
</div>

This leads to three buttons not being visibly focused before reaching the actual buttons. See screenshot for jump from element 8 to element 12 in focus order. Elements 9-11 are the "hidden" buttons.

Remediation Notes

Ensure, cleaning up code, by removing duplicate and unused parts to provide clean, semantic HTML code.

Side note: Consider, moving the section to a tab group structure to match visual presentation, functionality, and code markup.

Priority: Moderate Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

The buttons in section "Das komplette Sport Programm" with sports channel logos are duplicated. The HTML structure is as follows:

<div class="styles_Program__switch__10Eau">
  <button type="button"><img alt="Wow Logo" src="..." /></button>
  <button type="button"><img alt="Dazn Logo" src="..." /></button>
  <button type="button"><img alt="MagentaSport" src="..." /></button>
  <div class="styles_Program__switch-window__dWIIF">
    <div>
      <button type="button"><img alt="Wow Logo" src="..." /></button>
      <button type="button"><img alt="Dazn Logo" src="..." /></button>
      <button type="button"><img alt="MagentaSport" src="..." /></button>
    </div>
  </div>
</div>

This leads to three buttons not being visibly focused before reaching the actual buttons. See screenshot for jump from element 8 to element 12 in focus order. Elements 9-11 are the "hidden" buttons.

Remediation Notes

Ensure, cleaning up code, by removing duplicate and unused parts to provide clean, semantic HTML code.

Side note: Consider, moving the section to a tab group structure to match visual presentation, functionality, and code markup.

Priority: Moderate Low Page: Sport Megasport Option Observation Permalink
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.

"Jetzt buchen / Jetzt dazubuchen" buttons in tariff card and also in the following dialog window.

Remediation Notes

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

Priority: Critical High Page: Sport Megasport Option Observation Permalink
Observation Details

The video trailers embedded (Bundesliga) do not have non-video alternatives present. Visually impaired or blind users need a non-visual alternative to convey the contents of the shown video.

Remediation Notes

Ensure, a version of the video including audio description is available or provide a text alternative for the content, conveyed in the video.

Priority: Critical Medium Page: Sport Megasport Option Observation Permalink
Observation Details

When opening a video trailer 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.

  • 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: Serious High Page: Sport Megasport Option Observation Permalink
Observation Details

Opening a 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 Megasport Option Observation Permalink
Observation Details

When opening a league information collapsible, the keyboard focus is not set to said content.

The contents of the area are not accessible via keyboard directly (after opening the collapsible, the shown content area must be the next focusable content)

Remediation Notes

Opening a collapsible with the keyboard must ensure the shown content area to be the next focusable area. The collapsible uses "accordion" functionality.

A better approach would be to use a <details> and <summary> elements for those collapsibles.

Refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion" for necessary steps to ensure accessibility of accordion components / collapsibles.

Priority: Minor Low Page: Sport Megasport Option Observation Permalink
Observation Details

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

Remediation Notes

As the displayed content of expanded sections is not interfering with other content, this observation does not fail the current success criterion. It does however fail 1.3.1 Info and Relationships. Ensure every element that is used as a button, is actually using a semantic HTML button element to do so.

Please (also) 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 Megasport Option Observation Permalink
Accompanying Files
Observation Details

The images use alt attributes "LEAGUE NAME Logo". 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 Logo. Klicken Sie für mehr Informationen."

Priority: Critical High Page: Sport Megasport Option Observation Permalink
Observation Details

The video trailers embedded (Bundesliga, UEFA Champions League, matchroom.) do not have non-audio alternatives present for the included audio. Hearing impaired or deaf users need a non-audio alternative to convey the contents of the audio in the shown videos.

Remediation Notes

Ensure, the embedded videos have appropriate captions available that convey all information that is part of the audio track of the shown video and is not yet communicated in a non-audio way.

Priority: Minor Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

The carousel "Demnächst live" is focusable even when no interactive element is functioning. See desktop viewport.

Priority: Serious Low Page: Sport Megasport Option Observation Permalink
Observation Details

"Alle Paketdetails anzeigen" element uses blue color to indicate it being an interactive element. Color must not be the only way to convey such information.

Remediation Notes

Ensure to use at least one more method to convey the information of it being an interactive element.

When using a link, ideally restoring the default link underline. As the "Alle Paketdetails anzeigen" does open a dialog window, it should rather use a <button> element and should be presented as such.

Priority: Critical Low Page: Sport Megasport Option Observation Permalink
Observation Details

League information collapsibles use generic containers to build interactive functionality.

<div role="button" tabindex="0">
  <img alt="Bundesliga Logo" src="...">
</div>

The element can receive keyboard focus but is not activated with click on SPACE / ENTER.

Remediation Notes

Use semantic HTML elements for interactive elements instead of rebuilding them from generic elements. Use <button> element to ensure possibility of keyboard navigation. This also removes the need of manually setting role attribute and tab index.

Side note: As the buttons are used to collapse / expand information, consider evaluating the use of a <details> & <summary> structure to get accordion functionality.

Side note: As the used image is a functional image, the text alternative must describe the purpose of the button's function rather than describing the image's contents.

Priority: Moderate Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

"Exklusiver Live-Sport von Sky Sport mit WOW, DAZN und MagentaSport in einem Paket." in section "Das komplette Sport Programm" is using <h3>. It however is visually presented and also functions as body copy.

Remediation Notes

Ensure, only headings (as they are visually presented and function as such) are using semantic HTML heading elements.

The content in question should use an HTML paragraph element <p>.

Priority: Serious Low Page: Sport Megasport Option 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 "Das komplette Sport Programm" section or the list in FAQ element "Wie kann ich die MegaSport Option nutzen?", 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: Moderate Low Page: Sport Megasport Option Observation Permalink
Observation Details

The main heading "MegaSport" is visually hidden using CSS styles opacity:0;position:absolute;left:0;top:0. It then is visually replaced by two images: "Mega Logo" & "Sport Logo".

Remediation Notes

Ideally, the main heading stays visible and the visual effects are built with native HTML/CSS solutions. If this is not wanted or viable, the images should be the main headings content as follows:

<h1><img src="..." alt="Mega" /><img src="..." alt="Sport" /></h1>

Semantic HTML heading elements are getting their accessible name from their content already. Moving the images into the main headings content will result in the wanted accessible name without code duplication or other work-arounds.

Priority: Moderate Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

The images "Mega Logo" and "Sport Logo" are used as the main heading, replacing the main heading's text content "MegaSport". As such a replacement, they must convey equivalent purpose, not adding "Logo" to the text which is announced by assistive technology.

Remediation Notes

As the purpose of the images is to convey the visually presented text, no other content should be present in the text alternative. Remove the "Logo" parts and use "Mega" and "Sport" as text alternatives.

Side note / Alternative: As the images are used as the page's main heading, ideally they're used inside the HTML heading element. It should also be considered, moving them into one image to avoid the need for users of assistive technology to click through two items to get the text content of the main heading. This can also be achieved, by moving the images into the HTML heading element, keep the heading's text content, and setting null alt attributes on the images to hide them from assistive technology: <h1><img src="..." alt="" /><img src="..." alt="" />MegaSport</h1>

Priority: Best Practice Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

The logo images of sports channels are used as headings for the content blocks but use "XYZ Logo" as text alternatives. As they're not actual headings as they don't use HTML heading elements, it is not considered a failure of this success criterion.

Remediation Notes

When using images as headings, ensure the text alternative does only represent the wanted heading content and does not describe the image (like "XYZ Logo").

Priority: Moderate Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

Decorative icons are announced by screen reader. This happens when images have a non-null alt attribute or in the case of SVGs a non-null <title> element or none at all without being hidden manually.

On the /sport pages, this concerns the section

  • "Erleben Sie MegaSport auf all Ihren Geräten"

Remediation Notes

Ensure, purely decorative images have a null alt attribute set. SVGs must have an empty <title> element instead and ideally be hidden manually via aria-hidden="true".

Side notes:

For more information about accessible icon buttons, refer to Sara Soueidan's "Accessible Icon Buttons" article.

If an image is declared to be informative rather than decorative, a purpose equivalent text alternative must be programmatically determinable. Duplicating already existing text content never is purpose equivalent of an image. See the W3C Alt-decision tree for more information about types of non-text content.

Priority: Critical Medium Page: Sport Megasport Option Observation Permalink
Accompanying Files
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>

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

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. To open dialog windows, the native <dialog> element should be evaluated. For the latter, ensure referring to BFIT-Bund Handreichung "Accessible design of user interface elements – Modal Dialog".

For more immediate remediation, build the three 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

  • <button>Trailer ansehen</button> for the "Trailer ansehen" button

Priority: Serious Unknown Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

The "Auswahlfeld" is using role="combobox", making the element a dropdown list. The dropdown list has limited keyboard accessibility. Observations:

  • Dropdown cannot be opened by

    • ALT+DOWN ARROW

    • UP/DOWN ARROW

    • Text input

  • Dropdown cannot be closed by

    • ALT+UP ARROW

    • ENTER

    • TAB

    • (Mouse click on triggering element)

  • Selecting list item and closing dropdown via ESC, keyboard focus is moved away from triggering element

  • Selection of list items not possible by

    • UP ARROW, DOWN ARROW

    • POS1, END

    • PAGE UP, PAGE DOWN

    • Entry of one or more characters (within a short time)

Remediation Notes

If presentation as drop-down list via role="combobox" is necessary, please refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Drop-down list" for technical requirements.

Alternatively, a simpler approach might be the use of a selection list instead. Please refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Selection list" for technical requirements.

Priority: Moderate Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

"Jahresabo" badge in tariff option card is focusable while not being an interactive element. Element uses <div aria-label="..." tabindex="0">. Non-interactive elements should rarely be focusable. A non-interactive element should also not have a aria-label set, especially if it differs from the visible text content.

Remediation Notes

Ensure, only interactive elements are focusable.

Ensure to not hide important text content like "Unser Top-Angebot" behind an aria-label as this makes it inaccessible to non-users of screen readers. If the content is not important, better omit it completely.

Priority: Critical Low Page: Sport Megasport Option Observation Permalink
Observation Details

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.

Remediation Notes

Ensure, only semantic button elements are used for button functionality. <a href=""> → <button>

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

Priority: Best Practice Low Page: Sport Megasport Option Observation Permalink
Accompanying Files
Observation Details

Tooltip "MagentaTV" in section "Erleben Sie MegaSport auf all Ihren Geräten" is not dismissible when activated by hover. When content of tooltip is shown, there must be a method to dismiss the tooltip without changing hover position (or focus). Usually this is done via ESC key.