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:
https://de.wordpress.org/themes/tags/accessibility-ready/
Wenn man ein WordPress-Theme erstellt oder anpasst, sollte man sich im Vorfeld die folgenden Fragen stellen und beantworten:
Was braucht (m)ein 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
Überlegungen
- 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:
- TinyMCE Advanced: Zur leichteren Eingabe von HTML-Auszeichnungen
https://wordpress.org/plugins/tinymce-advanced/ - hurrakify: Hurraki ist ein Wörterbuch, das Alltagsbegriffe in einfacher Sprache erläutert. Das Plugin hurrakify ermöglicht es, sich zu einzelnen Begriffen aus einem Text Erläuterungen aus Hurraki anzeigen zu lassen.
https://de.wordpress.org/plugins/hurrakify/ - Access Monitor: Der Access Monitor prüft die WordPress-Inhalte auf Barrierefreiheit. Wie alle automatischen Testtools benötigt man Erfahrung mit digitaler Barrierefreiheit oder viel Zeit, um die einzelnen Fehlermeldungen nachvollziehen zu können. Das Tool kann auch nicht sagen, ob Bilder einen sinnvollen Alternativtext haben, das muss man selbst entscheiden. Hierbei handelt es sich um ein Freemium-Modell. Es gibt eine kostenlose sowie eine kostenpflichtige Variante.
https://de.wordpress.org/plugins/access-monitor/ - Content Author Accessibility Preview: Zeigt Inhalte-Erstellern eventuelle Probleme mit der Barrierefreiheit, bevor der Beitrag veröffentlicht wird.
https://de.wordpress.org/plugins/content-author-accessibility-preview/ - Contact Form 7: Accessible defaults: generates accessible contact form defaults in Contact Form 7.
https://wordpress.org/plugins/contact-form-7-accessible-defaults/ - WP Accessible Twitter Feed: provides a minimal Twitter feed for easier accessibility
https://wordpress.org/plugins/wp-accessible/ - WP Accessibility: can help non-technical site owners correct a variety of technical accessibility issues within many WordPress themes.
- Enable skip links with WebKit support by enqueuing JavaScript support for moving keyboard focus.
- Add skip links with user-defined targets.
- Add language and text direction attributes to your HTML attribute
- Add a :focus outline to focusable elements.
- Toggle for high-contrast and large font stylesheets
- Add support for the longdesc attribute
https://wordpress.org/plugins/wp-accessibility/
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:
- Keyboard Navigation
- Controls
- Skip Links
- Forms
- Headings
- ARIA Landmark Roles
- Content Links
- Repetitive Link Text
- Contrasts
- Images
- Media
- Screen Reader Text
- Tables
- Not Allowed
- Recommended
- Accessible Read more links
- wp.a11y.speak()
- Post excerpts & Links (Archive pages)
- Don’t use Infinite Scroll
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