Observation Details
The selection of sports channels in section "Welchen Sport wollen Sie live bei MagentaTV sehen?" is not accessible by keyboard navigation. Depending on classification of page purpose, the selection of sports channels, leading to the recommendation of a tariff option ("Empfehlung" system) is a main function of the page. Having this function not available to keyboard users is a crucial error.
The interactive elements for the sports channel selection do not use semantic HTML structure and trying to rebuild functionality with non-interactive or with different interactive elements. E.g. a button element is used with a switch role to mimic functionality of a checkbox.
Remediation Notes
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.