dekorativ, Text daneben
informativ, allein stehend
Passwort
Icon-Button mit aria-label
Icon-Button mit verstecktem Text
Beispiel zur Notiz „SVG-Icons barrierefrei einbinden“
Vier Muster: dekoratives Icon neben Text, informatives Icon allein, Icon-Button mit aria-label und Icon-Button mit visuell verstecktem Text. Den Unterschied hört man nur mit einem Screenreader, sichtbar sind alle gleich.
Die Ansagen in Screenreadern sind nicht getestet. Die Muster folgen MDN und Scott O'Hara, siehe Notiz.
Getestet in Chrome 155. Browserstand und Einordnung: siehe Notiz.
dekorativ, Text daneben
informativ, allein stehend
Passwort
Icon-Button mit aria-label
Icon-Button mit verstecktem Text