WordPress: Best Practices beim Erstellen von barrierefreien WordPress-Seiten

Bedeutung von Barrierefreiheit für Webseiten

Immer mehr Dienste und Informationen verlagern sich ins Internet. Die Erstellung und Gestaltung von simplen Webseiten war noch nie so einfach, wie heutzutage. Viele erfahrene Webentwickler:innen setzen auf immer beeindruckendere, hübschere und animiertere Webseiten, frei nach dem Motto höher, schneller, weiter.

Doch ein wichtiger Aspekt wird bei der Webentwicklung gut und gerne vergessen: die Barrierefreiheit. Menschen, die Defizite mit den Augen haben, können somit schnell auf der Strecke bleiben. Sie haben Probleme, Webseiten mit geringen Kontrasten zu lesen oder benötigen einen Screenreader, um Webseiten benutzen zu können. Wenn eine Webseite hierfür nicht wichtige Punkte berücksichtigt, bleiben diese Webseiten unbenutzbar.

Daher sollte die Barrierefreiheit bei der Erstellung von Webseiten immer ein Aspekt sein, den Sie als Webentwickler:in berücksichtigen und umsetzen. Schließlich soll kein Mensch auf die Nutzung Ihrer Webseite verzichten müssen, nur weil die Barrierefreiheit Ihrer WordPress-Seite nicht berücksichtigt wurde.

Barrierefreiheit auf Ihrer WordPress-Webseite überprüfen

Es gibt mehrere Möglichkeiten, um die Barrierefreiheit Ihrer WordPress-Seite zu überprüfen. Zwei der gängigsten stellen wir Ihnen hier in Kürze vor.

Google Lighthouse

Einen groben Überblick bietet Ihnen der Google Lighthouse Test. Um diesen auszuführen, öffnen Sie einen Chromium basierten Browser (wie beispielsweise Chromium oder Chrome), drücken die F-12-Taste und navigieren zu Lighthouse. Wenn Sie hier einen Test starten, erhalten Sie bei Accessibilty einen kleinen Überblick über die Barrierefreiheit Ihrer Seite und Hinweise dazu, was Sie noch verbessern können.

Wave.Webaim

Einen detaillierteren Einblick erhalten Sie auf der Seite von Wave.Webaim.org. Hier können Sie einen Test Ihrer WordPress-Seite durchführen. Anschließend werden alle Elemente im Detail angezeigt, die nicht barrierefrei oder optimal unter diesem Gesichtspunkt gestaltet sind.

Best Practices für eine barrierefreie WordPress-Webseite

Es gibt einige Punkte, mit denen Sie Ihre WordPress-Webseite barrierefreier gestalten können. Im folgenden finden Sie eine Übersicht, mit welchen Maßnahmen Sie dazu beitragen können.

Machen Sie Ihre Webseite mit der Tastatur bedienbar

Die meisten Menschen benutzen eine Maus, um durch eine Webseite zu navigieren. Wenn dies nicht möglich ist, muss Ihre WordPress-Seite auch ohne Maus benutzbar sein. Sprich: Ihre Webseite muss mit der Tastatur navigierbar sein.

Dies können Sie ganz leicht selber testen. Drücken Sie die TABULOTAR-Taste, bis Sie am Ende ihrer WordPress-Webseite angelangt sind. Können Sie auf dem Weg bis dahin alle Links auf diese Weise erreichen? Wenn ja, ist dieser Punkt erfüllt. Wenn nicht, dann ändern Sie Ihre Webseite so, dass diese Methode erfolgreich benutzt werden kann.

Verwenden Sie interaktive Elemente

Geben Sie immer ein optisches Feedback, wenn Nutzer:inne auf Ihrer WordPress-Seite etwas tun. Benutzen Sie beispielsweise :hover, um ein Element, welches mit der Maus berührt wird, deutlich zu machen. Verwenden Sie in Formular-Elementen den :focus, um ein aktives Element hervorzuheben. Auch dies kann die Nutzung Ihrer Webseite erleichtern und vor allem Formular-Elemente barrierefreier machen.

nav:hover {
background-color: orange;
}

input:focus {
background-color: orange;
}

Nutzen Sie gut lesbare Schriftarten

Verwenden Sie Schriftarten, die keine Serifen benutzen. Serifen sind Querstriche, die am oberen oder unteren Ende von Buchstaben sind. Diese erhöhen vielleicht die Optik Ihrer Schriftart, können es Menschen aber erschweren, die Texte Ihrer WordPress-Seite zu lesen. Verzichten Sie daher auf Schriftarten mit Serifen.

Beispiele für Schriftarten ohne Serifen sind Open Sans, Quicksand, Verdana oder auch Roboto.

Nutzen Sie skalierbare Schriftgrößen

Wenn Sie feste Schriftgrößen verwenden, dann skalieren sich diese nicht nach oben, selbst wenn Nutzer:innen Ihrere Webseite den Zoom im Browser erhöhen. Dies können Sie ändern, indem Sie skalierbare Schriftgrößen verwenden. Dann werden auch die Texte Ihrer WordPress-Seite größer, wenn Nutzer:innen im Browser Ihre Webseite mit Zoom vergrößern.

Wie genau skalierbare Schriftgrößen funktionieren und welche es gibt, finden Sie ebenfalls auf dieser Seite.

Nutzen Sie starke Farbkontraste

Nutzen Sie einen starken Kontrast zwischen Schrift- und Hintergrundfarbe auf Ihrer WordPress-Seite. Dies hilft Menschen, die mit geringeren Kontrasten Probleme haben. Um zu prüfen, ob Sie einen ausreichend guten Kontrast benutzen, können Sie diese Seite zum Prüfen des Kontrasts nutzen.

Nutzen Sie Alternativtexte für Bilder

Wenn Sie Bilder in WordPress verwenden, haben Sie vielleicht schon das Feld „Alternativer Text“ gesehen. Hierbei handelt es sich um das sogenannte Alt-Attribut. Dieser Text kann von Screenreadern vorgelesen werden, wenn Menschen das Bild selber nicht gut sehen können. Sie sollten dieses Feld daher bei allen Bildern in WordPress verwenden.

Nutzen Sie hier eine gute Erklärung dafür, was im Bild zu sehen ist. Dadurch erhalten Menschen, die auf Screenreader angewiesen sind, einen guten Einblick darüber, was im Bild dargestellt ist.

Strukturieren Sie Ihre Inhalte mit Überschriften

Das Lesen von langen Texten kann anstrengend sein. Daher sollten Sie auf die Verwendung von Zwischenüberschriften übergehen, um lange Texte klar und logisch zu strukturieren und die Texte leichter verständlich zu machen. Hierbei sollten Sie die entsprechenden HTML-Tags von H1 bis H6 benutzen, um Ihre WordPress-Seite zu strukturieren.

Der H1-Tag darf hierbei nur einmalig auf einer Seite auftreten. Eine große Überschrift bekommt den H2-Tag, Unterüberschriften des H2-Tags erhalten einen H3-Tag, usw. Dieser Tipp wird außerdem auch von Suchmaschinen honoriert, die einen großen Wert auf die korrekte HTML-Strukturierung legen.

Ein gut strukturierter Inhalt mit Zwischenüberschriften kann beispielsweise wie folgt aufgebaut sein.

<h1>Die Welt</h1>
<h2>Europa</h2>
<h3>Dänemark</h3>
<h4>Kopenhagen</h4>
<p>Text zu Kopenhagen</p>
<h4>Odense</h4>
<p>Text zu Odense</p>
<h3>Niederlande</h3>
<h4>Amsterdam</h4>
<p>Text zu Amsterdam</p>
<h4>Rotterdam</h4>
<p>Text zu Rotterdam</p>

Erstellen Sie barrierefreie Formulare

Als Webentwickler:in kann man dazu neigen, in Formularen auf die Labels zu verzichten. Ein Formular, welches nur mit Platzhaltern innerhalb der Felder erstellt wurde, sieht schließlich super aus. Doch leider ist diese Umsetzung nicht barrierefrei.

Nutzen Sie daher Labels für all Ihre Formular-Elemente in WordPress. Dies ermöglicht es Screenreadern, die Beschriftungen vorzulesen und die Formular-Elemente besser nutzbar zu machen.

<label for="username">Ihr Username:</label>
<input id="username" name="username" type="text" />

Geben Sie Eingabefehler mit Sätzen aus

Wenn Sie Validierungen benutzen, beispielsweise zum Prüfen von Formular-Eingaben, dann achten Sie auf barrierefreie Fehlermeldungen. Meldungen, die ausschließlich ein farbliches Feedback geben, sind suboptimal. Nutzen Sie Fehlermeldungen, die in ganzen Sätzen formuliert und verständlich sind. Dies erleichtert es, die Fehlerquelle zu identifizieren und entsprechende Änderungen an den Eingaben vorzunehmen.

Gestalten Sie Tabellen barrierefrei

Wenn Sie Tabellen verwenden, gibt es auch hier einen Aufbau, der die Barrierefreiheit auf Ihrer WordPress-Seite erhöht. Hierfür gibt es die Tags <th>, die im Kopf der Tabelle verwendet werden sollten. Außerdem sollten Sie auch die Tags <thead> sowie <tbody> entsprechend einsetzen.

Es kann auch förderlich sein, den Kopf der Tabelle farblich zu gestalten und dies auch bei jeder zweiten Zeile anzuwenden. Hierdurch wird eine Tabelle leichter lesbar, als wenn alle Zeilen gleich aussehen.

Im folgenden finden Sie Code-Beispiele, für eine barrierefreie Tabelle sowie für CSS-Code, der die Tabelle leichter lesbar macht:

<table border="1">
  <thead>
    <tr>
      <th>Gegenstand</th>
      <th>Farbe</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Computer</td>
      <td>Weiß</td>
    </tr>
    <tr>
      <td>Auto</td>
      <td>Gelb</td>
    </tr>
    <tr>
      <td>Kühlschrank</td>
      <td>Grün</td>
    </tr>
    <tr>
      <td>Lampe</td>
      <td>Lila</td>
    </tr>
  </tbody>
</table>

  th {
            background-color: yellow;
            color: black;
     }

  tbody tr:nth-child(even) {
    background-color: blue;
    color: white;
  }

Plugins für eine barrierefreie WordPress-Webseite

Wie für jeden Bereich in WordPress, gibt es auch für das Thema Barrierefreiheit Plugins, die Sie nutzen können. Sie sollten auf den Einsatz von diesen Plugins jedoch wenn möglich verzichten. Zum einen sollten Sie grundsätzlich so wenig Plugins in WordPress wie möglich nutzen und zum anderen gibt es unzählige PageBuilder, Themes und Plugins für WordPress, sodass eine Universal-Lösung schwierig ist.

Gestalten Sie Ihre WordPress-Seite daher mit den Tipps aus diesem Leitfaden barrierefrei, wo es nur geht und nehmen Sie die Zügel selber in die Hand. Ihre Nutzer:innen werden es Ihnen danken.