Accompanying Files
Observation Details
The images of sports channels in section "Welchen Sport wollen Sie live bei MagentaTV sehen?" are used as buttons / button labels. Navigating with assistive technology, the image can be selected instead of the button. As such, the button is not even announced properly as an interactive element. Without guessing, there is no announcement that conveys the information of the image being used as an interactive element.
If the image (button) is then clicked using assistive technology, the button is triggered, the change however is not announced. There is
no announcement of selection state,
no announcement of changes made to the "accordion button" showing the count of selected buttons
no announcement of pop-up window with "Empfehlung ansehen" link
Without correct announcements to assistive technology, the section "Welchen Sport wollen Sie live bei MagentaTV sehen?" is rendered completely inaccessible.
Remediation Notes
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 settingrole="switch", etc.