scrollable-region-focusable
Scrollbare Bereiche ohne fokussierbaren Inhalt sollten per Tastatur fokussierbar sein
Markiert Elemente, deren CSS overflow:auto/scroll festlegt, die keinen fokussierbaren Nachfahren enthalten und selbst nicht per Tastatur fokussierbar sind, zur manuellen Prüfung, ob ihr Inhalt tatsächlich überläuft und daher per Tastatur scrollbar sein sollte.
Anwendbarkeit. Absichtlich auf eine feste Menge von Container-Tags beschränkt, die wahrscheinlich scrollen (div, section, article, aside, main, nav, pre, table, blockquote, ul, ol, textarea) und ein berechnetes overflow-x/overflow-y von auto oder scroll haben, nicht auf jedes Element der Seite, damit die Prüfung deterministisch und performant bleibt (dieselbe Art der Eingrenzung wie bei region). Findet sie nichts nachzufragen, meldet sie notApplicable, nicht pass: Sie gilt nur für das, was ihre Prüfung markiert, und dort nichts zu finden zeigt nicht, dass alles in Ordnung ist.
Erwartung. Ein Bereich, der laut CSS scrollen kann (auto/scroll), sollte per Tastatur erreichbar sein: Entweder enthält er bereits einen Nachfahren in der sequenziellen Tab-Reihenfolge (einen Link, einen Button, ein Formularelement oder ein Element mit nicht negativem tabindex, zu dem man per Tab gelangen und von dort mit den Pfeiltasten scrollen kann; eines mit tabindex="-1", ein deaktiviertes Bedienelement oder eines mit type="hidden" oder eines, das die Seite ausblendet, zählt nicht), oder der Bereich selbst wird per Tab erreicht: über einen nicht negativen tabindex oder nativ, wie eine <textarea> oder ein bearbeitbarer Bereich. Eine deaktivierte <textarea> bleibt außen vor, da ein deaktiviertes Feld nicht bedienbar sein muss.
Beispiele
<style>.scrollY { overflow-y: auto; height: 100px; }</style><div class="scrollY">Plain long text content with no interactive children at all.</div>
Der Bereich kann scrollen, hat aber keinen eigenen tabindex und enthält keinen fokussierbaren Nachfahren, daher lässt er sich per Tastatur nie erreichen, um ihn zu scrollen.
<style>.scrollY { overflow-y: auto; height: 100px; }</style><div class="scrollY" tabindex="0">Long content, but the region itself is focusable.</div>
tabindex="0" macht den scrollbaren Bereich selbst per Tastatur erreichbar.
So prüfen Sie es
Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.
SCROLLABLE_OVERFLOW_NOT_FOCUSABLE
- Suchen Sie das im Bericht genannte Element und prüfen Sie bei den Größen, in denen die Seite genutzt wird, ob sein Inhalt überläuft (eine Bildlaufleiste erscheint oder Inhalt wird abgeschnitten).
- Läuft er nicht über, ist die Prüfung bestanden.
- Läuft er über, klicken Sie direkt davor und drücken Sie Tab, bis der Fokus ihn erreicht.
- Drücken Sie bei fokussiertem Element die Pfeiltasten, Bild ab und die Leertaste und prüfen Sie, ob der Inhalt scrollt.
- Lässt sich der Bereich selbst nicht mit der Tastatur scrollen, bietet die Seite vielleicht einen anderen Weg, das Verborgene zu sehen, etwa die Schaltflächen „Zurück“ und „Weiter“ eines Karussells. Das zählt nur, wenn er sich allein mit der Tastatur bedienen lässt und jedes verborgene Element sichtbar macht.
Bestanden. Das Element läuft nicht über, oder alles darin Verborgene lässt sich allein mit der Tastatur sichtbar machen, durch Scrollen oder auf einem anderen Weg, den die Seite bietet.
Nicht bestanden. Ein Teil des verborgenen Inhalts lässt sich nur mit Maus oder Touch sichtbar machen; das verstößt gegen WCAG 2.1.1.