Elemente mit scrollbarem Inhalt müssen über die Tastatur zugänglich sein

Casandra Visser

Autor

Yotam Flohr

Forscher

Ritvik Shrivastava

Experte

Juli 29, 2024

Betroffene Behinderungen: Blind Sehbehindert Hören Mobilität

Standards: WCAG 2.2 Level A

Laut Web-Accessibility-Standards müssen Elemente mit scrollbarem Inhalt über die Tastatur zugänglich sein.

Warum es wichtig ist

Scrollbare Inhalte benötigen fokussierbare Elemente, damit Nutzer sie mit der Tastatur navigieren können. Andernfalls entstehen Barrieren, die den Zugang zur Website erschweren.

Behebung des Problems

Der scrollbare Bereich muss über die Tastatur zugänglich sein.

Gutes Codebeispiel

Codebeispiel

<div id="pass1" style="height: 200px; overflow-y: auto" tabindex="0">
<div style="height: 2000px">
<p>Inhalt</p>
</div>
</div><div id="pass2" style="height: 20px; overflow: auto;">
<input type="text" tabindex="-1" />
<select tabindex="-1"></select>
<textarea tabindex="-1"></textarea>
<p style="height: 200px;" tabindex="0"></p>
</div>

Kopieren

Die folgenden Beispiele würden fehlschlagen, wenn der Browser die Tastaturereignisse für die Autovervollständigung abfängt. Um sicherzustellen, dass der Inhalt zugänglich bleibt, sollte immer ein tabindex=”0″ auf den scrollbaren Bereich oder auf ein statisches Element innerhalb des Bereichs gesetzt werden.

Codebeispiel

<div id="conditional1" style="overflow-y: scroll; height: 5px;">
<input type="text" />
</div>

Kopieren

Schlechtes Codebeispiel

Codebeispiel

<div id="fail1" style="height: 5px; overflow: auto;">
<input type="text" tabindex="-1" />
</div><div id="fail2" style="height: 5px; overflow: auto;">
<input type="text" tabindex="-1" />
<select tabindex="-1"></select>
<textarea tabindex="-1"></textarea>
</div>

Kopieren

Testfälle

Für weitere Beispiele besuchen Sie die ACT Rules Library der W3C auf GitHub.