Unikaj etykiet dla kontrolek, których nie można etykietować

Silktide sprawdza etykiety formularzy wskazujące na inny element za pomocą identyfikatora i zgłasza etykiety kierowane do elementów, które nie powinny ich mieć — przycisków, pól wejściowych przypominających przyciski oraz elementów, których w ogóle nie można opisać etykietą. Elementy te mają własną nazwę wynikającą z tekstu lub wartości, a osobna etykieta tworzy sprzeczne nazwy.

W HTML element <label> nadaje nazwę polu formularza za pomocą atrybutu for. Niektóre kontrolki mają jednak już własną nazwę: nazwa przycisku to jego tekst, a nazwa pola wejściowego typu submit to jego value. Innych elementów, takich jak zwykły <div> lub ukryte pole wejściowe, w ogóle nie można w ten sposób opisać etykietą.

<!-- Problem: przycisk ma już tekst „Save”; etykieta z nim konkuruje -->
<label for="save">Save</label>
<button id="save">Save</button>

Dlaczego to jest ważne

Gdy kontrolka ma dwa źródła nazwy — własny tekst oraz wskazującą na nią etykietę — różne przeglądarki i czytniki ekranu rozstrzygają ten konflikt w różny sposób. Kontrolka może zostać odczytana dwukrotnie, odczytana z niewłaściwym tekstem lub zachowywać się nieoczekiwanie po kliknięciu etykiety. Usunięcie zbędnej etykiety sprawia, że każdy odwiedzający usłyszy dokładnie to, co mówi kontrolka.

Jak to naprawić

1. W przypadku przycisków i pól wejściowych przypominających przyciski usuń <label> i polegaj na własnym tekście lub value kontrolki:

<!-- Naprawione: przycisk sam nadaje sobie nazwę -->
<button id="save">Save</button>
<input type="submit" value="Submit">

2. W przypadku etykiety wskazującej na ukryte pole wejściowe usuń etykietę — ukryte pola nigdy nie są wyświetlane ani odczytywane, więc nie potrzebują nazwy.
3. Jeśli etykietujesz element niebędący elementem formularza, taki jak <div> działający jako niestandardowa kontrolka, użyj zamiast tego ARIA: nadaj elementowi atrybut aria-labelledby wskazujący tekst, który go nazywa.

Jak Silktide to testuje

1. Znajdź każdy element <label> z atrybutem for na każdej stronie.
2. Wyszukaj element, którego id jest zgodne. Etykiety wskazujące na nieistniejące identyfikatory są tutaj pomijane — są zgłaszane przez Prawidłowe identyfikatory etykiet.
3. Zgłoś etykietę, gdy jej element docelowy jest jednym z poniższych:
   • element <button>,
   • element <input> o typie button, submit, reset, image lub hidden,
   • dowolny element, którego nie można opisać etykietą, taki jak <div> lub nagłówek.
4. Etykiety wskazujące na zwykłe pola — tekstowe pola wejściowe, <select>, <textarea> i podobne — przechodzą kontrolę.

Dowiedz się więcej

• Zrozumienie kryterium sukcesu 1.3.1: Informacje i relacje (WCAG 2.2)
• Technika H44: Używanie elementów label (WCAG)
• Element label (MDN)
• Etykiety pól