Was du jetzt auf deiner WordPress-Website für mehr Barrierefreiheit tun kannst

Unser letzter Blogbeitrag handelte vom «European Accessibility Act». Das ist eine EU-Richtline, die zum Ziel hat, das digitale Leben in Euro weitgehendst barrierefrei zu machen: https://arteeo.ch/ab-juni-2025-muessen-eu-unternehmen-die-regeln-im-european-accessibility-act-umsetzen-warum-das-auch-die-schweiz-betrifft/.

Heute wollen wir darüber schreiben, was du als Website-Betreiber mit WordPress für mehr Barrierefreiheit tun kannst.

WordPress kümmert sich seit vielen Jahren intensiv um Barrierefreiheit. Es gibt ein «Accessibility Team» und auch ein «Accessbility Handbook» für Webentwickler und Designer von WordPress Themes, also dem Code, der den visuellen Look einer WordPress-Website bestimmt.

Wenn du mehr auf Barrierefreiheit achten willst, empfehlen wir, zuerst mal deine Website zu überprüfen. Dazu gibt es verschiedene Tools, die vom W3C, dem Worldwide Web Consortium, aufgelistet werden: https://www.w3.org/WAI/test-evaluate/tools/list/. Weiter gibt es kommerzielle WordPress-Plugins, die ebenfalls Tests durchführen können, ja sogar Probleme bei Barrierefreiheit beheben.

Ein Open-Source-Plugin, das wir bereits ein wenig ausgetestet haben, nennt sich WP Accessibility. Mit über 50’000 aktiven Installationen ist es das populärste Plugin auf WordPress.org für Barrierefreiheit:

Es hilft tatsächlich Probleme zu beheben, jedoch ist es etwas schwach, wenn es ums Website-Testen von Barrierefreiheit geht.

Tools, um Barrierefreiheit zu testen: IBM Equal Access Accessibility Checker & WAVE web accessbility evaluation tool

Beide Tools gibt es nur als Browser-Erweiterung, obschon wir einmal das WAVE-Tool über das Eingabefeld auf der Website von WebAIM, die das Tool entwickeln, testen konnten.

Beginnen wir dem Tool von IBM:

IBM Equal Access Accessibility Checker

Das erste Tool von IBM gibt es als Browser-Erweiterung für Google Chrome, Firefox und Microsoft Edge: https://www.ibm.com/able/toolkit/tools/#develop

Die Übersichtsseite der Erweiterung im Chrome Web Store:

Von der Anwendung her ist das eindeutig ein Tool für Personen mit etwas Code-Erfahrung, denn wenn du eine Seite überprüfen willst, geht das nur über das Aktivieren der Developer-Tools im Browser. In Chrome geht das über einen Rechtsklick mit der Auswahl von «Element Inspizieren (English: «Inspect Element»).

In den Developer-Tools findest du ganz rechts den Tab «Accessibility Assessment». Sobald du den Tab klickst, öffnet sich der «IBM Equal Access Accessibility Checker».

Klick den blauen Button «Scan»:

Es braucht einen Moment, bis der Scan durch ist, dafür bekommst du ausführliche Daten, die du als Excel-Datei exportieren kannst.

Ja, der Titel des Tools tönt sehr abstrakt, aber die Informationen, die du über deine Website erhältst, sind sehr konkret, wie du unten sehen kannst:

Das Fenster des Checker-Tools liegt über unserem Blogbeitrag und wir sehen, dass es Potential zur Verbesserung gibt, was wir abklären werden.

Nach Schweizer Vorschriften ist eine private oder nicht-staatliche Website (noch) nicht verpflichtet, sich besonders für Barrierefreiheit einzusetzen, obschon es selbstverständlich zu empfehlen ist.

Sehen wir doch mal das Checker-Tool in Aktion auf einer Website, die gemäss des Schweizer «eCH-0059 – Accessibility Standard» besonders barrierefrei sein sollte. Es handelt sich um die Einstiegsseite des Schweizer Bundesrates: https://www.admin.ch/gov/de/start.html.

Aus der langen Liste von «Issues», also Problemen, müssten wir konstatieren, dass der Bundesrat keine ausserordentlich barrierefreie Website betreibt. Oder plant sie, konnte sie aber noch nicht umsetzen.

Wir halten fest, dass die betreffende Website nicht auf WordPress läuft, was voreingestellt bereits eine gute Basis von Barrierefreiheit bieten würde. Wir finden, es ist viel schwieriger eine barrierefreie Website aufzubauen, ohne auf solides Gerüst wie ein modernes CMS (Content Management System) zurückgreifen zu können.

WAVE web accessibility evaluation tool

WebAIM ist eine gemeinnützige Organisation der University of Utah in den USA und bietet Lösungen für Web-Barrierefreiheit seit 1999 an. Sie haben auch das WAVE-Tool entwickelt, um die Barrierefreiheit einer Website zu testen.

Es gibt vom Tool Browser-Erweiterungen für alle populären Browser:

Hier braucht es keinen Rechtsklick mit der Maus, um Entwicklertools zu aktivieren. Es genügt, die Erweiterung – z.B. in Google Chrome – zu «pinnen», damit man das Tool im obersten Browserbar öffnen kann, wenn man sich auf einer zu testenden Seite befindet.

Im Beispiel unten testen wir den gleichen Blogbeitrag auf Arteeo, wie mit dem IBM-Tool oben:

Interessanterweise erhalten wir weit weniger Beanstandungen. Unter «Errors» steht sogar eine Null. Offenbar liegt es an den Machern dieser Tools zu definieren, was genau fehlerhaft ist und was nicht.

Testen wir das Tool an der Bundesrat-Website kommen wir auf 19 Fehler.

Das sind keine gravierenden Fehler. Da die Bilder der Bundesrätinnen und Bundesräte etwas komplex mit JavaScript verbunden sind, scheint es deshalb keine alternative Texte zu geben.

Wir finden es gut, dass gerade dieser Fehler angezeigt wird, da er aus unserer Sicht der häufigste ist. Wie man ihn beheben kann, werden wir unten in unseren Top-Tipps ausführlich besprechen.

Welches Tool du für Tests verwenden willst, liegt an dir. Wir haben die Unterschiede bei den Ergebnissen noch nicht vertieft angeschaut, vermuten jedoch, dass sie mit einer abweichenden Auslegung der Web Content Accessibility Guidelines, des Worldwide Web Consortium, zu tun haben.

Unsere Top-Tipps, um die Barrierefreiheit deiner Website zu verbessern

Wir wissen, dass es mit dem Einrichten und dem Betrieb einer Website viel Arbeit gibt. Auch eilt es meistens, wenn neue Inhalte, vor allem Bilder, in eine Website eingepflegt werden sollen. Wenn du nur einen der Tipps unten regelmässig beachten und umsetzen kannst, dann hast du bereits viel erreicht. Ein Grossteil der Arbeit, eine Website barrierefrei zu machen, nimmt dir WordPress bereits ab.

Bilder mit dem ALT (Alternative) Image Attribute (ALT-Text) versehen

Jede Seite auf dem Web hat eine Struktur bestehend aus HTML (hypertext markup language), eine Auszeichnungssprache, die Text gliedert und formatiert, damit er maschinenlesbar wird. HTML hat Tags, die du jeweils an seltsam eckigen Klammern erkennst.

Ein Beispiel ist der <img> Tag:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Bei W3Schools kannst du direkt mit HTML oben spielen: https://www.w3schools.com/tags/att_img_alt.asp.

Wenn du das Link aufrufst, findest du einen Button Try It Yourself (Probiere es selbst). Dort kannst du den Text zwischen alt=” ” frei verändern.

Der HTML-Tag <img> hat jede Menge Attribute: https://www.w3schools.com/tags/tag_img.asp.

Das Attribut «Alt» legt einen alternativen Text fest, falls das Bild nicht angezeigt werden kann. Beim frühen Internet mit bescheidenen Geschwindigkeiten konnte oft ein Bild nur sehr langsam oder gar nicht geladen werden.

Heute wird das Alt-Attribut vor allem von Screenreaders genutzt, also Geräten bzw. Software, die Texte von Websites vorlesen, entweder akustisch oder über eine Braillezeile, wie wir im letzten Beitrag geschrieben haben.

Wenn du also zu einem Bild unter «Medien» (die Mediathek, wie es früher hiess) in deinem WordPress-Adminbereich eine kurze Bildbeschreibung anbringen kannst, dann verbesserst du die Interaktion mit deinen Website-Inhalten für Menschen, die bei der visuellen Wahrnehmung Einschränkungen haben.

Zusätzlich bekommst du SEO-Vorteile: Google kann über das Alt-Attribut, falls es gesetzt ist, in der Bildersuche deine Bilder besser einordnen und so Besucherinnen zu deiner Website bringen.

Wie finde ich fehlende Alt-Attribute (im <img> HTML-Tag)?

Mit WAVE kannst du eine komplette Seite runterscrollen und fehlende Alt- Attribute erkennen:

Alternativer Text unter WordPress Admin – Medien anbringen

Das Feld Alternativer Text ist für das Alt-Attribut bei Bildern vorgesehen. Wenn du z.B. unter dem Bild eine Bildlegende anbringst, dann geht das über das Feld Beschriftung. Das Feld Beschreibung übrigens ist nur für internen Gebrauch gedacht, z.B. Copyright-Infos usw.

Das Feld Titel ist wichtig, wenn du viele Bilder auf deiner Website hast. Weil über dieses Feld kannst du nach Bildern suchen, z.B. wenn sie nicht mehr relevant sind und du sie löschen oder ersetzen willst. Wenn da ein Bild bloss einen Titel wie «Bild1» usw. hat, kann sich eine Bildsuche aufwändig gestalten.

Als Anmerkung: Wir haben zum Thema Bilder beschriften 2023 einen Beitrag geschrieben: «Website-Bilder für Nutzer und SEO vorbereiten in nur zwei Schritten: Bilddateinamen & Bildformat/Bildgrösse».

SEOPress – Image SEO aktivieren und Alt-Text automatisch generieren lassen

In unserem Beitrag aus dem Jahre 2023 (siehe oben) haben wir die Funktion Image SEO des SEO-Plugins SEOPress erwähnt.

Es macht immer Sinn, dein Bildmaterial gut zu beschriften. Wenn du nicht individuell für jedes Bild einen Alt-Text schreiben willst, kannst du wie unten dargestellt für jedes neue raufgeladene Bild einen automatischen Alt-Text generieren lassen. Wenn der Dateinamen bereits recht gut den Inhalt des Bilds beschreibt, kann das eine enorm zeitsparende Massnahme sein, die Menschen mit visuellen Einschränkungen eine Mindestinformation über ein Bild gibt.

Links mit beschreibendem Link-Text & Links sichtbarer darstellen

Wenn deine Nutzer Screenreader verwenden, benötigen sie Links, die beschreiben, wohin ein Klick aufs Link führen wird. Übrigens: ist das für alle Nutzer ein Gewinn, sogar punkto Suchmaschinenoptimierung. Ja, du kannst sogar SEO-Keywords in eine Link-Beschreibung einfügen.

Schlechte Linktexte, die es leider immer noch zuhauf gibt: «Klick Hier», «Hier», «Link», usw.

Ganz früh im Web waren alle Links blau und unterstrichen. Für Menschen mit Defiziten in der visuellen Wahrnehmung waren solche Links leicht zu erkennen. Leider ging dieser Standard wegen Design-Bedenken (die Farbe Blau kann durchaus den Farbenmix einer Website etwas durcheinanderbringen) verloren. Auch wir überlegen uns, wie wir Links in unserem Blog besser darstellen können.

Starke Kontraste zwischen Text- und Hintergrundfarben – Browser-Erweiterung Contrast Ratio Checker

Wenn du unabhängig vom Farbenmix deines WordPress-Themes Farben für bestimmte Bereiche deiner Website einsetzen willst, beachte den Kontrast zwischen Vorder- und Hintergrund.

Es gibt einige «Contrast Checker» als Browser-Erweiterungen. Die meisten verlangen jedoch, dass du den Farbcode im Hex-Format eingibst. Das ist ein Code, der in der Website-Entwicklung wichtig ist. Wenn du ihn nicht kennst, bedeutet es Extraaufwand, den Code zu eruieren.

Viel besser ist da eine Browser-Erweiterung für Chrome, die wir gefunden haben: https://chromewebstore.google.com/detail/contrast-ratio-checker/doonhmibogkgpoonahigdjbpjbpjoebp.

Nachdem du die Erweiterung oben in der Werkzeugleiste «gepinnt» hast, gehst du einfach auf den Website-Bereich, den du testen willst.

Im Beispiel unten, haben wir zuerst «Color 1» geklickt im Popup. Daraufhin wurde eine Lupe aktiviert, die wir zum Bereich führten, dessen Kontrast wir messen wollten: Eine Box, die unsere Kundinnen und Kunden informiert, dass sie Premium-Plugins und Themes nutzen können.

Die Textfarbe ist das ultimative Schwarz, in Hex-Notation: #000000. Die Hintergrundfarbe dagegen ist ein leicht graues Blau. Dank der Lupe mussten wir keinen Hex-Wert eingeben. Der Contrast Checker zeigt sofort das Kontrastverhältnis: 17.40, sowie, dass die WCAG (Web Content Accessibility Guidelines) erfüllt sind mit dem Wert «True» (Wahr).

Damit wären wir am Ende unserer Tipps, jedoch nicht an den Möglichkeiten, deine Website barrierefreier zu machen. Wir sind der Meinung, dass die Verantwortung primär beim Webdesigner liegt, also in WordPress zuerst beim Theme-Designer.

Jedoch mit den Hinweisen oben kannst du als Website-Betreiber, der sich um Inhalte kümmert, bereits sehr viel bewirken.

Wenn du Fragen zu Barrierefreiheit deiner Website hast, schreibe uns oder kommentiere unten. Danke!