31 issues found on Magenta TV Streaming Dienste Partner DAZN

The video trailers embedded (Bundesliga, UEFA Champions League, matchroom.) 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.

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.

"Demnächst live" images have non-null alt attribute set, that duplicates the following heading. Image either must use purpose equivalent text alternative or must be declared decorative by using a null alt attribute.

The images use alt attributes "Klicken Sie für weitere Informationen auf das 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.

Icons, when declared decorative, should use a null alt attribute (for <img> elements) or an empty <title> in inline SVG images (with appropriate hiding mechanism) to hide them from screen readers.

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

League logos are presented as list of leagues but not marked up as such.

Semantic HTML list elements must only be used for actual list content. Lists are used in various places as

• class="container-grid--list"

• class="ButtonGroup__items..."

• class="flickity-page-dots"

All those do not have list content and as such must not use list elements.

Lists are used to structure page content. They are an effective method of navigating a page, skipping certain parts, etc. Mis-using list elements for non-list content will make it harder for certain user groups to navigate a page.

Line break elements <br> must not be used for styling or layout purposes.

<p class="Price__text___2M42_">ab dem 13. Monat 44,99 € mtl. <br></p>

Stage background image has no purpose equivalent text alternative set. All non-decorative images must have a text alternative present. All information, visually communicated only by the image, must be included in the purpose equivalent text alternative.

Headings must be used to describe topic or purpose of the content they introduce. The heading "Live und jederzeit auf Abruf" does not describe the following content's topic. As is, the heading must describe the topics:

• What programs are included in DAZN service (what matches / events are shown)

• Buying DAZN with MagentaTV ("Buchen Sie DAZN bequem zu Ihrem MagentaTV Vertrag dazu")

Both contents are not accurately described by "Live und jederzeit auf Abruf". Especially the content of buying the DAZN option with CTA should be easily findable and the given heading does not leads the user to believe the CTA to be found there.

Heading structure / outline is the most used navigation method for screen reader users. A functioning heading structure is most important (and easiest) way to ensure understandable and navigable content structure.

"Alle Paketdetails anzeigen" opens a dialog window. Actions should be initiated by buttons, not by links. Use links only for link content.

Logo button says "Klicken Sie für weitere Informationen auf das Bundesliga Logo". The "Bundesliga Logo" however is just presented visually and as such relies on sensory characteristic to be operated.

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

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

Resizing text to 200% lets content overflow in league collapsible content areas.

Content overflows on small viewports. Tested on WCAG criterion 330px viewport width, the Bundesliga content area is cut off.

Changing text spacing results in missing content/information.

User setting for prefers reduced motion is not respected. While this is not considered a failure under 2.3.1 in this case, a general remark on respecting prefers reduced motion user settings is made. Any motion / animation should be at least reduced when user settings are set.

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.

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.

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.

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)

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

No main landmark found as child of body element. Use landmarks to help users navigate the broad structure of the page.

The button (using link markup) for "Alle Paketdetails anzeigen" and "Jetzt dazubuchen" exists multiple times. As the accessible name for both is a duplicate, a user might not be able to figure out its purpose. Without proper structure of surrounding elements (e.g. correct heading structure for the two "Pakete") the links cannot be disambiguated.

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.

The carousel "demnächst live" does not show single pointer elements to navigate on desktop viewport while the cursor does change to a cursor: grab.

The slider for "Paket" tiles does overflow on the x axis on smaller viewports and requires scrolling / dragging movement to navigate. A single point navigation alternative like pagination or arrow buttons is not offered.

The asterisk icon to activate a footnote dialog window does not meet minimum target size (24×24px). The icon's target size is 18×21px, making it hard for certain people to reliably click it. 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.

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