Przejdź do treści
A11ySignal
poważnyWCAG 2.1.1 · A

Ramki z treścią przyjmującą fokus nie mogą mieć tabindex=-1.

frame-focusable-content

Elementy <frame> i <iframe> z treścią przyjmującą fokus nie mają tabindex=-1.

Kryterium, które za tym stoi

2.1.1 Klawiatura

Wszystko, co da się zrobić myszą, musi dać się zrobić klawiaturą.

Poziom A · EN 301 549 § 9.2.1.1

Po co jest to sprawdzenie

Obsługa klawiaturą to podstawa, na której opierają się czytniki ekranu, przełączniki i sterowanie głosem. Kontrolka tylko dla myszy jest dla nich wszystkich nieosiągalna.

Co zwykle je wywołuje

  • błąd`<div onclick>` bez `tabindex` i bez obsługi klawiszy.
  • błądWłasna lista rozwijana, która otwiera się tylko po najechaniu.
  • błądZmiana kolejności metodą przeciągnij i upuść, bez alternatywy klawiaturowej.

Jak to naprawić

  • róbUżywaj `<button>` i `<a href>`. Są fokusowalne i wywoływane klawiszem bez żadnej pracy.
  • róbJeśli naprawdę musi być własny element: `tabindex="0"`, rola oraz obsługa Enter i spacji.
  • róbDaj każdemu przeciąganiu ścieżkę klawiaturową — przyciski „w górę” i „w dół” wystarczą.

Jak to jest raportowane

A11ySignal zgłasza to z wagą poważny. Każdy błędny element ma swój selektor CSS i kod, który zawiódł, więc trafisz prosto do właściwej linii, zamiast jej szukać. Deque publikuje szczegóły na poziomie silnika:

https://dequeuniversity.com/rules/axe/4.13/frame-focusable-content

Sprawdzenie zaimplementowane w axe-core 4.13.0, © Deque Systems, MPL-2.0.

Inne sprawdzenia dla 2.1.1