Dostępne przyciski opcji i pola wyboru

Przyciski opcji i pola wyboru należą do najprostszych kontrolek HTML – i do najczęściej psutych w sklepach, bo projektanci chcą własnych próbników kolorów, przełączników i „chipsów” filtrów. Ta strona pokazuje, jak zachować ich dostępność. Należy do serii dostępne wzorce interfejsu.

Kiedy którego użyć

APG opisuje grupę przycisków opcji jako zestaw przycisków do zaznaczania, z których „w danej chwili zaznaczony może być najwyżej jeden”, a pola wyboru jako dwustanowe (zaznaczone lub nie) albo trójstanowe, z dodatkowym stanem częściowego zaznaczenia – np. „Zaznacz wszystko”, gdy wybrano tylko część pozycji.

Kryteria WCAG

• 1.3.1 Informacje i relacje (A): grupa i jej pytanie muszą być zapisane w kodzie, a nie tylko w układzie.
• 3.3.2 Etykiety lub instrukcje (A): każda opcja ma etykietę; grupa ma pytanie.
• 4.1.2 Nazwa, rola, wartość (A): rola, nazwa i stan zaznaczenia są udostępnione.
• 2.1.1 Klawiatura (A) i 2.4.7 Widoczny fokus (AA).
• 1.4.11 Kontrast elementów nietekstowych (AA): kwadrat lub kółko oraz stan zaznaczenia potrzebują kontrastu 3:1.
• 2.5.8 Rozmiar celu (minimum) (AA): klikalna etykieta powiększa cel.
• 3.2.2 Podczas wprowadzania danych (A): wybór opcji nie może niespodziewanie zmienić kontekstu, np. przeładować strony na inny kraj.

Przykład kodu

<fieldset>
  <legend>Sposób dostawy</legend>

  <input type="radio" id="ship-courier" name="shipping" value="courier" checked>
  <label for="ship-courier">Kurier, 1–2 dni, 6,90 €</label>

  <input type="radio" id="ship-locker" name="shipping" value="locker">
  <label for="ship-locker">Paczkomat, 2–3 dni, 3,90 €</label>
</fieldset>

<fieldset>
  <legend>Kolor</legend>
  <!-- Próbniki: prawdziwy input zostaje, zmienia się tylko wygląd -->
  <input type="radio" id="c-navy" name="colour" value="navy" class="swatch-input">
  <label for="c-navy" class="swatch" style="--swatch:#1f2a44">Granatowy</label>
</fieldset>

<input type="checkbox" id="terms" name="terms" required>
<label for="terms">Akceptuję <a href="/pl/regulamin">regulamin</a></label>

Uwagi:

• fieldset i legend to technika W3C H71. Mówi ona, że są najważniejsze przy przyciskach opcji i polach wyboru o wspólnej nazwie pola i nie są wymagane, gdy pojedyncze etykiety same wyjaśniają pytanie.
• Przy próbnikach proszę zostawić w etykiecie tekst „Granatowy” (w razie potrzeby wizualnie ukryty), aby kolor nie był przekazywany wyłącznie kolorem.
• Natywny input należy ukryć wizualnie techniką clip, nigdy przez display: none ani visibility: hidden, które usuwają go z obsługi klawiaturą i z czytników ekranu. Gdy input ma fokus, obrys fokusu powinien być widoczny na etykiecie.
• Jeśli budują Państwo własną kontrolkę bez natywnego inputu, wzorzec APG używa role="radiogroup" z elementami potomnymi role="radio" albo role="checkbox", aria-checked (true, false, a dla pól wyboru także mixed), etykiety grupy i pełnej obsługi klawiatury napisanej samodzielnie. Natywny input jest dużo prostszy.

Obsługa klawiaturą

Według wzorców APG dla grupy przycisków opcji i pola wyboru:

APG zauważa, że wewnątrz paska narzędzi strzałki przenoszą fokus bez zmiany zaznaczonej opcji, a Spacja ją zaznacza.

Typowe błędy w sklepach internetowych

• Próbniki kolorów i rozmiarów zbudowane z div lub span z obsługą kliknięcia – bez roli, bez klawiatury, bez stanu.
• Natywny input ukryty przez display: none za ładnie ostylowaną etykietą.
• Filtry jako pola wyboru, które przeładowują stronę po każdym kliknięciu bez uprzedzenia i przenoszą fokus na górę.
• Grupy bez pytania: przyciski „Tak / Nie”, których pytanie jest tylko wizualnym nagłówkiem.
• Stan zaznaczenia pokazany tylko cienką zmianą koloru obramowania o niskim kontraście albo samym kolorem na próbnikach.
• Tekst „Akceptuję regulamin” niepowiązany z polem wyboru, więc kliknięcie tekstu nic nie robi, a czytnik ekranu odczytuje „pole wyboru, niezaznaczone” bez nazwy.
• Maleńkie cele pól wyboru na listach filtrów na telefonach.

Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego

Wszystkie to karty z naszej biblioteki reguł. Test ręczny jest potrzebny dla obsługi klawiaturą (strzałki w grupach, Spacja), widocznego fokusu na własnych próbnikach, kontrastu kwadratu i stanu zaznaczenia (1.4.11), tego, czy każda grupa ma jasne pytanie, oraz tego, czy wybór opcji zmienia kontekst. Przy kontraście elementów nietekstowych pomaga narzędzie do sprawdzania kontrastu.

Proszę przetestować stronę produktu darmową kontrolą jednej strony. To automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Kiedy używać przycisków opcji, a kiedy pól wyboru?

Przyciski opcji (radio), gdy z grupy można wybrać dokładnie jedną opcję, np. sposób dostawy. Pola wyboru (checkbox), gdy każdą opcję można włączyć lub wyłączyć niezależnie, np. filtry lub „Akceptuję regulamin”.

Czy przyciski opcji potrzebują fieldset i legend?

Zwykle tak. Technika W3C H71 mówi, że fieldset i legend są najważniejsze przy przyciskach opcji i polach wyboru, które dotyczą jednego pytania, bo pojedyncze etykiety nie mówią, jakie to pytanie. Nie są wymagane, gdy same etykiety są jasne.

Jak użytkownicy klawiatury obsługują grupę przycisków opcji?

Tab przenosi do grupy i z niej, strzałki przesuwają między opcjami i je zaznaczają, a Spacja zaznacza opcję z fokusem. Tak działają natywne przyciski opcji i wzorzec grupy przycisków opcji z APG.

Czy mogę używać pól wyboru z własnym stylem?

Tak, jeśli prawdziwy input zostaje na stronie, a zmienia się tylko jego wygląd. Ukrycie inputu przez display none i narysowanie w jego miejsce elementu div usuwa go z obsługi klawiaturą i z czytników ekranu.

Czy kontrola automatyczna może przetestować przyciski opcji i pola wyboru?

Znajduje pola bez etykiety, własne pola wyboru bez nazwy i pola z kilkoma etykietami. Nie oceni, czy grupa ma jasne pytanie ani czy własna kontrolka działa z klawiatury.

Źródła

• W3C WAI, APG Radio Group pattern: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
• W3C WAI, APG Checkbox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
• W3C, Technique H71 fieldset and legend: https://www.w3.org/WAI/WCAG22/Techniques/html/H71