Standardy · ARIA

Rola Punkt orientacyjny

form

Punkt orientacyjny dla formularza — zbioru kontrolek wejściowych przesyłających dane. Element <form> jest eksponowany jako punkt orientacyjny formularza TYLKO gdy ma dostępną nazwę. Bez nazwy jest po prostu formularzem, nie punktem orientacyjnym.

Kiedy stosować

Wokół rozbudowanego formularza — rejestracji, płatności, kontaktu, edycji profilu — który zasługuje na nawigację jako punkt orientacyjny. Podobnie jak region, element <form> jest promowany do punktu orientacyjnego formularza TYLKO gdy ma dostępną nazwę (aria-label lub aria-labelledby).

Dostępna nazwa formularza powinna opisywać jego cel: „Formularz kontaktowy”, „Zarejestruj się”, „Edytuj profil”. Unikaj ogólnego „Formularz” — jest redundantne z ogłoszeniem roli.

Jeśli formularz służy do wyszukiwania, użyj zamiast tego <search> (lub role="search") — punkt orientacyjny wyszukiwania jest bardziej szczegółowy.

Pojedyncze pole zapisu do newslettera lub pole „szukaj” nie wymaga punktu orientacyjnego formularza. Rezerwuj go dla formularzy z trzema lub więcej znaczącymi polami wejściowymi i wyraźnym celem.

Kiedy oznaczać etykietą

Zawsze — bez nazwy <form> nie staje się punktem orientacyjnym. W przypadku wielu formularzy na stronie (formularz komentarza I zapis do newslettera), każdy MUSI mieć odrębną nazwę.

aria-labelledby wskazujące na widoczny nagłówek jest preferowane nad aria-label, ponieważ łączy widoczny tytuł z ogłoszeniem punktu orientacyjnego.

Częste błędy

  • <form> bez aria-label / aria-labelledby. Nie jest punktem orientacyjnym. Użytkownicy nie mogą do niego przejść przez nawigację punktami orientacyjnymi.
  • aria-label="Formularz" — redundantne.
  • Użycie <form role="search"> RAZEM z aria-label="Search". Punkt orientacyjny wyszukiwania już to obejmuje; rola form byłaby w konflikcie.
  • Formularze logowania i rejestracji obie oznaczone jako „Zaloguj się” — nieodróżnialne w menu punktów orientacyjnych.
  • Owijanie pojedynczego pola wejściowego w <form> i oznaczanie go jako punkt orientacyjny formularza. Nadużycie; punkt orientacyjny nie wnosi żadnej wartości.

Przykład

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Contact us</h2>
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>