Barrierefreie HTML-Tabellen erstellen

In diesem Blogartikel zeige ich, wie Sie eine HTML-Tabelle barrierefrei gestalten können nach der Richtlinie EN 301 549.

Der Prüfschritt für diesen Blogartikel in der EN 301 549 heißt: 9.1.3.1e. Datentabellen richtig aufgebaut.

Als erstes der HTML-Code:

<table>
  <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></thead>
  • <th></th>
  • <tbody> </tbody>

Die Tabelle ist jetzt barrierefrei!
Warum ist die Tabelle barrierefrei? Blinde Menschen lassen sich alles von einem Screenreader vorlesen. Der muss unterscheiden können zwischen Tabellenüberschrift und dem Text der darunter steht, damit er dem blinden Menschen die Tabelle so vorlesen kann, dass dieser die Tabelle versteht. Das funktioniert nur, wenn oben aufgeführte HTML-Tags verwendet werden.

Da oft noch das Vorurteil herrscht digitale Barrierefreiheit ist langweilig, bekommt der Tabellenkopf eine grüne Hintergrundfarbe und jede zweite Tabellenzeile bekommt die Hintergrundfarbe dunkelblau und eine weise Schrift.
Die Umsetzung erfolgt in CSS.
CSS-Code:

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

tbody tr:nth-child(even) {
    background-color: #00008B;
    color: #fff;
  }

Bei der Verwendung von Farbe müssen Sie darauf achten dass genügend Farbkontrast zwischen Schrift- und Hintergrundfarbe vorhanden ist, damit Menschen mit Farbfehlsichtigkeit ihre Tabelle auch lesen können. Den Farbkontrast können Sie mit der kostenlosen Software Colour Contrast Analyzer überprüfen.

Jetzt möchten Sie wissen wie das ganze aussieht. Ich auch 🙂
Hier das Ergebnis:

Screenreader Betriebssystem
NVDA Windows
Orca Ubuntu
Voice Over IOS
Talkback Android

Schlussbemerkung

Es ist einfach, barrierefreie HTML-Tabellen zu erstellen, und durch die sorgfältige Verwendung von Farben können sie nicht nur zugänglich, sondern auch visuell ansprechend gestaltet werden.

Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS.

Schreibe einen Kommentar