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:

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 .

Weiterlesen

Barrierefreie Web-Entwicklung mit KI: HTML-Tabellen einfach programmiert