Accompanying Files
Observation Details
The sports league logos in section "Welchen Sport wollen Sie live bei MagentaTV sehen?" do not have purpose equivalent text alternatives set. The images use the league names as accessible names. As the images are used as interactive elements, they are used as functional images, making the function of the interactive element the purpose of the image. Simply naming the sports league does not describe the element's function accurately.
Remediation Notes
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>