Zum Inhalt springen
A11ySignal

Eine WordPress-Website barrierefrei machen

WordPress-Entwickelnde und Website-Betreuende · 7 Min. · aktualisiert

WordPress-Core ist in ordentlichem Zustand und hat ein Barrierefreiheits-Team mit echten Standards. Fast nichts, was auf einer WordPress-Website fehlschlägt, kommt aus dem Core.

Es kommt aus dem Theme, dem Page-Builder, den Plugins und zwölf Jahren hochgeladener Bilder ohne Alternativtext. Das sind die vier Stellen, an denen man nachsieht.

Die Mediathek ist der größte Einzelgewinn

Jedes je hochgeladene Bild hat ein Alt-Feld, und auf den meisten Websites sind die meisten davon leer. Das ist eine Sammelbearbeitung von einer großen Verbesserung entfernt, und es ist Arbeit, die eine Redakteurin ohne Entwickler erledigen kann.

Zwei Regeln machen es schnell: Trägt das Bild Information, schreiben Sie, was Sie sagen würden, wenn Sie die Seite vorlesen; ist es Dekoration, lassen Sie das Alt leer, statt den Dateinamen einzutippen. Leer ist richtig und still — fehlend ist es nicht.

Page-Builder

Elementor, Divi, WPBakery und ihresgleichen erzeugen tiefe `div`-Strukturen mit einem Styling, das nur wie Semantik aussieht. Überschriften werden zu gestyltem Text, Schaltflächen zu verlinkten Divs, und Akkordeons kommen ohne `aria-expanded`.

Die Ausgabe des Builders können Sie meist nicht umschreiben, aber Sie können seine Widgets sorgfältig wählen: das Überschriften-Widget statt eines gestylten Textblocks, das Button-Widget statt eines verlinkten Bildes — und prüfen, was jedes davon ausgibt, bevor es auf fünfzig Seiten steht.

  • nicht soÜberschriften-Widgets, deren Ebene nach der Größe gewählt wurde statt nach ihrem Platz in der Gliederung.
  • nicht soIcon-Boxen und Bild-Boxen, die eine ganze Karte in einen Link packen, ohne zugänglichen Namen.
  • nicht soSlider mit Autoplay und ohne Pause-Bedienung.
  • nicht soTabs und Akkordeons ohne Tastaturverhalten und ohne ARIA-Zustand.

Themes

Prüfen Sie, ob das Theme `accessibility-ready` deklariert — WordPress.org prüft dieses Schlagwort gegen eine echte Checkliste, und es ist ein aussagekräftiges Signal. Die meisten kommerziellen Themes tragen es nicht.

Welches Theme auch immer: vier Dinge muss man direkt prüfen. Ist der Sprunglink vorhanden und wird er bei Fokus sichtbar; ist der Fokus auf jedem Bedienelement sichtbar; funktioniert das mobile Menü per Tastatur; und ergeben die Überschriftenebenen in den Templates eine Gliederung.

Plugins

Formulare, Cookie-Banner, Popups und Such-Widgets sind die Stellen, an denen eingeschleustes Markup ankommt. Gerade Kontaktformular-Plugins unterscheiden sich enorm: Manche geben ordentliche Beschriftungen und Fehlerzuordnungen aus, andere Platzhalter und einen roten Rahmen.

Testen Sie ein Formular, indem Sie es mit laufendem Screenreader leer absenden. Wird nichts angesagt und bewegt sich der Fokus nicht, verstößt das Plugin gegen 3.3.1 — und aus dem Theme heraus werden Sie das nicht reparieren.

Womit anfangen

In dieser Reihenfolge, weil jeder Schritt billiger ist als der nächste.

  • tunPrüfen Sie Startseite, einen Beitrag, ein Seiten-Template, die Suchergebnisse und die Kontaktseite.
  • tunBeheben Sie den Kontrast in den CSS-Variablen des Themes — eine Änderung, ganze Website.
  • tunArbeiten Sie die Mediathek für die Bilder durch, die tatsächlich verwendet werden.
  • tunTesten Sie das Kontaktformular mit Tastatur und Screenreader. Tauschen Sie das Plugin, wenn es durchfällt.
  • tunRichten Sie einen wöchentlichen Scan ein, damit ein Plugin-Update es nicht still rückgängig macht.

Fragen

Ist WordPress barrierefrei?
Der Core ist in ordentlichem Zustand, und der Block-Editor wird stetig besser. Was bei Besuchenden ankommt, ist Core plus Ihr Theme plus Ihre Plugins plus Ihre Inhalte — und die Fehlschläge kommen fast immer aus den letzten drei.
Beheben Barrierefreiheits-Plugins die Barrierefreiheit von WordPress?
Plugins, die beim guten Verfassen helfen — Hinweise auf fehlenden Alternativtext, Kontrastprüfer im Editor — sind wirklich nützlich. Plugins, die ein Overlay-Widget einschleusen, reparieren das darunterliegende Markup nicht.
Was bedeutet „accessibility-ready“ bei einem Theme?
Es ist ein Schlagwort, das WordPress.org gegen eine veröffentlichte Checkliste prüft: Tastaturnavigation, Kontrast, Überschriften und Formulare. Es ist keine Konformitätsgarantie, aber es heißt, dass jemand hingesehen hat.

Weiterlesen