Tabellen
→ Beispiel: tabelle.html
Zu beachten:
- Ist der Zusammenhang zwischen den Elementen auch im Code ersichtlich?
- Kann ein AT-Benutzer die Öffnungszeiten verstehen?
Bemerkungen
Die Tabelle wurde nur für das Erzeugen der Spalten verwendet. Für die Zeilen wurden keine Reihen verwendet und stattdessen mit Zeilenumbrüchen gearbeitet.
Und immer wieder gerne vergessen: das <caption> ist essentiell für barrierefreie Tabellen!
→ sichtbar machen mit "Kontur/Tabelle mit Kontur versehen/Tabellenzellen mit Kontur versehen" (Firefox)
Siehe auch: How screen readers navigate data tables [https://tink.uk/how-screen-readers-navigate-data-tables/]
Quellcode
Ist
<table>
<tbody>
<tr>
<td>Apotheke im Zentrum Fel…</td>
<td>
Montag - Donnerstag<br />
Freitag<br />
Samstag
</td>
<td>
8.00<br />
8.00<br />
8.00
</td>
<td>bis</td>
<td>
19.00<br />
19.00<br />
17.00
</td>
<td>Uhr ► Erdgeschoss</td>
</tr>
…
</tbody>
</table>
Soll
<table>
<caption>…</caption>
<thead>…</thead>
<tbody>
<tr>
<td>Apotheke im Zentrum Fel…</td>
<td>Montag – Donnerstag</td>
<td>8.00</td>
<td>bis</td>
<td>19.00</td>
<td>Uhr ► Erdgeschoss</td>
</tr>
<tr>
<td></td>
<td>Freitag</td>
<td>8.00</td>
<td>bis</td>
<td>19.00</td>
<td>Uhr</td>
</tr>
<tr>
<td></td>
<td>Samstag</td>
<td>8.00</td>
<td>bis</td>
<td>17.00</td>
<td>Uhr</td>
</tr>
</tbody>
</table>
Bemerkung: in diesem Beispiel geht es nur um die Tabellenstruktur.