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

In diesem Blogartikel wird erklärt wie mit Unterstützung von künstlicher Intelligenz eine barrierefreie HTML-Tabelle programmiert werden kann.

Was ist HTML und CSS?

HTML ist die Abkürzung für „Hypertext Markup Language“ und bildet das Grundgerüst einer Webseite. Es handelt sich um eine Auszeichnungssprache, die verwendet wird, um den Inhalt einer Webseite strukturiert darzustellen. HTML definiert die verschiedenen Elemente einer Webseite, wie z.B. Überschriften, Absätze, Bilder, Links und Tabellen. Diese Elemente werden durch Tags gekennzeichnet, die in spitzen Klammern geschrieben sind, z.B.
<h1>,</h1>, <img />, <a>, </a> usw.

CSS steht für „Cascading Style Sheets“ und ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und die Formatierung einer Webseite zu gestalten. Während HTML den Inhalt strukturiert, erlaubt CSS es, diesen Inhalt zu designen und zu präsentieren. Mit CSS können verschiedene Stileigenschaften definiert werden, wie z.B. Farben, Schriftarten, Abstände, Positionierungen und vieles mehr. CSS-Regeln bestehen aus Selektoren (z.B. Elementnamen, Klassen oder IDs) und Deklarationen (Eigenschaften und Werte), die angeben, wie Elemente auf der Webseite dargestellt werden sollen.

Was ist Künstliche Intelligenz (KI)?

Künstliche Intelligenz, abgekürzt KI, bezieht sich auf Computerprogramme und Systeme, die entwickelt wurden, um Aufgaben auszuführen, die normalerweise menschliche Intelligenz erfordern würden. KI-Systeme können Daten analysieren, Muster erkennen, Probleme lösen und Entscheidungen treffen, ähnlich wie Menschen es tun würden, aber oft viel schneller und in größerem Umfang.
ChatGPT ist ein Beispiel für eine spezielle Art von Künstlicher Intelligenz, genannt Chatbot oder Conversational AI. ChatGPT, steht für „Chat Generative Pre-trained Transformer“. ChatGPT wurde trainiert, um natürliche Sprache zu verstehen und darauf basierend sinnvolle Antworten zu generieren.
Ich habe bei der künstlichen Intelligenz ChatGPT ein kostenloses Benutzerkonto.

Was ist EN 301 549?

Die EN 301 549 ist eine europäische Norm, die Anforderungen und Empfehlungen zur Barrierefreiheit von Informations- und Kommunikationstechnik festlegt. Die Richtlinie umfasst die Barrierefreiheit bei Webseiten, Software, Apps und Hardware.

Was ist eine barrierefreie HTML-Tabelle?

In der EN 301 549 gibt es den Prüfschritt „Prüfschritt 9.1.3.1e Datentabellen richtig aufgebaut“. Wie man diesen Prüfschritt anhand von einer HTML-Tabelle mit Unterstützung von künstlicher Intelligenz umsetzt, dass ist der Inhalt dieses Blogartikels.
Damit eine HTML-Tabelle barrierefrei ist benötigt sie zwingend die HTML-Tags:

• <thead>
• <tbody>

. Die HTML-Attribute role und aria-label können verwendet werden, sind aber nicht zwingend notwendig. Für welche Personengruppen sind barrierefreie HTML-Tabellen wichtig? Für blinde und sehbehinderte Menschen ist es wichtig, dass eine HTML-Tabelle barrierefrei ist.

Mit KI barrierefreie HTML-Tabellen programmieren

So, als erstes möchten wir eine barrierefreie Tabelle mit 2 Spalten und 5 Zeilen ohne Dateninhalt und ohne Farben.
Geben Sie in die KI ihrer Wahl folgendes Kommando ein:

Sie bekommen folgendes Ergebnis:

<table role="table" aria-label="Beispiel für eine barrierefreie Tabelle">
<thead>
<tr>
<th scope="col">Spalte 1</th>
<th scope="col">Spalte 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zelle 1,1</td>
<td>Zelle 1,2</td>
</tr>
<tr>
<td>Zelle 2,1</td>
<td>Zelle 2,2</td>
</tr>
<tr>
<td>Zelle 3,1</td>
<td>Zelle 3,2</td>
</tr>
<tr>
<td>Zelle 4,1</td>
<td>Zelle 4,2</td>
</tr>
<tr>
<td>Zelle 5,1</td>
<td>Zelle 5,2</td>
</tr>
</tbody>
</table>

Nun soll die barrierefreie Tabelle Daten enthalten. Als Daten nehmen wir Screenreader . Ein Screenreader ist eine Vorlesefunktion für blinde Menschen.
Geben Sie folgendes Kommando ein:

Sie bekommen folgendes Ergebnis:

<table role="table" aria-label="Tabelle der Screenreader und Betriebssysteme">
<thead>
<tr>
<th scope="col">Screenreader</th>
<th scope="col">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>MacOS</td>
</tr>
<tr>
<td>Talkback</td>
<td>Android</td>
</tr>
<tr>
<td>Voice Over</td>
<td>iOS</td>
</tr>
</tbody>
</table>

Das Ergebnis ist zwar akzeptabel, jedoch kann es beim Lesen in einer umfangreichen HTML-Tabelle leicht zu Verschiebungen in den Zeilen kommen.
Toll wäre, man könnte dafür sorgen, dass alle zwei Zeilen eine bestimmte Schrift-und Hintergrundfarbe verwendet wird. Aber hier benötigt es den Einsatz von CSS. Ob das klappt. Wir versuchen es und geben folgendes ein:

Anmerkung zum Einsatz von Farben

Bei der Auswahl der Farben muss darauf geachtet werden, dass genügend Farbkontrast zwischen Schriftfarbe und Hintergrundfarbe ist. Dies steht im Prüfschritt 9.1.4.3 Kontraste von Texten ausreichend der EN 301 549.
Den Farbkontrast auf Barrierefreiheit überprüfen können Sie mit der kostenlosen Software Colour Contrast Analyzer (CCA) .

Hier das Ergebnis.
Der CSS-Code:

table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
            color: black;
            text-align: left;
        }
        tr:nth-child(even) {
            background-color: darkblue;
            color: white;
        }

Der HTML-Code:

<table role="table" aria-label="Tabelle der Screenreader und Betriebssysteme">
<thead>
<tr>
<th scope="col">Screenreader</th>
<th scope="col">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>MacOS</td>
</tr>
<tr>
<td>Talkback</td>
<td>Android</td>
</tr>
<tr>
<td>Voice Over</td>
<td>iOS</td>
</tr>
</tbody>
</table>

Cool! Das hat funktioniert. Jetzt die Tabelle so wie sie aussieht ohne Code:

Schlussbemerkung

Mit Künstlicher Intelligenz kann man barrierefrei programmieren. Wichtig dabei ist, der KI genau zu erklären, was sie programmieren soll. Wenn man das richtig macht, erhält man den gewünschten Code und spart als Web-Entwickler viel Zeit.

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 HTML-Tabellen erstellen