Jak budować formularze w HTML zgodne z EAA, WCAG ?

Dostępność cyfrowa (ang. digital accessibility) oraz European Accessibility Act (EAA) określają zasady dotyczące tworzenia stron internetowych i aplikacji, tak aby były one dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Jednym z kluczowych elementów dostępności jest odpowiednie projektowanie formularzy w HTML.

Używaj semantycznych elementów HTML

Formularze powinny być zbudowane przy użyciu odpowiednich znaczników:

<form action="submit.php" method="post">
  <label for="name">Imię:</label>
  <input type="text" id="name" name="name" required>
</form>

Unikaj divów do budowy formularzy – zamiast tego używaj <form>, <label>, <input>, <select>, <textarea>.

Zawsze stosuj etykiety (<label>)

Każde pole powinno mieć powiązaną etykietę:

<label for="email">Adres e-mail:</label>
<input type="email" id="email" name="email" required>

Tekst etykiety powinien być jednoznaczny i opisowy.

Grupowanie pól (fieldset, legend)

Jeśli formularz zawiera grupę pól, stosuj <fieldset> i <legend>

<fieldset>
  <legend>Dane kontaktowe</legend>
  <label for="phone">Telefon:</label>
  <input type="tel" id="phone" name="phone">
</fieldset>

Opisy i podpowiedzi (aria-describedby)

W przypadku dodatkowych wskazówek dla użytkownika:

<label for="password">Hasło:</label>
<input type="password" id="password" name="password" aria-describedby="passwordHelp">
<small id="passwordHelp">Hasło powinno mieć min. 8 znaków.</small>

Obsługa błędów i walidacja

Native HTML5:

<input type="email" id="email" name="email" required>

Obsługa błędów z dostępnością:

<div role="alert" id="error-message" style="color: red;">  
Wprowadź poprawny adres e-mail.
</div>
<input type="email" id="email" name="email" aria-describedby="error-message" required>

Nawigacja i klawiatura

Formularze powinny być obsługiwane klawiaturą (tab, enter).

Kolejność pól powinna być logiczna (sprawdź używając tab).

Kontrast i widoczność

Minimalny kontrast tekstu etykiety do tła: 4.5:1.

Wyróżnij focus na elementach formularza (np. :focus).

ARIA dla bardziej skomplikowanych formularzy

aria-required=”true” dla obowiązkowych pól (jeśli nie można użyć required).

aria-invalid=”true” dla błędów walidacji.

Przykładowy poprawny formularz:

<form action="#" method="post">
  <fieldset>
    <legend>Dane osobowe</legend>
    <label for="name">Imię i nazwisko:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" aria-describedby="emailHelp" required>
    <small id="emailHelp">Podaj poprawny adres e-mail.</small>
    <button type="submit">Wyślij</button>
  </fieldset>
</form>

Dzięki tym zasadom formularze będą zgodne z EAA, WCAG i będą dostępne dla wszystkich użytkowników.