ARIA-Attribute zur Verbesserung der Barrierefreiheit

Ein Plugin zur Verbesserung der Barrierefreiheit dekorativer Bilder: Attributes for Blocks

Wenn man z. B. dekorative Bilder bei einer WordPress-Instanz verwenden will, dann ist es sinnvoll, das Attribut aria-hidden zu verwenden. Leider fehlt diese Option als Eigenschaft zumindest derzeit noch bei den Blöcken in WordPress. Mit einem leichtgewichtigen Plugin kann man das Problem aber wunderbar beheben. Wie man das macht, zeige ich in dem folgenden Beitrag.

Was sind dekorative Bilder?

Dekorative Bilder sind rein ästhetische Elemente ohne informativen Wert – sie schmücken die Seite, wiederholen Textinhalte oder dienen als Layout-Füller (z. B. Stockfotos, Hintergründe, Icons, Trennlinien). Sie tragen nichts zum Verständnis bei, was nicht bereits im umliegenden Text steht.

Hier ein Beispiel:

Wir sehen hier u. a. das SVG-Icon „€“. Wenn man bei diesem dekorativen Bild einen Alt-Text z. B. „Euro-Icon“ hinterlegt hätte, dann würde bei einem Screenreader der Text „Euro-Icon“ und danach „Link-Preise“ vorgelesen. Lässt man den Alt-Text leer, dann wird z. B. „Bild“ vorgelesen. Beide Optionen machen natürlich nicht viel Sinn. Hier kommen die Aria-Attribute ins Spiel.

ARIA-Attribute und WordPress

ARIA-Attribute (Accessible Rich Internet Applications) erweitern HTML um semantische Informationen für Screenreader und assistive Technologien. ARIA-Attribute sollten allerdings nur verwendet werden, wenn natives HTML unzureichend ist.

Ohne aria-hidden: Screenreader sagt „Bild“ bei jedem Icon, wenn der Alt-Text leer ist.
Mit aria-hidden: Screenreader überspringt das Icon komplett

In unserem Fall soll das Icon z. B. für das SVG-Icon „€“ vom Screenreader natürlich nicht vorgelesen werden. Aus dem Grund bietet sich die Verwendung von aria-hidden an.

Leider bietet aktuell WordPress standardmäßig keine Option. Aber es gibt ein schönes, leichtgewichtiges Plugin, mit dem man das nachbessern kann: Attributes for Blocks

Schauen wir uns dazu zunächst den Code ohne das aria-hidden-Attribut in der developer console an:

Info

Die Developer Console ist ein integriertes Browser-Tool zur Fehleranalyse und Optimierung von Webseiten. Sie zeigt JavaScript-Fehlermeldungen, Netzwerkanfragen, DOM-Manipulationen und ermöglicht Live-Tests von CSS und JavaScript-Code direkt im Browser.
Um in Chrome die Developer Console zu öffnen, kannst du am schnellsten die Tastenkombination F12 verwenden. Alternativ kann man auch per Mausklick mit der rechten Maustaste auf eine beliebige Stelle der Webseite klicken und „Untersuchen“ wählen. Über das Chrome-Menü erreicht man die Tools über die drei Punkte oben rechts, dann „Weitere Tools“ und „Entwicklertools“.

Das Plugin „Attributes for Blocks“

Nach der Installation des Plugins sieht man bei den Eigenschaften rechts unter „Erweitert“ eine zusätzliche Option „Additional attributes“, die durch das Plugin bereit gestellt wird.

In das Feld trägt man in unserem Fall „aria-hidden“ ein. Nach einem Klick auf „Add“ (rechts neben dem Eingabefeld) kann man die Eigenschaft „true“ eintragen.

Wenn wir uns anschließend das Ergebnis im Code ansehen, dann ist wie gewünscht aria-hidden="true" eingetragen.

Damit wird kein Text mehr durch einen Screenreader vorgelesen.

Darüberhinaus können mit dem Plugin

Inline-Styles hinzugefügt werden, um das Erscheinungsbild des Blocks feinabzustimmen,
Datenattribute hinzugefügt werden, um JavaScript-Module zu integrieren,
oder sogar JavaScript-DOM-Ereignisattribute verwendet werden.

Fazit

Das leichtgewichtige Plugin Attributes for Blocks bietet u. a. eine Option für die Eintragung des aria-hidden-Attributs für die Erstellung barrierefreier Websites, die durch WordPress standardmäßig nicht möglich ist.

Links, Quellen und aktuelle Infos

Wir freuen uns über eine Kontaktaufnahme

02722-6577725

info@haurand.com

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden. Hier die bisher versendeten Newsletter

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.