Formularze - Etykiety i instrukcje
Metoda badania:
Kontrola wzrokowa, inspekcja kodu
Zastosowanie:
- Wszystkie komponenty zbierające dane (kontrolki formularzy), takie jak pola tekstowe, przyciski opcji, pola wyboru, pola tylko do odczytu i listy wielokrotnego wyboru oraz przyciski zarządzania wypełnionymi formularzami (wyślij, zrezygnuj, wyczyść).
- Wszystkie instrukcje i wskazówki tekstowe i graficzne związane z kontrolkami formularzy, w tym dotyczące zgrupowania pól, kolejności wypełniania, specjalnych warunków lub kwalifikatorów, instrukcji formatowania, itp.
Założenia, zastrzeżenia lub wyjątki
do opracowania
Obsługa dostępności
do opracowania
Oczekiwania:
Kryteria sukcesu: 1.1.1. Treść nietekstowa, 1.3.1 Informacje i relacje, 1.3.5 Określenie pożądanej wartości, 2.4.6 Nagłówki i etykiety, 3.3.2 Etykiety lub instrukcje, 2.5.3 Etykieta w nazwie
- Wszystkie pola i kontrolki w formularzu posiadają powiązaną programowo etykietę tekstową (grupy pól mogą współdzielić etykietę).
- Pola formularza z wieloma etykietami są oznaczone za pomocą legendy grupy pól lub etykietą wskazaną atrybutem
aria-labelldedby
. - Elementom
label
zawierającym unikalne etykiety tekstowe w atrybuciefor
przypisane są prawidłowe wartości identyfikatorów pól, do których się odnoszą - Każda etykieta tekstowa wyraźnie określa cel lub funkcję pola formularza lub kontrolki.
- Wszystkie etykiety pól i kontrolek formularzy są z nimi powiązane programowo ALBO istnieje alternatywna etykieta zapewniona za pomocą atrybutu
title
bądźaria-label
- Etykieta tekstowa pozostaje widoczna, gdy pole posiada fokus klawiatury i po wypełnieniu pola
- Etykiety i instrukcje zawierają wystarczające szczegóły, w tym wszelkie wymagania dotyczące formatowania (w tym reguły dotyczące hasła) oraz informacje, czy pole jest wymagane.
- Opisy formatowania lub inne krytyczne instrukcje w celu prawidłowego wypełnienia pola są dodawane za pomocą atrybutu
aria-describedby
lub w etykiecie pola formularza. - Stosowane są odpowiednie atrybuty typu danych (Zobacz: HTML 5 input types).
- Stosuje się odpowiednie atrybuty autouzupełniania.
Instrukcje testowania
- Sprawdź, czy każde pole formularza zbierające dane ma etykietę lub instrukcję.
- Sprawdź, czy etykiety i instrukcje wystarczająco jasno informują użytkowników, jakie informacje i jaki format danych są wymagane
- Sprawdź, czy kombinacje dostępnej nazwy, dostępnego opisu i innych powiazań programowych (np. powiązane kolumny i wiersze tabeli) zrozumiale opisują każdą kontrolkę zbierającą dane i zawierają instrukcje i wskazówki niezbędne i odpowiednie do poprawnego podania danych. Zobacz Mapowanie API dostępności HTML 1.0, aby uzyskać szczegółowe informacje na temat technik określania dostępnej nazwy i opisu.
- Sprawdź, czy znaczniki legend są poprawnie i odpowiednio stosowane do oznaczania grupy powiązanych pól.
- Sprawdź, czy atrybuty ARIA używane do znakowania formularzy są używane prawidłowo, w tym czy:
- atrybuty
aria-labelledby
wskazują na identyfikator etykiety - atrybuty
aria-describedby
wskazuje na identyfikator elementu z dodatkowymi informacjami instruktażowymi, takich jak formatowanie lub wymagania dotyczące hasła. - atrybuty
aria-label
są używane tylko wtedy, gdy etykieta tekstowa nie byłaby odpowiednia dla osoby korzystającej z czytnika ekranu (preferowany tytuł)
- atrybuty
Wykorzystanie skryptozkładki ANDI
- Uruchom skryptozakładkę ANDI i wybierz z menu opcję interaktywne.
- Użyj przełącznika między wykrytymi elementami strony, aby wybierać komponenty formularzy do analizy.
- Dane wybranego komponentu (znacznik, typ,…) pojawiają obok etykiety Element.
- Sprawdź w sekcji podsumowującej informacje statystyczne o liczbie wykrytych elementów i możliwych problemach
- Sprawdź w sekcji Komponenty dostępności, jakie właściwości decydujące o dostępności komponentu zostały wdrożone oraz jakie defekty lub możliwe defekty zostały wykryte. Zbadaj dokładnie każdy z wykrytych defektów.
- Sprawdź w sekcji Wyjście ANDI, czy użytkownik technologii wspomagającej zostanie wystarczająco i odpowiednio poinstruowany, jakie podać dane i w jakim formacie.
Zasoby
- Form accessibility: a practical guide
- The Anatomy of Accessible Forms: The Problem with Placeholders
- The Anatomy of Accessible Forms: Required Form Fields
- The Anatomy of Accessible Forms: Best Practices
- The Anatomy of Accessible Forms: Error Messages
- Forms, Form Validation, and CAPTCHAs
- How to make an accessible form: it’s easier than you think
- Forms Concepts
- Creating Accessible Forms
- Designing Accessible Forms
- Forms, Form Validation, and CAPTCHAs
- Jim Allan’s Slides on Accessible Forms
- A Definitive Guide to Sensible Form Validations
- Form data validation
Pomocne narzędzia:
- skryptozakładka Forms z kolekcji Paula J. Adama
- skryptozakładka Form Labels z kolekcji Jima Tatchera
- skryptozakładka Forms z kolekcji Pixo i University of Illinois. z kolekcji Pixo i University of Illinois.
- Opcja interaktywne w skryptozakładce ANDI
- Opcja łącza/przyciski w skryptozakładce ANDI
Techniki WCAG 2.1
do opracowania
Przypadki testowe
Zaliczone
do opracowania
Niezaliczone
do opracowania