Урок: найти доступное имя элемента в инструментах браузера
Внешне понятная кнопка или поле может оказаться безымянным для вспомогательной программы. В этом уроке вы проверите вычисленное доступное имя и его источник, а не только внешний вид компонента.
Назначение
Внешне понятная кнопка или поле может оказаться безымянным для вспомогательной программы. В этом уроке вы проверите вычисленное доступное имя и его источник, а не только внешний вид компонента.
Как это работает
Сохраните разметку в локальном документе. В Chrome DevTools выберите поле в Elements и откройте раздел Accessibility. Найдите вычисленное имя и роль; названия панелей и расположение могут меняться между версиями.
Пример
<label for="access-name">Название проекта</label>
<input id="access-name" name="project">
<button type="button">Сохранить черновик</button>Что должно получиться
Поле получает имя из связанного label, кнопка — из своего текста. В дереве доступности видны смысловые объекты, которые не обязаны повторять каждый декоративный узел DOM.
Граница применения и частая ошибка
Наличие имени не доказывает доступность всей страницы. Нужны также клавиатурная проверка, порядок фокуса, ошибки и реальные сценарии со вспомогательными технологиями. Не добавляйте aria-label поверх хорошей подписи без причины: она может изменить вычисленное имя.
Самостоятельная проверка
В копии поменяйте for так, чтобы он не совпадал с id, и посмотрите на имя поля. Исправьте связь. Затем измените текст кнопки и убедитесь, что вычисленное имя обновилось; запишите источник каждого имени.