Выбор ответа Middle Доступность спрашивают часто обновлено
Чего не хватает div-кнопке
Вопрос
Разработчик сделал кнопку из div. Пользователь клавиатуры не может её нажать. Чего не хватает?
<div role="button" class="btn" onclick="save()">Сохранить</div>
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: tabindex="0" и обработки Enter и Space: role не даёт поведения. ARIA меняет только то, что сообщается скринридеру.
Варианты ответа
- Только
aria-labelс текстом кнопки, остальное браузер сделает сам - Только
cursor: pointerв CSS, чтобы элемент воспринимался как кнопка tabindex="0"и обработки Enter и Space:roleне даёт поведенияправильный ответ- Ничего:
role="button"сам добавляет фокус и нажатие с клавиатуры
Разбор
ARIA меняет только то, что сообщается скринридеру. Фокусируемость даёт tabindex="0", нажатие с клавиатуры нужно обработать самому (Enter и Space). Проще заменить на <button>. aria-label даёт имя, но не поведение, cursor: pointer влияет только на курсор мыши.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.