Barrierefreiheit mit WordPress – eine Anleitung in Text, Bild und Video

Mein Blog basiert auf einem System, das sich WordPress nennt. Da mir Accessibility bei Webseiten ein wichtiges Anliegen ist, habe ich natürlich auch bei meinem Blog darauf geachtet, dass alles barrierefrei ist. Wie die Zugänglichkeit mit WordPress funktioniert, verrate ich in diesem Artikel.

Neuer Blogartikel

Da dieser Blogartikel bereits 4 Jahre alt ist, gibt es jetzt einen neuen Blogartikel. Hier der Link:
Barrierefreiheit mit WordPress – eine Anleitung in Text, Bild und Video im Jahr 2024

Was ist WordPress?

Bevor ich zum Thema Barrierefreiheit (auf englisch Accessibility) mit WordPress komme, muss ich kurz die Grundlagen von WordPress erklären. WordPress ist eine Blogsoftware. Ein Blog ist eine spezielle Form einer Webseite auf dem Artikel geschrieben werden. Es müssen nicht zwingend Fachartikel sein. Es kann auch ein „öffentliches“ Tagebuch geführt werden, es kann über Lebensfreude geschrieben werden oder ein anderes Thema. Es gibt auch Blogger (=Autoren von Blogartikeln) die Ihre Leser darüber informieren wieviel neue Kontakte sie auf der Social Media Plattform Xing gesammelt haben.

In meinem Blog finden Sie hauptsächlich Fachartikel über Accessibility und Social Media. Der Blog ist wie oben schon erwähnt ein WordPress-Blog.

In WordPress können Sie Seiten und Artikel erstellen. Die Links „Home“, „Wer schreibt her?“, „Referenzen“ und „Impressum“ in meinem Blog sind Seiten. Das was ich hier schreibe ist ein Artikel.

Dann gibt es Plugins für WordPress. Das sind im Prinzip kleine „Programme“ welche dem WordPress-Blog neue Funktionen spendieren. So habe ich z.B. ein Plugin für Suchmaschinenoptimierung installiert, welches mir hilft bei der Onpage-Optimierung meiner Seiten und Artikel. Leider gibt es kein Plugin, welches den kompletten Blog barrierefrei(=Accessibility) macht.

Damit Sie einen Einblick bekommen was WordPress ist und was damit gemacht werden kann, hier noch ein Youtube-Video:

Barrierefreies Webdesign – Definition

Barrierefreiheit bedeutet ohne Hindernisse. Barrierefreiheit gibt es bei Gebäuden, auf der Straße oder in der EDV. Barrierefreiheit in der EDV bedeutet, dass Websites und Software barrierefreier gestaltet sind, dass Menschen mit unterschiedlichen Einschränkungen die Webseite / Software bedienen können.

Barrierefreies Webdesign  bedeutet, dass eine Webseite so gestaltet ist, dass sie auch für Menschen mit körperlichen und geistigen Beeinträchtigungen wahrnehmbar ist. Es geht also darum dass Webseiten für alle Menschen wahrnehmbar und erfahrbar sind. Oft kommt auch der Begriff Barrierefreies Internet oder Barrierefreiheit Internet oder barrierefreie Webseiten / Websites / Webseite oder Accessibility (=Zugänglichkeit) bei Webauftritten oder behindertengerechtes Webdesign anstelle von barrierefreies Webdesign vor. Dies meint aber das Gleiche.
Auch wenn das Thema barrierefreies Webdesign wegen Menschen mit Behinderungen in die Gesellschaft gekommen ist, möchte ich ausdrücklich erwähnen, dass noch andere Personengruppen von barrierefreie Webseiten profitieren.

Barrierefreies Webdesign – Richtlinien

Es werden Richtlinien benötigt, um zu beurteilen ob eine Website nach den Grundlagen des Es werden Richtlinien benötigt, um zu beurteilen ob eine Website nach den Grundlagen die barrierefreien Websites erstellt wurde. So existieren internationale und nationale (also für Deutschland geltende) Richtlinien für solche Sites.
Für Deutschland und Länder die der europäischen Union (abgekürzt EU) angehören, gilt die EN 301 549.
Außerhalb von Europa gilt die Web Content Accessibility Guidelines (WCAG) 2.2 .
Sinn der Richtlinien ist es, dass alle Arten von Behinderungen bei der Gestaltung einer WordPress-Webseite berücksichtigt werden. Wenn bestimmte Kriterien nicht umgesetzt werden bedeutet, dass, dass bestimmte Personen mit körperlichen Beeinträchtigungen von der Bedienung einer Webseite mit Absicht ausgeschlossen werden. Deswegen mein Wunsch: Sorgen Sie dafür, dass alle Menschen mit Behinderungen Ihre Webseiten bedienen können.

Hier ein Youtube-Video über barrierefreies Webdesign von mir:

Die Zugänglichkeit sollte schon beim Erstellen einer Webseite berücksichtigt werden. Hier sind einige Tipps, wie Sie Zugänglichkeit bei WordPress umsetzen können.

Wie barrierefrei ist WordPress von Haus aus?

Bevor man sich daran macht, die WordPress-Website barrierefrei zu gestalten, sollte man überlegen, ob das sinnvoll ist. WordPress verwendet sogenannte Themes für das Design der Webseite. Ein WordPress-Theme ist sozusagen das „Outfit“ Ihrer Website – es bestimmt, wie sie aussieht, welche Farben und Schriftarten verwendet werden. Es ermöglicht Ihnen, das Erscheinungsbild Ihrer Website einfach anzupassen. Eine anderes Wort für Theme wäre „Vorlage“ oder „Template“. Es gibt sehr viele fertige Themes, die kostenfrei heruntergeladen werden können. Wenn Sie mehrere Themes in Ihrem Blog installiert haben, können Sie in Sekunden das komplette Aussehen Ihres Blogs verändern! Das ist eine der vielen Stärken von WordPress. Um Ihre WordPress-Website barrierefrei zu machen, ist es wichtig, ein Theme zu wählen, das dafür geeignete Voraussetzungen mitbringt.

Plugins in WordPress können jedoch Probleme verursachen, insbesondere in Bezug auf Programmierfehler, welche die Accessibility beeinträchtigen können. Dieses Problem lässt sich nicht immer vollständig im Sinne der EN 301 549 lösen. Dennoch sollte überprüft werden, ob ein Plugin, das viele Programmierfehler in die WordPress-Website bringt, durch eine andere Lösung ersetzt werden kann.

Umsetzung von Barrierefreiheit mit WordPress

Selbstverständlich werde ich hier nicht sämtliche Kriterien der Barrierefreiheit besprechen, sondern nur ein paar Tipps geben, die aber schon sehr viel bewirken können.

Wenn Sie lieber ein Video anschauen, als Texte zu lesen, dann gibt es hier ein ausführliches Video zum Thema Barrierefreiheit bei WordPress:

Um Accessibility bei WordPress umzusetzen muss man Themes bearbeiten.  Um Ihr Theme überhaupt bearbeiten zu können, müssen Sie den zu bearbeitenden Dateien per FTP schreibrechte geben. Erst dann können Sie überhaupt die Dateien bearbeiten. Von Haus aus sind alle Theme Dateien schreibgeschützt.

Danach gehen Sie in den Admin-Zugang Ihres WordPress-Blog und klicken auf „Design“ und danach auf „Editor“.

Folgende Schritte sind notwendig um eine WordPress-Webseite komplett barrierefrei zu gestalten:

1. Tastaturbedienbarkeit

Dieser Abschnitt entspricht Prüfschritt 9.2.1.1 Ohne Maus nutzbar der EN 301 549.
Eine Computermaus ganz gezielt an eine bestimmte Position des Bildschirms zu bewegen gelingt nur, wenn ein Menschen sehen kann. Da blinde Menschen nicht sehen können, sind sie nicht in der Lage eine Computermaus zu bedienen. Das bedeutet, blinde Menschen bedienen einen Computer nur per Tastatur. Wie das funktioniert, zeige ich in folgendem Video:

Weil blinde Menschen keine Computermaus bedienen können, muss Ihre WordPress-Webseite bzw. Ihr WordPress-Blog auch per Tastatur bedienbar sein.
Wie können Sie das überprüfen? Sie drücken mehrfach die Tabulatortaste und kontrollieren ob Sie jeden Link und jeden Schalter per Tabulatortaste erreichen können. Wenn dies gelingt, dann ist dieser Prüfschritt erfüllt und Sie wissen, dass blinde Menschen Ihre WordPress-Webseite bedienen können.

2. Skalierbare Schriftgrößen

Vor Ihren Augen öffnet sich jetzt eine Datei mit Namen „style.css“. In dieser Datei können Sie wichtige Dinge für Accessibility einstellen. Wenn Sie etwa die Schriftgröße in relative Schriftgrößen statt feste Schriftgrößen ändern möchten, dann können Sie dies in der Datei style.css ändern. Suchen Sie einfach in der Datei „style.css“ nach „font-size“ und ersetzen Sie pt oder px durch relative Angaben.

Beispiel:

font-size: 2rem;

oder

font-size: 200%;

Schriftgröße 2rem

Die skalierbaren Schriftgrößen sind für Menschen mit Sehbehinderung wichtig, damit sie im Browser die Schrift zoomen, sprich vergrößern, können. Hier sollte schon beim erstellen einer WordPress-Webseite darauf geachtet werden.

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 in der Datei „style.css“ ä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 Menschen mit einer Farbsehschwäche in Ordnung ist.

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:

Hier ist der Farbkontrast zwischen Schriftfarbe und Hintergrundfarbe nicht barrierefrei.

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:

Hier ist der Farbkontrast zwischen Schriftfarbe und Hintergrundfarbe barrierefrei!

4. Alternativtexte für Bilder

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"/>

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:

Im nächsten Video wird erklärt wie Sie Bildern einen Alternativtext geben auf Ihrer WordPress-Webseite:

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>Barrierefreies Webdesign – Richtlinien</h2>
<h2>Wie barrierefrei ist WordPress von Haus aus?</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:
Vorname:([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 Menschen 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 Barrierefreiheit 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 Barrierefreiheit 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 barrierefreie 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 WP Accessibility Plugin

Es gibt inzwischen ein Plugin, das WP Accessibility Plugin mit dem Sie bestimmte Sachen per Einstellungen in WordPress barrierefrei machen können. Folgende Einstellungen und noch mehr sind möglich mit diesem Plugin:

• Accessibility toolbar mit Schriftvergrößerung und Kontrast-Unschalter hinzufügen.
• Füge die Sprache der Seite und Leserichtung zum HTML-Element hinzu.
• Zu HTML 5 Elementen ARIA landmark roles hinzufügen
• Farbkontrast-Tester zwecks Farbenblindheit nach WCAG 2.0

9.2 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.

9.3 WP Accessibility Helper

Ich habe das Plugin WP Accessibility Helper entdeckt um eine WordPress-Webseite barrierefrei zu machen. Hier eine vollständige Liste der Plugin-Funktionen:

• Kontrastmodus (Farbgamma)
• Schriftgröße (Rem oder Zoom)
• Entladen Sie alle CSS-Dateien (Anzeigeseite in rohem HTML)
• Unterstreichen Sie alle Links
• Markieren Sie alle Links
• Anhangs-Kontrollzentrum mit der Möglichkeit, Bildtitel und Alt-Tags hinzuzufügen / zu bearbeiten
• Alt+Z – Öffnen Sie die Seitenleiste für Eingabehilfen
• Alt+X – Schließen Sie die Eingabehilfenleiste
• Steuern Sie alle Anhangsbilder mit AJAX-Funktionen von einem Ort aus
• role=“link“ für jedes a Tag
• Entfernen Sie Titelattribute aus Links
• HTML5 Landmark Control Center
• Speichern Sie den Kontrastmodus mit Benutzer-Cookies
• Klare Auswahl aus Cookies
• Für mobile Geräte ausblenden – Steuerelemente
• Seitenleistenposition (links oder rechts)
• Steuerelemente für Graustufenbilder
• Steuerelemente für dunkle und helle Themen
• Steuerelemente für Schriftfamilien
• Invertieren Sie den Farb- und Bildmodus
• Entfernen Sie die Option CSS-Animationen
• Lesbare Schriftartoption (schnelles Wechseln zur Arial-Schriftfamilie)
• Sortierbare Widgets-Reihenfolge (Drag & Drop)
• DOM-Scanner – Überprüfen Sie Seiten und Beiträge auf Eingabehilfen, z. B.: Bildalter, Linkrolle und -titel und vieles mehr.

Hier noch ein Youtbe-Video zum WP Accessibility Helper:

Anmerkung von Markus

Ich habe mein altes Plugin für Barrierefreiheit bei WordPress deinstalliert und habe das WP Accessibility Helper-Plugin installiert. Ich bin begeistert und werde in Zukunft dieses Plugin einsetzen. Für Webseite-Nutzer mit einer Sehschwäche ist dieses Plugin besonders geeignet.
In Sachen Barrierefreiheit bei WordPress ist dieses Plugin das beste, dass ich je installiert habe.

9.4 Plugin wA11y – The Web Accessibility Toolbox

Sprache leider in Englisch. Mit dem Plugin können Blogartikel und Seiten auf Barrierefreiheit überprüft werden. Damit das Plugin verwendet werden kann, müssen Sie in Ihrem WordPress-Account eingeloggt sein.
Mit dem Plugin können folgende Sachen überprüft werden:

• Überschriften
• Kontrast
• Linktext
• Beschriftungen von Eingabefelder
• Alternativtexte bei Bilder
• Landmarks
• Screen reader Wand

Wenn Ihre WordPress-Webseite alle Kriterien erfüllt ist das super. Leider sind das lang nicht alle Kriterien die erfüllt sein müssen, damit ihre WordPress-Webseite komplett barrierefrei ist. Aber Sie können sagen, dass Sie sich mit Hilfe des Plugins um einige Kriterien des barrierefreien Webdesign gekümmert haben und an Menschen mit unterschiedlichen Behinderungen gedacht haben. Das Plugin kümmert sich hauptsächlich um die Barrierefreiheit für blinde Menschen oder Menschen mit einer Sehschwäche.

Anmerkung von Markus

Das Plugin funktioniert sehr gut. Kann ich auch empfehlen. Allerdings sollte eine WordPress-Webseite nicht alleine mit Plugin, sondern mit barrierefreier Programmierung barrierefrei gestaltet werden.

10. Barrierefreie 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

• 18 Best Accessible WordPress Themes (2023)

finden Sie barrierefreie 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. Menschen mit einer Sehschwäche profitieren ebenso von einem barrierefreien Farbkontrast.

11. HTML Validation

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.

Barrierefreiheit bei WordPress Testen

Ein automatisierter Test gibt es nicht. Ein Test auf Barrierefreiheit kann nur von Hand mit Hilfe von oben genannten Richtlinien erfolgen.

Hier gibt es einen tolle Möglichkeit WordPress-Webseiten auf Barrierefreiheit 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 Menschen 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 Menschen genutzt werden können, einschließlich Menschen mit Behinderungen.

Wann gilt eine Website als barrierefrei?

Eine Website gilt als barrierefrei, wenn sie von allen Menschen, einschließlich Menschen mit Behinderungen, wahrgenommen und bedient werden kann.

Wie kann man eine Website barrierefrei 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 Richtlinien der EN 301 549 und international sind es die Richtlinien der WCAG 2.2.

Barrierefreiheit mit WordPress – Schlussbemerkung

Wenn Sie diese Tipps umsetzen haben Sie einiges dafür getan, damit Menschen mit unterschiedlichen Einschränkungen den Inhalt Ihres WordPress-Blogs war nehmen können.
Wenn Sie noch Fragen haben zur Barrierefreiheit mit WordPress dürfen Sie mich gerne Anrufen 07072/1278463 oder eine Mail schreiben an info@marlem-software.de .