Zum Hauptinhalt springen

WordPress & Accessibility

 points

Das Accessibility Team bei WordPress nimmt sich dem Thema Zugänglichkeit schon länger an und es fließen immer wieder Verbesserungen in die Weiterentwicklung mit ein. Man kann dem Team auch beitreten und aktiv an der Weiterentwicklung mit arbeiten und auch selbst dazu beitragen, dass mit WordPress erstellte Websites und Blogs so barrierefrei wie möglich sind, indem man sich Gedanken bei der Theme-Entwicklung und der Inhalts-Erstellung macht.
Im WordPress Theme Verzeichnis kann man nach „für Barrierefreiheit geeignet“ filtern.

In diesem Artikel:

Wenn man ein WordPress-Theme erstellt oder anpasst, sollte man sich im Vorfeld die folgenden Fragen stellen und beantworten:

Überlegungen zu (m)einem Blog

  • Logo + Name oder nur Name / Headline
  • Hauptnavigation
  • Suchfunktion: Suche in der Navigation oder Suche in der Seitenspalte (nicht zweimal wenn möglich)
  • Liste der Beiträge mit Infos: Datum, Kategorien, Autor
  • Detailansicht der Beiträge + Kommentarfunktion
  • Kategorie-Liste
  • Footer mit Footer-Navigation

Weiteres

  • Welche Elemente soll das Blog als Basis haben?
  • Wie kann man diese Elemente barrierefrei gestalten?
  • Gute Headline-Struktur ist wichtig  (h1, h2…)
  • Barrierefreies Bauen: Links (identifizierbar, eindeutig, aussagekräftig), Farben (Kontrast), sinnvolle Headline-Struktur (DOM), Bilder mit guten Alt-Texten
  • Es muss immer erkennbar sein, was passiert wenn ich etwas anklicke
  • Frühzeitiges Prüfen mit dem Screenreader
  • Tab-Order frühzeitig prüfen
  • Was kann man sonst noch an sinnvollen Features anbieten?

Beispiel Suche im Head: Sollte von Anfang an gut durchdacht sein:

  • Kein Button der das Suchfeld erst aufruft, Suchfeld sollte sofort da sein, deutlicher Button mit „Absenden“ darauf oder Icon mit gut befülltem aria-label „Suche absenden“

Gute Plugins zur Verbesserung des Barrierefreiheits-Handling

Generell gilt, dass man immer mal wieder schauen sollte, was an Plugins, die die Barrierfreiheit unterstützen und verbessern, angeboten wird. Außerdem sollte man auch diejenigen, die man schon im Einsatz hat, immer wieder mal kritisch überprüfen. Manchmal schafft man sich durch den Einsetz eines Plugins neue Barrieren. Auch sollte man gut überlegen, ob man wirklich ein Plugin braucht, oder ob man etwas anders lösen könnte, denn so wenige Plugins wie möglich im Einsatz zu haben, ist am besten.

Hier ein paar Plugin-Beispiele:

Was kann ich tun, um den Inhalt meines Blogs / meiner Website so barrierefrei wie möglich zu gestalten?

  • Linkziele:
    Nutzer sollten immer wissen, was sie erwartet: Nutzer sollten selbst entscheiden, ob ein Link in einem neuen Fenster/Tab geöffnet werden soll. Wenn man es unbedingt machen möchte, sollte ein Hinweis da stehen, dass der Link in einem neuen Fenster geöffnet wird. Wenn man auf Dokumente linkt, sollte das Datei-Format erwähnt werden. Man sollte kein title-Attribut verwenden, da Screenreader unterschiedlich damit umgehen.
  • Gute Linktexte:
    Der Link sollte beschreiben, wo er hingeht und der Text sollte für sich stehen können, da manche Nutzer den Screenreader so benutzen, dass er eine Linkliste vorliest. Außerdem können auch alle anderen Nutzer den Text so besser nach Informationen scannen. Nicht benutzen: Klicke hier, Mehr Info, Download. Keine Links in nur Großbuchstaben. Keine URLs als Linktext.
    Verlinkte Bilder: Am besten gibt man dem alt-Attribut des Bildes die Link-Destination
  • Überschriften: Gute sprechende Überschriften und Einhalten der Überschriften-Hiercharchie
  • Lesbarkeit: Gute Textstruktur, zum Beispiel mit einer Zusammenfassung zu Beginn, kurze leicht verständliche Textblöcke mit Abständen, Überschriften, Listen, bedeutungsvolle Text-Links, keine Zentrierung, keine Wörter in Großbuchstaben, sparsame Verwendung von kursiver und fetter Schrift, hoher Zeilenabstand und große Textgröße, Breite des Inhalts nicht zu weitläufig
  • Alternativer Text bei Bildern
  • Zugängliche PDFs („Tagged pdfs“)
  • Farben: kontrastreiche Farben verwenden und die Kontraste checken (es gibt onlinen viele Kontrast-Checker).
  • Elemente nicht nur per Farbe kennzeichnen: z. B. auch Unterstreichung oder zusätzliche Symbole

Quelle: Make WordPress accessible: Content best practices

Entwicklung

Im Theme Review Handbuch von WordPress gibt es eine gute Checkliste, die alle Kriterien auflistet, die man bei der Zugänglichkeit von Themes beachten muss. Sie beinhaltet:

Es ist wirklich zu empfehlen, sich dieses Handbuch gut durchzulesen.

Kurse / Videos / Podcasts

Bei LinkedIn gibt es von Joe Dolson* einen Kurs zum Thema WordPress und Accessibility, der allerdings von 2019 ist. Von ihm stammt das WordPress Plugin „WP Accessibility“, das wir hier im Blog auch verwenden. Das Plugin wird immer wieder geupdated. Hier gibt es ein YouTube Video zum Plugin.

Weiteres Video zu den Themen WP Accessibilty Plugin, Accessibility ready themes im WordPress Repository, und mehr.

Podcast zum Thema „Joe Dolson on How To Fix the Six Most Common Accessibility Errors on Your Websites„

*Joe Dolson: WordPress Core Committer, WordPress Plugin Entwickler, und Web Accessibility Consultant

Weitere Links zum Thema

Vom BITV geprüfte barrierefreie Websites, die WordPress verwenden
Barrierefreie Website mit WordPress umsetzen
WordPress Codex – Accessibility
Make WordPress Accessible
Make WordPress Accessible – Tools

Verwandte Beiträge

a11yphant – leichter Einstieg ins Lernen von Barrierefreiheit im Web A11y-Nugget: SVG als Button – so wird es zugänglich Gute Beispiele für barrierefreie Websites Häufige Probleme mit ARIA Designen für Sehschwäche