Кнопка

Элемент управления для выполнения JavaScript или отправки / сброса значений формы.

Основные данные

Оригинал статьи.

Шаблон кнопки позволяет пользователю вводить команду с одним из следующих возможных типов действий:

1. Форма отправки (type = "submit")

2. Форма сброса (type = "reset")

3. Запустить JavaScript (type = "button")

Первые два типа кнопок предназначены для использования только внутри формы из-за их специфического поведения.

Третий тип - это кнопка общего назначения, используемая для запуска клиентского скрипта.

Если у кнопки, которая находится в Форме атрибут type не указан, то он имеет значение по умолчанию «submit».

Лучшая практика

Надпись на кнопке должна четко указывать назначение кнопки (т.е. не «щелкните здесь» или «щелкните меня») если эта кнопка не общего назначения (например "Добавить в корзину", "Редактировать" и тд).

Кнопка не должна открывать новую страницу. Вместо этого используйте ссылку.

Кнопка может обновить хеш-фрагмент URL-адреса. Например, при создании одностраничного приложения и явном управлении History API.

Кнопка может открывать любое всплывающее окно, диалоговое окно или наложение меню.

Помните, что кнопки вне форм ничего не делают при нажатии, пока не станет доступен JavaScript. Либо отобразите кнопку на клиенте, либо отключите ее изначально на сервере.

Интерактивный дизайн

Управление клавиатурой

Если кнопка имеет фокус, клавиши ПРОБЕЛ и ВВОД должны активировать кнопку.

Если кнопка имеет фокус, клавиши TABи SHIFT-TAB должны перемещаться к следующему или предыдущему элементу страницы с фокусом соответственно.

Screenreader

Если виртуальный курсор находится на кнопке, он должен вызываться виртуальным курсором (например, VO + SPACE в VoiceOver).

Должна быть объявлена ​​роль «кнопки».

Этикетка(название) должна быть объявлена. Любое состояние должно быть объявлено (например: haspopup).

Любое описание должно быть объявлено (например через aria-describedby).

ARIA

В этом разделе перечислены все соответствующие роли, состояния и свойства ARIA для кнопки.

aria-haspopup Сообщает AT, что при нажатии на кнопку открывается меню или диалоговое окно и т. Д.

aria-controls Сообщает AT, что данная кнопка управляет другим элементом.

aria-expended Информирует AT о расширенном состоянии любого связанного элемента или содержимого

aria-label Создает метку для кнопки. Предупреждение! Эта метка переопределит любой внутренний текст, который может присутствовать. Это свойство чаще всего используется для кнопок со значками.

aria-describedby Информирует AT о любом расширенном описании или контексте, относящемся к кнопке. Обратите внимание, что это свойство не влияет на доступную метку кнопки.

Пример стилей