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

4.1.2 Name, Role, Value (A) League information collapsible not using proper semantic HTML elements

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