Академія
Правило доступності · form-field-multiple-labels
Поле форми не повинно мати кілька елементів label
ПомірнийWCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549, RGAA
Впливає на:BlindLow VisionDeafblindMobility
Переконайтеся, що поле форми не має кількох елементів <label>.
Проблема
Кілька підписів для одного поля можуть заплутати допоміжні технології — деякі скрінрідери прочитають лише перший.
Як виправити
<!-- ❌ Неправильно: два label -->
<label for="name">Ім'я</label>
<label for="name">Введіть ваше ім'я</label>
<input id="name">
<!-- ✅ Правильно: один label -->
<label for="name">Ім'я</label>
<input id="name">
<!-- ✅ Якщо потрібен додатковий опис -->
<label for="name">Ім'я</label>
<input id="name" aria-describedby="name-hint">
<span id="name-hint">Введіть ваше повне ім'я</span>Ресурси · Зовнішні посилання
- №013.3.2 Labels or Instructions Level A
- №02Understanding Success Criterion 3.3.2: Labels or Instructions
- №03F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name
- №04H44: Using label elements to associate text labels with form controls
- №05ARIA16: Using aria-labelledby to provide a name for user interface controls
- №06ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used
- №07H65: Using the title attribute to identify form controls when the label element cannot be used
Безкоштовна перевірка
Перевірте свій сайт
Дізнайтеся, чи є це порушення на вашому ресурсі
Безкоштовний аудит