Tabellen und Screen Reader – ein Testcase

Der Apple-Screen-Reader VoiceOver benötigt das th-Element, um eine Tabelle als Tabelle zu erkennen, und mit den tabellenspezifischen Tastaturkombis zu navigieren.
Wenn eine Tabelle kein th-Element beinhaltet, wird der Inhalt der Tabelle von VoiceOver als einfacher Text behandelt.

1. Tabelle ohne th

10:00 – 10:15 Uhr	Begrüßung
10:15 – 10:45 Uhr	Das Leitbild – eine Einführung

Der HTML-Code:

<table>		
	<tr>
		<td>10:00 – 10:15 Uhr</td>
		<td>Begrüßung</td>
	</tr>
	<tr>
		<td>10:15 – 10:45 Uhr</td>
		<td>Das Leitbild</td>
	</tr>
</table>

2. Tabelle mit th

Uhrzeit	Thema
10:00 – 10:15 Uhr	Begrüßung
10:15 – 10:45 Uhr	Das Leitbild – eine Einführung

Der HTML-Code:

<table>
	<tr>
		<th scope="col">Uhrzeit</th>
		<th scope="col">Thema</th>
	</tr>
	
	<tr>
		<td>10:00 – 10:15 Uhr</td>
		<td>Begrüßung</td>
	</tr>
	<tr>
		<td>10:15 – 10:45 Uhr</td>
		<td>Das Leitbild</td>
	</tr>
</table>

Und jetzt noch ein Test für ein Kalender-Einblendmenü

Wie es aussieht, funktioniert das am Desktop mit Screen Reader nicht wirklich. Gut jedoch auf iOS-VO