Ulepsz witrynę, stosując Web Content Accessibility Guidelines (WCAG) 2.1
Demo zaczyna się tutaj
|
Brakuje instrukcji niezbędnych do wypełnienia formularza, szczególnie w odniesieniu do wymaganych pól.
Przyciski radiowe nie są zgrupowane przy użyciu elementu fieldset
i nie są opisane przy użyciu elementu legend
.
Przycisk radiowy nie jest powiązany z etykietą "Żaden" przy użyciu elementu label
.
<input class="lign" type="radio" name="res" value="1">
Pozycje na tej długiej liście nie są pogrupowane, aby ułatwić efektywne użycie za pomocą klawiatury.
Uwaga: Pozycje na tej liście posortowane są według kraju, a nie miasta, co utrudnia użytkownikom wykonanie żądanego zadania.
W polu wyboru brakuje napisów za pomocą atrybutu title
lub elementu label
.
<select name="cc"> ... </select>
Sekwencja etykiet i pól wejściowych nie jest zgodna z porządkiem wizualnym i nie jest poprawna, gdy formularz jest nawigowany za pomocą klawiatury. Sekwencja jest następująca:
Nazwa: [przycisk radiowy] Pan [przycisk radiowy] Pani [pole tekstowe] [pole tekstowe] [pole tekstowe] Adres e-mail Powtórz e-mail
Uwaga: Pierwsze [pole tekstowe] dotyczy "adresu e-mail", drugie - "Nazwy", a trzecie - "Powtórz e-mail", ale nie jest to jasne, ponieważ pola formularza nie są powiązane z ich etykietami.
Dane w tej tabeli są zorganizowane przy użyciu struktur dokumentu, takich jak element p
, a nie struktur tabeli, takich jak elementy th
i td
, tak że kolejność komórek danych nie ma sensu dla niektórych czytników.
<td rowspan="4" bgcolor="#ffffff" style="border-right: 1px dashed silver;">
<p style="background:#DBDBDB;padding-top:3px;padding-bottom:2px;"><br></p>
<p style="margin-bottom:0px;padding-top:3px; padding-bottom:5px" align="right"><strong>Lubię</strong></p>
<p style="margin-top:5px;background:#DBDBDB;padding-top:3px; padding-bottom:4px" align="right"><strong>Nie lubię</strong></p>
</td>