role="img"
Komponente als Bild funktionalisieren
[Materialsammlung]
Eine Komponente mit role="img" wird als ein Bild aus den Kindelementen der Komponente interpretiert.
Technische Realisierung
Das Attribut wird in den Container eingefügt, der technisch mit all seinen Kindelementen als Bild fungieren soll.
Der Alternativtext wird mittels aria-label oder aria-labelledby zugewiesen. Fehlt eine solche Beschriftung, wird die Komponente teilweise von Browsern nicht als Bild interpretiert.
Alle Kindelemente erhalten automatisch role="presentation", ihnen wird also jegliche Semantik entzogen.
<div aria-label="[Alternativtext]" role="img" > [HTML Elemente] </div>
Beispiel: Schalter als Abbildung
In folgendem Beispiel wird ein Fokuseffekt dargestellt, wie er für das Erfolgskriterium 2.4.13 hinreichend ist. Da es lediglich um die visuelle Darstellung des Effekts geht und der Schalter über keine Funktion verfügt, kann der Effekt als Abbildung mittels role=img dargestellt werden:
Klicken Sie auf den folgenden Link, um den Fokus auf den Schalter zu setzen.
Beobachtungen zum Beispiel: Schalter als Abbildung
Die folgenden Beobachtungen wurden unter JAWS 2024 und Google Chrome 119 gemacht.
- Der Schalter wird korrekterweise nicht in der Liste der Formularfelder aufgelistet. (JAWS-Taste+F5)
- Der Schalter wird korrekterweise nicht mit einer Kurztaste angesprungen. (B für Schalter oder F für Formularkomponente)
- Durch Drücken von Tabulator kann der Fokus auf den Schalter gesetzt werden.
- Der vorangestellte Inline-Link setzt den Fokus auf den Schalter.
- Auf dem Schalter lassen sich sowohl Fokuseffekte, als auch Hover-Effekte visuell auslösen.
- Bei der Auflistung vorhandener Grafiken wird der Wert des Attributs
aria-labelangezeigt.
(JAWS-Taste+STRG+G)