Gunnar Bittersmann: input in Tabellen barrierefrei

Beitrag lesen

@@Matthias Apsel

Ist die Tabelle auch ohne label-Elemente barrierefrei (natürlich unter der Voraussetzung, dass Überschriftszellen entsprechend formuliert sind)?

Ich würde nein sagen. Was aber gehen könnte (und sich auch programmatisch umsetzen ließe, wenn die Tabelle per Script generiert wird):

<table>
	<thead>
		<tr>
			<th></th>
			<th id="col1" scope="col">col 1</th>
			<th id="col2" scope="col">col 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th id="row1" scope="row">row 1</th>
			<td><input aria-labelledby="col1 row1"/></td>
			<td><input aria-labelledby="col2 row1"/></td>
		</tr>
		<tr>
			<th id="row2" scope="row">row 2</th>
			<td><input aria-labelledby="col1 row2"/></td>
			<td><input aria-labelledby="col2 row2"/></td>
		</tr>
	</tbody>
</table>

(ungetestet)

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

--
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)