Dostępność cyfrowa

HTML daje wiele możliwości, by zapewniać dostępność cyfrową dokumentów. Zapewnisz ją, jeśli zastosujesz standardy sieciowe, odpowiednie znaczniki i atrybuty oraz gdy zadbasz o użyteczność komunikatów i instrukcji.

Tekst obok pola formularza nie wystarczy, aby czytniki ekranu identyfikowały go jako etykietę tego pola. Zastosuj znacznik <label> i połącz go z polem poprzez atrybut etykiety for i atrybut pola id o tej samej wartości. Na przykład:

  <label for="imie_1">Imię:</label>

  <input type="text" name="imie" id="imie_1">

Do pojedynczego pola formularza można zastosować tylko jeden element <label>. Podpowiedzi, jak wypełnić dane pole, możesz podać wprost w <label> lub w oddzielnym tekście, który powiążesz z właściwym polem na przykład za pomocą atrybutu aria-describedby. Czytnik ekranu odczyta tę podpowiedź wraz z etykietą, gdy użytkownik wejdzie na dane pole.

<label for="pole_1">Dodatkowe informacje:</label>

<input type="tekst" name="opis_syt" id="pole_1" aria-describedby="opis_syt1">

<span id="opis_syt1">Podaj dodatkowe informacje, które mogą być pomocne w ocenie tego wniosku</span>

Nie stosuj w takiej sytuacji aria-labelledby, bo jej wartość jest traktowana jako nadrzędna do treści etykiety <label> i czytnik ekranu odczyta ją, a etykietę pominie.

Jeśli pola formularza są na przykład polami wyboru do jednego pytania, przypisz im odpowiednie etykiety i powiąż je w jedną logiczną całość. To ułatwi zrozumienie ich jako opcji odpowiedzi do danego pytania, nawet przez osoby, które korzystają z czytników ekranu (np. osoby niewidome). Jeśli w jednym formularzu zbierasz dane o podobnej formule, na przykład: adres miejsca zamieszkania, adres zameldowania, adres do korespondencji — grupuj ze sobą pola, które zbierają dane z danego zakresu (rodzaju adresu). Ułatwi to rozróżnienie na przykład kilku pól: ulica — które są w tym samym formularzu — bo czytnik oprócz etykiety pola, odczyta nazwę grupy pól.

W tego typu sytuacjach elementy grupuj za pomocą elementu <fieldset>, a w elemencie <legend> wyjaśnij, co grupujesz.

CAPTCHA to specjalny algorytm, który (teoretycznie) jest w stanie wypełnić tylko człowiek. Ma to chronić formularze przed ich automatycznym wysyłaniem przez tak zwane boty. CAPTCHA najczęściej ma formę zniekształconych liter i cyfr lub wielu obrazów, spośród których użytkownik ma wybrać tylko te, które mają określoną cechę (np. widać na nich samochód).

Ten typ zabezpieczenia formularzy sprawia problemy użytkownikom, między innymi osobom z zaburzeniami wzroku, seniorom, osobom z niepełnosprawnością intelektualną. O ile problem dostępności CAPTCHA dla osób niewidomych może rozwiązać alternatywa w formie audio, na przykład z literami i cyframi, które należy wpisać, to takie rozwiązanie nie będzie wystarczające na przykład dla osób głuchoniewidomych.

Używanie HTML-owych elementów <input> sprawia, że pola i przyciski formularza mogą być dostępne bez specjalnych działań, dla osób, które nawigują za pomocą klawiatury.

Gdy stosujesz inne, własne rozwiązania, musisz przeprowadzić testy pod kątem ich obsługi wyłącznie klawiaturą.

HTML zawiera wiele atrybutów, które dobrze współpracują z technologiami asystującymi i są pomocne dla osób, które korzystaj z tych technologii.

Na przykład atrybut required pomoże łatwo odróżniać pola, które użytkownik musi wypełnić obowiązkowo, od tych, które są opcjonalne. Po wejściu w pole, które użytkownik musi wypełnić obowiązkowo, czytnik ekranu odczyta jego etykietę i typ oraz doda informację: wymagane. Samo oznaczenie obowiązkowego pola gwiazdką jest niezrozumiałe dla osób niewidomych, a niektóre czytniki mogą nawet nie odczytać symbolu gwiazdki.

Podobnie, gdy wykorzystasz atrybut checked — czytnik ekranu poinformuje użytkownika, że dane pole jest zaznaczone.

Pojawiające się dynamicznie informacje o błędach muszą być dostępne także dla osób, które nie są w stanie ich zobaczyć. Osiągniesz to na przykład, jeśli do pojedynczej informacji o błędzie lub do listy wszystkich błędów dodasz atrybut role=”alert” . W efekcie, gdy pojawi się komunikat, czytnik ekranu natychmiast go odczyta.