19 issues found on Sport

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.

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.

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

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.

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.

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.

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>

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

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

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.

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.

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.

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.

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.

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

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

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

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.

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.