aria-required

Kiedy stosować

Wyłącznie wtedy, gdy atrybut HTML required nie jest dostępny. Natywne pola formularza — <input>, <select>, <textarea> — powinny używać required. Atrybut HTML jest ogłaszany przez każdy czytnik ekranu, uczestniczy w walidacji formularza przez przeglądarkę i wyzwala pseudoklasę CSS :required. aria-required nie robi żadnej z tych rzeczy samodzielnie; jest wyłącznie ogłoszeniem.

Uzasadnione przypadki użycia aria-required:

• Niestandardowy role="combobox" zbudowany na elemencie <div> lub ostylowanym <input>, gdzie przejęto kontrolę nad walidacją.
• role="radiogroup", gdzie cała grupa jest wymagana (nie można umieścić required na elemencie <div>).
• Niestandardowy selektor daty, selektor pliku lub widżet ocen, który nie jest natywnym polem input.

Jeśli można użyć HTML required, należy to zrobić.

Jak działa

Wartość logiczna. aria-required="true" sprawia, że technologia wspomagająca ogłasza „wymagane” (lub „należy wypełnić”, w zależności od czytnika ekranu) obok nazwy i roli pola. aria-required="false" jest równoznaczne z pominięciem atrybutu i rzadko jest potrzebne.

aria-required nie zapobiega przesłaniu formularza. Nie dodaje czerwonej gwiazdki. Nie przełącza pseudoklasy CSS. Jest wyłącznie sygnałem dla technologii wspomagającej. Logika walidacji, komunikaty o błędach i widoczny znacznik pola wymaganego nadal pozostają w gestii autora.

Widoczny znacznik wymaganego pola (*, słowo „wymagane” itp.) powinien być też zawarty w dostępnej nazwie — albo w widocznym tekście etykiety, albo za pośrednictwem opisu — tak by użytkownik widzący i użytkownik technologii wspomagającej otrzymywali te same informacje.

Typowe błędy

• Używanie aria-required="true" na natywnym elemencie <input> zamiast atrybutu HTML required. Działa, ale rezygnuje z walidacji przeglądarki i stylu :required bez żadnego powodu.
• Ustawienie aria-required="true" na elemencie niebędącym kontrolką formularza — przycisku, nagłówku, elemencie div bez roli. Atrybut jest ignorowany.
• Pominięcie widocznego znacznika wymaganego. Użytkownicy widzący widzą nieoznaczone pole; użytkownicy technologii wspomagającej słyszą „wymagane”. Problem z kryterium sukcesu WCAG 1.3.3.
• Oznaczenie pola jako wymaganego w ARIA przy jednoczesnym pominięciu go w logice walidacji przesłania formularza. Ogłoszenie mówi „wymagane”; serwer bez problemu przyjmuje puste wartości.
• Łączenie aria-required z aria-invalid="true" zbyt wcześnie. Pole jest nieprawidłowe dopiero po tym, jak użytkownik próbował przesłać formularz i pozostawił je puste, nie przy ładowaniu strony.
• Lokalizowanie widocznego znacznika * przy jednoczesnym zapominaniu, że tekst czytnika ekranu w etykiecie jest teraz niedopasowany.

Przykład

<!-- Natywny input: preferuj atrybut HTML -->
<label for="email">
  Email <span aria-hidden="true">*</span>
</label>
<input id="email" type="email" required aria-describedby="email-hint">
<p id="email-hint">Required. We will only use this to send your receipt.</p>

<!-- Niestandardowy combobox, gdzie HTML required nie jest dostępny -->
<div
  role="combobox"
  aria-required="true"
  aria-labelledby="country-label"
  aria-controls="country-listbox"
  aria-expanded="false"
>
  <input type="text" id="country-input">
</div>
<span id="country-label">Country (required)</span>