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

17 issues found on Magenta TV Streaming Dienste Partner wow

Page URL
https://www.telekom.de/magenta-tv/inhalte/streaming-dienste-partner/wow

Issues List

Page Notes and General Remarks
Non-text Content 1.1.1 (A)
Images in marquee teaser do not communicate purpose equivalent text alternative
Non-text Content 1.1.1 (A)
WOW logo image hidden and contents then duplicated
Non-text Content 1.1.1 (A)
List marker icons without text alternative
Info and Relationships 1.3.1 (A)
Improper use of semantic HTML list elements
Info and Relationships 1.3.1 (A)
Radio button group in "Jetzt buchen" dialog window not semantically correct
Info and Relationships 1.3.1 (A)
<b> tag used to create bold text
Contrast (Minimum) 1.4.3 (AA)
Magenta text on dark background only meets contrast minimum via font size
Reflow 1.4.10 (AA)
Close button in "Paketdetails" dialog window overlapped by text on small viewport
Content on Hover or Focus 1.4.13 (AA)
Tooltip is not dismissible
Keyboard 2.1.1 (A)
Footnote dialog window does not receive keyboard focus on open
Pause, Stop, Hide 2.2.2 (A)
Marquee teaser has no way to be paused, stopped, hidden
Page Titled 2.4.2 (A)
Page title does not include Magenta TV product name
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
Unrelated to Success Criteria / Best Practice
Multi-step forms with no conditional changes
Unrelated to Success Criteria / Best Practice
Button and link with same appearance
Priority: Critical Significant Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Observation Details

Page is

  • sibling page of "DAZN".

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: Minor Low Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Observation Details

Page is titled "WOW: Serien, Filme und Live-Sport | Telekom" which is not fully unambiguous. While the website part connects the service name to Telekom in a way, it is important to think about the page title might be the very first thing a user (e.g. screen reader user) gets to know.

Remediation Notes

The DAZN offer page is titled "MagentaTV Streaming-Dienste & Partner: DAZN | Telekom". As WOW is part of MagentaTV as well, parallel named pages would be ideal to keep consistency and make it as easy as possible for users to know where they are.

Rename page to "MagentaTV Streaming-Dienste & Partner: WOW | Telekom". Or even better, put the service name first:

  • "WOW bei MagentaTV: Serien, Filme, Live-Sport | Telekom"

  • "DAZN bei MagentaTV: Live-Sport | Telekom"

Priority: Serious High Page: Magenta TV Streaming Dienste Partner wow 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: Critical Low Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Observation Details

Images in marquee teaser set text alternative via alt attribute but are hidden by aria-hidden="true". Images must only be hidden if they are purely decorative without adding any information that is not already communicated otherwise in text content.

The images in marquee teaser communicate movie, tv show, and sport channel names as available content for the "WOW / MagentaTV" service. This information (movie, tv show, sport channel names) is not communicated otherwise, making the images informative. They must not be hidden from assistive technology.

Remediation Notes

The images need a purpose equivalent text alternative. This can be done via the images' alt attribute but does not have to be. If doing it, ensure to not only add the media name but also the category as this is part of the visually communicated information.

Purpose of the marquee teaser is to show the categories (movies, tv shows, sports channels) and examples in each category. A purpose equivalent text alternative needs to communicate all those information and could be a nested list like this:

<ul>
  <li><strong>WOW Filme</strong>
    <ul>
      <li>Der wilde Roboter</li>
      ...
    </ul>
  </li>

  <li><strong>WOW Live-Sport</strong>
    <ul>
      <li>1. Bundesliga</li>
      ...
    </ul>
  </li>

  <li><strong>WOW Serien</strong>
    <ul>
      <li>The White Lotus S3</li>
      ...
    </ul>
  </li>
</ul>

The list could then be hidden by using a class="visually-hidden" with:

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

This will keep the list accessible to assistive technology while not presenting it visually.

Priority: Best Practice Low Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Accompanying Files
Observation Details

The WOW logo uses an img element, including an alt="WOW" attribute, but hidden via aria-hidden="true". The heading then goes ahead and uses the same text content, making this the markup for the heading

<div class="...">
  <img
    class="..."
    alt="WOW" 
    aria-hidden="true"
    width="200" height="133"
    src="..." data-src="..."
  >
  <div class="..." style="...">
    <div class="...">
      <h3 class="...">
        <span class="...">WOW&nbsp;</span>
        Sport, Filme &amp; Serien in einem Paket
      </h3>
    </div>
  </div>
</div>

creating unnecessary complexity in markup.

Remediation Notes

While not a failure of a success criterion, the heading structure can be simplified by using best practices. Please also refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML. Example simplification, using the already existing text alternative of the image within the heading:

<h3>
  <img alt="WOW" width="200" height="133" src="...">
  <span>Sport, Filme &amp; Serien in einem Paket</span>
</h3>
Priority: Best Practice Low Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Accompanying Files
Observation Details

The magenta text on dark background for the price information has a contrast ratio of 3.3:1 which meets the required minimum 3:1 for large text (≥24px). The text is set to be exactly 24px in font size. While not a failure of this criterion, alternative display methods should be evaluated when meeting criteria requirements exactly like this.

E.g. simulating a dimmed screen (see screenshot) makes it clear, barely meeting a success criterions required threshold, also means barely NOT meeting it.

Priority: Moderate Low Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Accompanying Files
Observation Details

Testing the dialog window "Alle Paketdetails anzeigen" on small viewport of 320px viewport width, text content is overlapping the close button.

Remediation Notes

Ensure, text reflows in containers and is not overlapping other content.

Priority: Moderate Low Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Observation Details

Tooltip content must be accessible via keyboard focus and hover which it is. The content must then be dismissible without moving the mouse pointer (on hover) or keyboard focus which it is not.

Remediation Notes

Ensure, all content that can be displayed by hovering via mouse pointer or receiving keyboard focus, is dismissible without moving the mouse pointer or keyboard focus. This usually is done by allowing ESC key to close the shown tooltip.

For ideas to build accessible tooltips, refer to e.g. Heydon Pickering – Inclusive Components – Tooltip.

Priority: Critical Medium Page: Magenta TV Streaming Dienste Partner wow 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: Magenta TV Streaming Dienste Partner wow Observation Permalink
Observation Details

The image marquee teaser below the main heading is starting automatically and animates for longer than 5 seconds. It must have a mechanism accessible to pause, stop, hide movement.

Remediation Notes

Ensure, all auto-starting movement that animates more than 5 seconds can be paused, stopped, hidden. Remediation can be done by:

  • Not auto-starting movement

  • Limit movement to 5 seconds and then go back to static fallback

  • Allow pause, stop, hide via user controls

Priority: Moderate Low Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Accompanying Files
Observation Details

Markup uses heading, then a fieldset with legend, and two labels for the two options. While necessary labels are accessible (2.4.6 Headings and Labels) there is a lot of markup that makes it very complex. The current markup, using a screen reader, leads to four announcements of text "Hast du einen Telekom Festnetz- & Internetanschluss?".

Remediation Notes

By moving the headline into the fieldset's <legend>, the announcement count can be limited and text content can be de-duplicated. See e.g. GOV.UK Design System – Radios for an example approach to do this.

Priority: Minor Low Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Accompanying Files
Observation Details

The non-semantic HTML element <b> is used to bolden text content. Emphasizing text content should only be done by using semantic HTML elements like <strong> and <em>, as those can be read and communicated by assistive technology.

Priority: Moderate Unknown Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Observation Details

The form "Jetzt buchen" uses multiple steps. It however does not conditionally reveal or hide content or form questions on the first two questions.

Evaluate removing steps that do not conditionally influence later steps.

Priority: Serious Medium Page: Magenta TV Streaming Dienste Partner wow 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: Best Practice Unknown Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Accompanying Files
Observation Details

In "Jetzt buchen" dialog window, "Weiter" element is button until the last step. Then, "Weiter" becomes a link. The element however looks the same and is labeled the same.

While not a failure of a success criterion within WCAG 2.2 AA, using the same element with exact same label but different functionality might confuse users.

Remediation Notes

Ensure, using the same elements only for the same functionality. Ideally, buttons and links are visually distinguishable. If they are not, the label should indicate the action. E.g., when coming to the last step, change the visible label to "Zur Buchungsseite" to indicate, leaving the current page, instead of going to a next step in the form.

Priority: Serious Low Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Observation Details

The page uses HTML list elements for non-list content. See

  • class="container-grid--list"

  • class="col-item-first" also is a list item with no visible content

Remediation Notes

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

Priority: Best Practice Low Page: Magenta TV Streaming Dienste Partner wow Observation Permalink
Accompanying Files
Observation Details

  • Checkmark and Plus icons in list markers represent different states (zubuchbar vs. inklusiv)

While sighted users can directly compare the two tariff options, users of assistive technology do not get this difference announced, besides the text content. As the text content arguably is a text alternative, the icons for the second list item ("WOW Premium") have a purpose equivalent alternative present.

The list items from the first lists however do not include "inklusive" wording.

So while the items that do have the equivalent text alternative present are the ones that might confuse users, those are not triggering a fail of the success criterion.

As this is not a strict failure of the criterion, this observation is marked "Best Practice". Alternative methods of presentation of comparable data like this should be evaluated.

Remediation Notes