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>
The collapsed content panel uses a generic <div> structure as well.
Those are variants of buttons, none of which are using the actual semantic HTML button element, leading to numerous problems.
Image button cannot be operated, using keyboard navigation
Close button cannot be operated, using keyboard navigation
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.
For more immediate remediation, build the 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