Академія
Правило доступності · label-content-name-mismatch
Видимий текст елемента повинен бути частиною його доступної назви
СерйознийWCAG 2.1 Experimental, EN 301 549, RGAA
Впливає на:BlindLow VisionDeafblindMobility
Переконайтеся, що видимий текст елемента є частиною його доступного імені.
Проблема
Якщо aria-label не містить видимий текст, користувачі голосового керування не зможуть активувати елемент, називаючи те, що бачать.
Як виправити
<!-- ❌ Неправильно: видимий текст не міститься в aria-label -->
<button aria-label="Закрити діалог">Відмінити</button>
<!-- ✅ Правильно: aria-label містить видимий текст -->
<button aria-label="Відмінити та закрити діалог">Відмінити</button>
<!-- ✅ Ще краще: без aria-label, якщо видимий текст достатній -->
<button>Відмінити</button>Ресурси · Зовнішні посилання
- №01Label in name
- №02F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name
- №03H44: Using label elements to associate text labels with form controls
- №04ARIA16: Using aria-labelledby to provide a name for user interface controls
- №05ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used
- №06H65: Using the title attribute to identify form controls when the label element cannot be used
Безкоштовна перевірка
Перевірте свій сайт
Дізнайтеся, чи є це порушення на вашому ресурсі
Безкоштовний аудит