Ссылки против кнопок в современных веб-приложениях Одна из в | Senior Frontend - javascript, html, css
Ссылки против кнопок в современных веб-приложениях
Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками.
Кнопки
Могучая кнопка и правда крутая. Вот что она может:
1. Получать фокус с клавиатуры по умолчанию
2. Отправлять данные формы на сервер
3. Очищать форму
4. Блокироваться с помощью атрибута disabled
5. Давать подсказку скринридеру с помощью неявного атрибута role="button"
6. Показывать состояния ∶focus, ∶hover, ∶active, ∶disabled
Если добавить скрипта,кнопка идеальный элемент для:
1. Открывания модального окна
2. Вызова всплывающего меню
3. Переключения интерфейса
Ссылки
Вот несколько базовых возможностей ссылок, или якорей
1. Создавать гипертекст, сеть онлайн-ресурсов
2. Перевести пользователя на новую страницу или окно
3. Изменять URL
4. Вызвать браузерные перерисовку/перезагрузку
5. Переходить по якорям внутри страницы
6. Способны принимать фокус по умолчанию с помощью атрибута href
7. Регистрируют клик с помощью клавиши Enter
8. Не блокируются как кнопки (но их можно сделать неактивными с помощью tabindex="-1" и aria-hidden="true")
Лично для меня главное различие между ссылкой и кнопкой — то, что ссылки перемещают пользователя на новый ресурс, унося его из текущего контекста (внутренние ссылки — единственное исключение). Кнопка же переключает что-то в интерфейсе или вызывает новый контент в том же самом контексте.
