In diesem Artikel gibt es eine ausführliche Anleitung, wie Sie eine barrierefreie WordPress-Webseite erstellen.
Was ist WordPress?
WordPress ist ein praktisches Werkzeug, das es einfach macht, eigene Webseiten zu erstellen und zu verwalten. Man muss nicht programmieren können, um es zu nutzen. Es ist sehr benutzerfreundlich und lässt sich leicht verändern, sodass Sie Ihre eigenen Texte, Bilder und Videos hinzufügen und ändern können. Dank vieler verschiedener Designs und zusätzlicher Funktionen, die man hinzufügen kann, ist WordPress für alles Mögliche geeignet – von kleinen persönlichen Weblogs bis hin zu großen Firmenwebseiten.
Barrierefreies Webdesign – Definition und Umsetzung
Barrierefreies Webdesign bedeutet, dass Webseiten so erstellt bzw. programmiert werden, dass sie für alle Menschen, auch Menschen mit Behinderungen, bedienbar und wahrnehmbar sind. Eine solche Webpräsenz beinhaltet Features wie Alternativtexte für Grafiken, intuitive Menüführung und optimierte Farbkontraste. WordPress unterstützt dies durch zahlreiche barrierefreie Plugins und Werkzeuge, die Konformität mit gesetzlichen Bestimmungen und Richtlinien gewährleisten. Barrierefreies Webdesign ist inzwischen selbstverständlich geworden. In guten Büchern über Webdesign gibt es regelmäßig ein eigenes Kapitel über barrierefreies Webdesign. Auf meinem ganzen Weblog ist barrierefreies Webdesign umgesetzt.
Ziel dieses Artikels
In diesem Artikel zeige ich Ihnen Schritt für Schritt, wie Sie Ihre WordPress-Webseite für alle Besucher einer Webseite benutzbar machen können, auch für jene mit verschiedenen Einschränkungen. Ich schätze WordPress sehr, denn es erlaubt jedem – auch ohne Programmierkenntnisse und unabhängig vom Budget – eine eigene Internetseite zu gestalten. Es ist mir ein besonderes Anliegen, dass wirklich jeder in der Lage ist, seine Ideen und Projekte online zu teilen. Indem wir unsere Webseiten barrierefrei gestalten, stellen wir sicher, dass sie von mehr Menschen gelesen und genutzt werden können.
Barrierefreiheit wird oft auch als Zugänglichkeit bezeichnet. Diesen Begriff werden Sie auch in diesem Artikel an der einen oder anderen Stelle finden.
Richtlinien für Barrierefreiheit
Die EN 301 549 ist in Deutschland und der EU maßgebend, international gelten die Web Content Accessibility Guidelines (WCAG) 2.2. Diese standardspezifischen Richtlinien bzw. Leitlinien sollen garantieren, dass eine WordPress-Website sämtliche Anforderungen zur Einbeziehung von Webseitenbesucher mit Behinderungen berücksichtigt.
WordPress und Zugänglichkeit
WordPress, eine weitverbreitete Plattform zur Erstellung von Websites, legt großen Wert auf Accessibility. Die Gestaltungsgrundlage von WordPress, oft als Themes bezeichnet, ermöglicht es Nutzern, das visuelle Erscheinungsbild ihrer Website problemlos zu gestalten und anzupassen. Bei der Wahl eines WordPress-Themes für eine barrierefreie Website sollten Sie darauf achten, dass das Theme die Anforderungen für Barrierefreiheit erfüllt, damit die Website ohne Hindernisse für alle Nutzer zugänglich ist. Natürlich können Themes auch angepasst werden, damit sie barrierefrei sind. Um Themes anpassen zu können müssen Sie die Programmiersprache PHP beherrschen.
Plugins in WordPress ergänzen zwar die Funktionalität Ihrer Website, könnten aber unbeabsichtigt Barrieren einführen, die Zugänglichkeit beeinträchtigen. Daher ist eine gründliche Überprüfung der Plugins unerlässlich. Stellen Sie sicher, dass jedes verwendete Plugin barrierefrei ist und keine Fehler aufweist, die Besucher von der vollständigen Nutzung Ihrer WordPress-Website abhalten könnten. Ist dies nicht der Fall, ist es ratsam, nach alternativen Lösungen zu suchen, um eine vollständig zugängliche Benutzererfahrung zu gewährleisten.
Was ist Accessibility bei WordPress?
Accessibility ist englisch und bedeutet auf Deutsch Zugänglichkeit oder Barrierefreiheit. Bei Accessibility geht es also auch um Menschen mit Behinderungen oder anderen körperlichen Einschränkungen. Um die Accessibility bei WordPress umzusetzen, müssen die Richtlinien der EN301 549 oder WCAG 2.2 erfüllt werden. Um die Accessibility umzusetzen, können auch spezielle Themes verwendet werden. In diesem Artikel werden auch noch Plugins vorgestellt, mit deren Hilfe die Accessibility verbessert werden kann. Accessibility bei WordPress bringt mehr Webseitenbesucher und Accessibility macht Spaß!
Umsetzung von Barrierefreiheit mit WordPress bei Websites
Natürlich werde ich nicht alle Aspekte der Barrierefreiheit hier erörtern, sondern lediglich einige hilfreiche Tipps geben für WordPress Webseiten, die dennoch eine große Wirkung haben können. Falls Sie lieber Videos schauen anstatt Texte zu lesen, finden Sie hier ein umfangreiches Video zum Thema Accessibility bei WordPress.
Um die Zugänglichkeit bei einer WordPress Webseite zu gewährleisten, ist es erforderlich, Anpassungen an den Themes vorzunehmen. Um Ihr Theme bearbeiten zu können, müssen Sie zunächst über FTP Schreibrechte für die entsprechenden Dateien erhalten. Erst dann ist es möglich, die Dateien zu editieren, da sie standardmäßig schreibgeschützt sind. Anschließend loggen Sie sich in den Admin-Bereich Ihres WordPress-Blogs ein und wählen „Design“ gefolgt von „Customizer“ aus. Die folgenden Schritte sind notwendig, um eine WordPress-Website vollständig zugänglich zu gestalten.
1. Tastaturbedienbarkeit bei einer WordPress Webseite
Dieser Abschnitt ist entsprechend Prüfschritt 9.2.1.1 „Ohne Maus nutzbar“ der EN 301 549. Die gezielte Bewegung einer Computermaus an eine bestimmte Position auf dem Bildschirm setzt die Fähigkeit voraus, sehen zu können. Da blinde Menschen nicht sehen können, sind sie nicht in der Lage, eine Maus zu bedienen. Daher bedienen blinde Webseitenbesucher einen Computer ausschließlich über die Tastatur. Wie dies funktioniert, wird in dem folgenden Video erklärt:
Eine WordPress Webseite bedienen blinde Menschen ebenfalls per Tastatur. Deswegen muss überprüft werden ob die WordPress Internetseite per Tastatur bedienbar ist. Eine WordPress Webseite ist, ohne das Sie was programmieren oder anpassen müssen, per Tastatur bedienbar.
2. Skalierbare Schriftgrößen
Bei einer WordPress Webseite nutzt man sogenannte CSS (Cascading Style Sheets), um zu bestimmen, wie groß Buchstaben auf der Website sein sollen. Es gibt verschiedene Maßeinheiten für Schriftgrößen: „pt“ (Punkte), „px“ (Pixel), „%“ (Prozent), „em“ und „rem“. Jede Einheit hat ihre eigene Art, die Größe zu messen. Diese Angaben können Sie im Customizer von WordPress machen. Ihn erreichen Sie im Dashboard über das Menü „Design“, „Customizer“. Hier wählen Sie den Eintrag „Zusätzliches CSS“ .
Hier ein CSS-Beispiel mit der Angabe der font-size in %:
body, button, input, select, textarea {
color: #1a1a1a;
font-family: Merriweather, Georgia, serif;
font-size: 120%;
line-height: 1.75;
}
3. Der richtige Farbkontrast hilft Menschen mit Farbfehlsichtigkeit
Dieser Abschnitt entspricht Prüfschritt 9.1.4.3 Kontraste von Texten ausreichend der EN 301 549. Farbfehlsichtigkeit bedeutet, dass Menschen einer Farbe nicht den korrekten Namen zuordnen können oder Probleme haben zwischen zwei Farben einen Unterschied zu erkennen. Wenn Sie Hintergrundfarbe und Schriftfarbe ändern möchten um den Farbkontrast Accessibilty-Gerecht einzustellen, dann können Sie dies auch im im Menü „Design“ und dann „Customizer“ ändern. Suchen Sie einfach nachdem Wort „color“. So finden Sie die Hintergrund und die Schriftfarbe. Mit dem Colour Contrast Analyser können Sie überprüfen ob der von Ihnen gewählte Farbkontrast für Webseitenbesucher mit einer Farbsehschwäche in Ordnung ist. In folgendem Video zeige ich wie der Colour Contrast Analyser funktioniert: Jedes Theme hat eine Datei mit dem Namen „header.php“ . Falls in Ihrem Theme ganz oben eine Grafik eingebaut ist, sollten Sie bei dieser Grafik auch den Farbkontrast zwischen Schriftfarbe und Hintergrundfarbe überprüfen. Hier kommen 2 Codebeispiele.
Nicht barrierefreier Farbkontrast
Der Farbkontrast zwischen Schriftfarbe und Hintergrundfarbe ist zu wenig, weil die Schriftfarbe hell ist und die Hintergrundfarbe auch. CSS-Code:
.nichtbarrierefreierfarbkontrast{color:white; background-color:yellow;}
So sieht es aus:
Barrierefreier Farbkontrast
Der Farbkontrast zwischen Schriftfarbe und Hintergrundfarbe ist optimal, weil die Schriftfarbe ist dunkel und die Hintergrundfarbe ist hell. CSS-Code:
.barrierefreierfarbkontrast{color:black; background-color:yellow;}
So sieht es aus:
Es ist wichtig, dass Sie sicherstellen, dass Ihre WordPress Webseite einen barrierefreien Farbkontrast hat zwischen Schriftfarbe und Hintergrundfarbe.
4. Alternativtexte für Bilder bei einer WordPress Webseite
Dieser Abschnitt entspricht Prüfschritt 9.1.1.1b Alternativtexte für Grafiken und Objekte der EN 301 549. Wenn Sie Bilder in Artikel und Seiten einfügen, sorgen Sie dafür, dass Ihre Bilder Alternativtexte haben. Der Dialog für Bild einfügen hat ein Eingabefeld mit der Beschriftung „Alternativtext“. Hier können Sie einen Text eingeben der dem blinden oder sehbehinderten Menschen vom Screenreader übermittelt wird. Beispiel für Alternativtexte für Bilder mit dem alt-Attribut:
<img src="https://www.marlem-software.de/marlemblog/wp-content/uploads/EN301549_v3_2019-11.jpg" alt="Harmonisierter europäischer Standard Zugänglichkeitsanforderungen für ICT-Produkte und -Dienstleistungen" width="600" height="457"/>
So sieht das Bild aus: 
Achten Sie im Erstellungsprozess einer WordPress-Webseite, dass wenn Sie Bilder in die Medien hochladen, die Bilder sofort Alternativtexte bekommen. So sieht obiger Code in der Umsetzung aus: ETSI – Harmonisierter europäischer Standard Zugänglichkeitsanforderungen für ICT-Produkte und -Dienstleistungen Im nächsten Video wird erklärt wie Sie Bildern einen Alternativtext geben auf Ihrer WordPress-Webseite:
Stellen Sie sicher, dass alle Bilder auf Ihrer WordPress-Website einen Alternativtext haben.
5. Inhalte mit Überschriften strukturieren
Dieser Abschnitt entspricht Prüfschritt 9.1.3.1a HTML-Strukturelemente für Überschriften der EN 301 549. Lange Texte lesen ist anstrengend. Deswegen sollten Sie H-Tags nutzen und Ihren Texten Zwischenüberschriften geben. Die Zwischenüberschriften lockern Ihre Texte auf. Zwischenüberschriften mit H-Tags erleichtern Screenreadern sowie anderweitigen technischen Assistenten und natürlich auch den Suchmaschinen, Ihre Texte hierarchisch korrekt zu verarbeiten und wiederzugeben. Hier ein Codebeispiel:
<h2>Was ist WordPress?</h2>
<h2>Barrierefreies Webdesign – Definition</h2>
<h2>5. Barrierefreie Formulare</h2>
<h3>5.1 Das aktive Bedienelement muss deutlich erkennbar sein</h3>
6. Barrierefreie Formulare
Dieser Abschnitt entspricht Prüfschritt 9.1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar der EN 301 549. Wenn Sie in Ihre WordPress-Webseite Formulare einbauen sollten auch diese barrierefrei sein. Damit der Screenreader weiß welche Beschriftung zu welchem Eingabefeld gehört, sollten Beschriftungen mit den Eingabefeldern verknüpft sein:
<label for="vorname" accesskey="v" Vorname: ([Alt]+v)/> <input id="vorname" maxlength="30" name="Vorname" size="20" type="text" />
So sieht der Code in der Ausführung aus:
([Alt]+v) Das Eingabefeld Vorname bekommt einen Label. mit „for“ im Label und „id“ im Eingabefeld, auch Formularfeld genannt, werden Eingabefeld und Label verknüpft. Das ist wichtig für Screenreader. Mit dem Attribut „accesskey“ kann dem Formularfeld ein Shortcut zugeordnet werden. Die Tasten alt+v aktivieren das Eingabefeld „Vorname“, alt+n das Eingabefeld „Nachname“. Für den Nutzer des Formulars muss es erkennbar sein, dass es die Möglichkeit von Shortcuts gibt. Formularfelder sollten rechts von der Beschriftung sein, weil dies für Screenreader besser ist. In folgendem Video erkläre ich, wie Sie Formulare barrierefrei gestalten:
6.1 Das aktive Bedienelement muss deutlich erkennbar sein
Dieser Abschnitt entspricht Prüfschritt 9.2.4.7 Aktuelle Position des Fokus deutlich der EN 301 549. Für Besucher einer Webseite mit einer Sehbehinderung ist es wichtig, dass es gut erkennbar sein muss, welches Bedienelement aktiv ist. Meine Lieblingslösung ist, dass die Hintergrundfarbe des aktiven Bedienelements Gelb ist. Das läßt sich wie folgt mit CSS ganz einfach lösen:
/* Mit nachstehender Zeile bekommen alle aktiven Eingabefelder und Schalter eine gelbe Hintergrundfarbe */input:focus
{ background-color:yellow;}
Leider funktioniert dieser Code nicht in jedem WordPress-Theme. In dem Thema das ich verwende funktioniert er nicht! Wenn Sie Ihre Formulare so gestalten, dann sind Ihre Formulare barrierefrei.
7. Eingabefehler nicht nur optisch anzeigen sondern Sätze schreiben
Dieser Abschnitt entspricht Prüfschritt 9.3.3.3 Hilfe bei Fehlern der EN 301 549. Oft setzen Web-Entwickler beim Feedback zum Verhalten der Webseiten-Besucher, etwa bei der Nutzung des Kontaktformulars, ausschließlich auf Farbe. Beispiel: Wird ein Pflichtfeld nicht ausgefüllt, erhält es eine rote Umrandung. Wer jedoch eine Farbenfehlsichtigkeit oder eine Sehschwäche hat, kann damit nicht viel anfangen. Derartige Fehlermeldungen sollten Sie stets zusätzlich in Worte fassen.
8. Tabellen barrierefrei darstellen
Dieser Abschnitt entspricht Prüfschritt 9.1.3.1e Datentabellen richtig aufgebaut. Tabellen auf werden zunächst mal mit HTML dargestellt. Es ist wichtig, dass die Spaltenköpfe mit dem th-Tag dargestellt werden. Hier der HTML-Code:
<table border="1">
<thead>
<tr>
<th>Screenreader</th>
<th>Betriebssystem</th>
</tr>
</thead>
<tbody>
<tr>
<td>NVDA</td>
<td>Windows</td>
</tr>
<tr>
<td>Orca</td>
<td>Ubuntu</td>
</tr>
<tr>
<td>Voice Over</td>
<td>IOS</td>
</tr>
<tr>
<td>Talkback</td>
<td>Android</td>
</tr>
</tbody>
</table>
Wichtig für die Zugänglichkeit ist die Verwendung folgender Tags:
- <thead>
- <th>
- <tbody>
Um HTML-Tabellen leichter lesbar zu gestalten, kann CSS verwendet werden, um sicherzustellen, dass jede zweite Zeile in der Tabelle eine andere Hintergrund- und Schriftfarbe hat. CSS-Code:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: lightgreen;
color: black;
}
tbody tr:nth-child(even) {
background-color: #00008B;
color: #fff;
}
So sieht das ganze dann aus:
| Screenreader | Betriebssystem |
|---|---|
| NVDA | Windows |
| Orca | Ubuntu |
| Voice Over | IOS |
| Talkback | Android |
Beim Festlegen von Schriftfarbe und Hintergrundfarbe ist es wichtig, ausreichenden Farbkontrast zu berücksichtigen, insbesondere für Menschen mit Farbfehlsichtigkeit. Die kostenlose Software Colour Contrast Analyser kann dabei hilfreich sein.
9. Plugins welche die Accessibility einer WordPress-Webseite verbessern
Bei diesem Thema ist wichtig zu erwähnen, dass die Idee eine WordPress-Webseite nur mit Plugins barrierefrei zu machen, nicht funktioniert. Plugins können nicht eine behindertengerechte Programmierung ersetzen! Es gibt verschiedene Plugins, die Ihnen helfen können, die Zugänglichkeit Ihrer WordPress-Webseite zu verbessern. Ein Beispiel dafür ist das WP Accessibility Plugin, mit dem Sie bestimmte Einstellungen vornehmen können, um Ihre Webseite barrierefreier zu gestalten. Eine andere Option ist das Hurrakify Plugin, das Artikel mit Tooltips ergänzt, um schwierige Wörter zu erklären. Einige Plugins erkläre ich in den folgenden Abschnitten.
9.1 Hurrakify
Hurrakify ergänzt Artikel mit Tooltips. Das heißt: Schwere Wörter im Artikel bekommen eine gestrichelte Linie. Fährt man mit der Maus über das Wort, bekommt man eine Leichte Sprache Erklärung zu diesem Wort. Hurrakify holt sich die Leichte Sprache Informationen aus dem Hurraki Lexikon in Leichter Sprache.
ANMERKUNG VON MARKUS
Ich finde dieses Plugin Klasse! Das bleibt auf diesem Blog installiert.
10. Zugängliche WordPress-Themes – gibt es das?
Bevor Sie sich die Mühe machen, Ihr WordPress-Theme selbst barrierefrei zu programmieren oder einen Programmierer zu beauftragen, können Sie nach WordPress-Themes suchen, die bereits barrierefrei sind. Auf der Webseite
finden Sie zugängliche WordPress Themes.
Anmerkung von Markus
Ich habe diese Themes ausprobiert. Sie sind nicht 100%ig barrierefrei. Beim Theme „Twentysixteen“ müssen umfangreiche Farbanpassungen gemacht werden, damit das Theme für Menschen mit Farbenfehlsichtigkeit nutzbar ist. Webseitenbesucher mit einer Sehschwäche profitieren ebenso von einem barrierefreien Farbkontrast.
11. HTML Validation bei einer WordPress Webseite
Dieser Abschnitt entspricht Prüfschritt 9.4.1.1 Korrekte Syntax der EN 301 549. Um sicherzustellen, dass Ihre Webseite für Screenreader zugänglich ist, sollte sie den Standards der W3.org entsprechen. Mit dem W3C-Validator können Sie testen, ob Ihr HTML valide ist. Eine WordPress-Webseite W3C-Valide machen, gelingt nicht immer. Wenn Sie ein Plugin einsetzen, das Sie unbedingt benötigen, dass aber W3C-Fehler in Ihre Webseite bringt, können Sie nichts dagegen tun. Mit dem W3C-Validator können Sie testen ob ihr HTML valide ist.
Wie sie mit dem W3C-Validator eine Webseite überprüfen können, zeige ich in diesem Video:
Barrierefreiheit bei einer WordPress Webseite Testen
Ein automatisierter Test gibt es nicht. Ein Test auf Zugänglichkeit kann nur von Hand mit Hilfe von oben genannten Leitlinien erfolgen. Hier gibt es einen tolle Möglichkeit WordPress-Webseiten auf Zugänglichkeit zu überprüfen: BITV-Test – Verzeichnis der Prüfschritte Hier finden Sie alle Prüfschritte der EN 301 549 ausführlich erklärt.
Suchmaschinen lieben barrierefreie WordPress-Webseiten
Suchmaschinen lieben barrierefreie Webseiten, da diese gut strukturiert und leicht verständlich sind. Eine barrierefreie WordPress-Webseite hat gute Chancen, in den Suchergebnissen ganz vorne zu landen. Abschließend möchte ich betonen, dass die Zugänglichkeit Ihrer Webseite nicht nur für Anwender mit Behinderungen wichtig ist, sondern auch die allgemeine Benutzerfreundlichkeit verbessert und die Reichweite Ihrer Inhalte erweitern kann.
Häufig gestellte Fragen
In diesem Abschnitt beantworte ich Häufig gestellte Fragen.
Was versteht man unter Barrierefreiheit?
Barrierefreiheit bedeutet, dass Gebäude und technische Angebote so gestaltet sind, dass sie von allen Menschen genutzt werden können, einschließlich Menschen mit Behinderungen.
Was versteht man unter digitaler Barrierefreiheit?
Digitale Barrierefreiheit bedeutet, dass Webseiten, Software, Apps und Betriebssysteme so entwickelt werden, dass sie von allen Anwendern genutzt werden können, einschließlich Menschen mit Behinderungen.
Wann gilt eine Website als barrierefrei?
Eine Website gilt als barrierefrei, wenn sie von allen Besucher einer Webseite, einschließlich Menschen mit Behinderungen, wahrgenommen und bedient werden kann.
Wie kann man eine Website behindertengerecht machen?
Um eine Website barrierefrei zu machen, muss sie so gestaltet werden, dass sie von allen Menschen, auch von Menschen mit Behinderungen, genutzt werden kann. Das bedeutet, dass bestimmte Richtlinien für barrierefreies Webdesign befolgt werden müssen. In Europa sind dies die Leitlinien der EN 301 549 und international sind es die Richtlinien der WCAG 2.2.
Quellen
In diesem Abschnitt finden Sie die Links und Quellen, auf die ich mich bei der Erstellung dieses Blogartikels bezogen habe. Sie bieten zusätzliche Informationen und weiterführende Lektüre zu den im Artikel behandelten Themen.
- Accessibility – WordPress Codex
- Accessibility – WordPress.org Deutsch
- Offizielles Blog des WordPress-Accessibility-Teams
Barrierefreiheit mit WordPress – Schlussbemerkung
Die Realisierung einer barrierefreien WordPress-Website erweitert nicht nur deren Zugänglichkeit, sondern verbessert auch die Nutzerfreundlichkeit und die Auffindbarkeit in Suchmaschinen.
Bei Rückfragen zur Barrierefreiheit stehe ich Ihnen unter 07072/1278463 oder per E-Mail an info@marlem-software.de zur Verfügung.
2 Gedanken zu „Barrierefreiheit mit WordPress – eine Anleitung in Text, Bild und Video im Jahr 2024“