Accompanying Files
Observation Details
In the filter section, the purpose of the manufacturer's logos is to filter device list by manufacturer. The image's purpose is to communicate, depending on filter status, "Zeige Geräte von MANUFACTURER".
The logos use the name of the manufacturer as its text alternative which does not serve the equivalent purpose of what the image is communicating.
Remediation Notes
Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Geräte von Apple anzeigen". Ensure to deliver accessible, purpose equivalent text alternatives for all filter states.
No manufacturer filter selected: "Nur Geräte von MANUFACTURER anzeigen"
One manufacturer filter selected
selected filter: "Alle Geräte anzeigen"
non-selected filter: "Geräte von MANUFACTURER anzeigen"
Multiple manufacturer filters selected
selected filter: "Geräte von MANUFACTURER nicht mehr anzeigen" (or ideally even announcing the still selected filters, see notes below)
non-selected filter: "Geräte von MANUFACTURER anzeigen"
One possible solution would be to use native checkbox inputs for the manufacturer filters. But the structural idea down below can be used with other methods as well.
<fieldset>
<legend>Filter nach Endgeräte-Hersteller</legend>
<input type="checkbox"
id="manufacturer-apple"
name="manufacturer"
value="Apple"
checked />
<label for="manufacturer-apple">
<svg><title>Apple</title>...</svg>
</label>
<input type="checkbox"
id="manufacturer-google"
name="manufacturer"
value="Google" />
<label for="manufacturer-google">
<svg><title>Google</title>...</svg>
</label>
<input type="checkbox"
id="manufacturer-samsung"
name="manufacturer"
value="Samsung"
checked />
<label for="manufacturer-samsung">
<svg><title>Samsung</title>...</svg>
</label>
<input type="checkbox"
id="manufacturer-telekom"
name="manufacturer"
value="Telekom" />
<label for="manufacturer-telekom">
<svg><title>Telekom</title>...</svg>
</label>
<input type="checkbox"
id="manufacturer-xiaomi"
name="manufacturer"
value="Xiaomi" />
<label for="manufacturer-xiaomi">
<svg><title>Xiaomi</title>...</svg>
</label>
</fieldset>From there work with the ids of checked/unchecked to create the accessible names by dynamically adding IDs of checked inputs. This way, you could create something like "Geräte von MANUFACTURER nicht mehr anzeigen. Es werden Geräte gezeigt von: CHECKED_MANUFACTURERS"