Выбор ответа Junior Семантика спрашивают часто обновлено
Ссылка или кнопка для действия
Вопрос
Элемент открывает модальное окно и никуда не ведёт. Как его правильно сверстать?
<a href="#" onclick="openModal()">Подробнее о доставке</a>
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Заменить на <button type="button": это действие, а не переход. Ссылка ведёт на адрес, кнопка выполняет действие. <a href="" для действия меняет адрес, прокручивает к началу, предлагает «открыть в новой вкладке» и сообщает скринридеру неверную роль. <div onclick теряет фокус и клавиатуру. role="link" у…
Варианты ответа
- Так и оставить: ссылка тоже кликабельная и фокусируется
- Заменить на
<div onclick>со стилями кнопки из дизайн-системы - Заменить на
<button type="button">: это действие, а не переходправильный ответ - Оставить ссылку, но добавить ей
role="link"иaria-haspopup
Разбор
Ссылка ведёт на адрес, кнопка выполняет действие. <a href="#"> для действия меняет адрес, прокручивает к началу, предлагает «открыть в новой вкладке» и сообщает скринридеру неверную роль. <div onclick> теряет фокус и клавиатуру. role="link" у ссылки и так есть, смысл это не исправит.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.