Кнопка

Тег button из коробки умеет многое, что приходится вручную воспроизводить для самодельных кнопок. Он получает фокус с клавиатуры, срабатывает на Enter и пробел, сообщает экранным дикторам свою роль, поддерживает атрибут disabled. Поэтому стилизовать настоящую кнопку почти всегда проще, чем доучивать div вести себя как она.

Внешний вид при этом может быть любым: кнопка выглядит как иконка-крестик, как плашка с текстом или как пункт меню. Решающим остаётся смысл — элемент выполняет действие на текущей странице.

Три типа кнопки

• type="submit" — отправляет форму. Это значение по умолчанию для кнопки внутри form.
• type="button" — ничего не делает сама, действие назначается скриптом.
• type="reset" — сбрасывает поля формы к исходным значениям. Встречается редко и чаще мешает, чем помогает.

Классическая ошибка — кнопка «Показать пароль» или «+1 к количеству» внутри формы без атрибута type. Клик по ней неожиданно отправляет форму, и страница перезагружается.

Пример разметки

<button type="button"
        class="filter-toggle"
        aria-expanded="false"
        aria-controls="filters">
  Фильтры
</button>
<div id="filters" hidden>…</div>

Атрибут aria-expanded скрипт переключает при открытии панели, и программа экранного доступа сообщает, раскрыта ли она. Если на кнопке только иконка, ей нужна текстовая подпись через aria-label, иначе для незрячего человека это «кнопка без названия».

Кнопка или ссылка

Правило простое: если действие переводит на другой адрес — это ссылка a с атрибутом href, её можно открыть в новой вкладке и скопировать. Если что-то меняется здесь же — это кнопка. Ссылка с href="#" и обработчиком клика вместо кнопки ломает навигацию и сбивает с толку вспомогательные технологии.

Отдельная тема — заблокированная кнопка. Атрибут disabled убирает её из порядка фокуса, и пользователь клавиатуры может не узнать, почему отправить форму нельзя. Часто лучше оставить кнопку активной и показать понятную ошибку после нажатия.