input in Tabellen barrierefrei

[Matthias Apsel]

Hallo alle,

eine Tabelle hat folgende Struktur

<table>
  <thead>
    <th>     <th>col1                  <th>col2
  <tbody>
    <th>row1 <td><input type="number"> <td><input type="number"> 
    <th>row2 <td><input type="number"> <td><input type="number">

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

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Matthias,

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

ich habe keine Ahnung, aber eine Vermutung: Nein. Der Bezug zwischen th und td ist längst nicht so unmittelbar, wie der zwischen label und input. Du kannst aber den Inhalt eines th in ein label fassen, um es mit dem input im td logisch zu verknüpfen. Das klappt freilich nur, wenn Du eine zweispaltige Tabelle hast...

Liebe Grüße

Felix Riesterer

[jensp]

Hallo Matthias,

ich würde ebenfalls sagen: Nein. Im dem Algorithmus, den Browser zur Ermittlung des Accessible Name eines Elements nutzen sollen taucht th jedenfalls nicht auf.

Viele Grüße

Jens

[Gunnar Bittersmann]

@@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!

[Marc]

Hej Matthias,

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

Auch ich bin kein Screenreader-Experte (darauf zielst du ja letztendlich ab), aber ich teste es mal mit VoiceOver auf dem iPhone, wenn du magst.

Hast du einen codepen oder so?

Aus dem BITV-Test:

Prüfschritt 1.3.1h

Beschriftung von Formularelementen programmatisch ermittelbar

Bei label-Elementen geschieht das über das for-Attribut oder den Einschluss des beschrifteten Formularelements in das label-Element. Sind Beschriftungen nicht mit dem label-Element ausgezeichnet, soll eine Beschriftung des zugehörigen Formularelements auf anderem Weg (etwa über das aria-labelledby-Attribut) sichergestellt sein.

Ist bei Gruppen von Formularelementen eine Gruppenbeschriftung für das Verständnis der Beschriftung der einzelnen Formularelemente nötig, sollte die Verfügbarkeit sichergestellt werden (z.B. mit Hilfe von fieldset mit legend).

Mir scheint, formal könnte man den Punkt als „eher erfüllt“ und damit als bestanden ansehen.

Aber es gibt noch mehr Prüfschritte:

Abgrenzung zu anderen Prüfschritten Ob die Beschriftungen von Formular-Elementen (auch bei Nutzung von Gruppenüberschriften als Ergänzung der unmittelbaren Beschriftungen) hinreichend aussagekräftig sind, wird in Prüfschritt 2.4.6a "Aussagekräftige Überschriften und Beschriftungen" geprüft. Hier geht es um die programmatische Ermittelbarkeit. Ob die sichtbare Beschriftung überhaupt vorhanden ist, wird in Prüfschritt 3.3.2a "Beschriftungen von Formularelementen vorhanden" geprüft. Ob die sichtbare Beschriftung im zugänglichen Namen des Formularelements vorkommt, wird in Prüfschritt 2.5.3a "Sichtbare Beschriftung Teil des zugänglichen Namens" geprüft.

Es kommt ja auch nicht nur auf die Zugänglichkeit für blinde an. Sind die Spaltenüberschriften denn auf jeden Fall im viewport? Ist die Tabelle so simpel, dass auch Menschen mit Konzentrationsschwäche und anderen kognitiven Einschränkungen damit klar kommen werden?

Spätestens wenn (hohe) Zoomstufen nötig werden, sind die Bezüge für Sehende wohl nicht mehr auszumachen?!?

Muss man mal fertig sehen, ist so nicht abschließend zu beurteilen.

Über den Test hinaus gehende Empfehlungen beschreiben ein optimales Formular als eines mit einer einzigen Achse. In unserem Kulturkreis sollten Label und eingabefelder linksbündig untereinander stehen.

Letztlich kommt es darauf an, wie gut das Formular im Endergebnis bedienbar ist.

Marc (marctrix)