Создание доступных кнопок

В React принято создавать кнопку, добавляя событие onClick к элементу, который не является <button>.

Срезание углов при создании кнопки вредит пользовательскому опыту, особенно в отношении доступности. Кто-то, использующий сайт со своей клавиатурой, программой чтения с экрана или другими вспомогательными технологиями, может не иметь возможности взаимодействовать с кнопкой.

В этой статье мы разберем проблемы, которые создают несемантические кнопки, и шаг за шагом объясним, как создать функциональную и доступную кнопку.

Что делает кнопку доступной?

Доступная кнопка имеет фокус и может быть активирована клавишами пробела и ввода. Кроме того, у кнопки есть роль 'button' и доступное имя.

Кнопка в примере может выглядеть как кнопка, но она недоступна. Этот элемент не распознается программами чтения с экрана как кнопка, поэтому программы чтения с экрана не представляют этот элемент пользователям как кнопку. Кто-то, кто перемещается по веб-странице с помощью клавиатуры, не сможет взаимодействовать с элементом. Только люди, перемещающиеся по веб-странице с помощью мыши, смогут активировать кнопку.

Лучший способ превратить div в кнопку

В идеале вы можете сделать кнопку доступной, заменив <div> на <button>.

По умолчанию обновленная кнопка доступна с клавиатуры, имеет видимое состояние фокуса и может быть объявлена ​​программами чтения с экрана.

Как удалить стиль кнопки по умолчанию

Элемент <button> включает стиль по умолчанию, поэтому эта кнопка выглядит немного иначе, чем кнопка в первом примере. Мы можем удалить некоторые стили по умолчанию с кнопки.

Я не рекомендую удалять свойство outline из стиля кнопки.

Свойство придает кнопке видимое состояние фокуса. Критерий успеха WCAG 2.4.7 указывает, что интерактивные элементы должны иметь видимый индикатор фокуса. Состояние фокуса выделяет интерактивные элементы. Это помогает кому-то, кто перемещается по странице с помощью клавиатуры, найти свое местоположение на странице.

Вы можете положиться на браузер для схемы фокуса по умолчанию или создать свою собственную. Если вы создаете свой собственный дизайн, чтобы стиль соответствовал Критерию успеха WCAG 1.4.11, убедитесь, что контур фокуса элемента имеет коэффициент контрастности не менее 3: 1 по отношению к фоновому цвету.

Зачем использовать div вместо кнопки?

Опять же, я рекомендую по возможности использовать HTML-элемент <button> и не создавать собственную кнопку. Однако иногда из-за ограничений вам приходится обходиться <div> или другим элементом, не являющимся кнопкой. Например, если вы работаете с приложением, использующим библиотеку пользовательского интерфейса, которая не использует элемент семантической кнопки в качестве кнопки, вам может потребоваться добавить свойства к элементу, чтобы он был доступен.

Как преобразовать div в доступную кнопку?

1. Добавьте роль='кнопка'

Необходимо добавить role='button', чтобы вспомогательные технологии могли представить элемент как кнопку для пользователей.

Хотя роль кнопки позволяет программам чтения с экрана идентифицировать элемент как кнопку, эта роль не дает функциональности кнопки элемента.

Кнопка — это интерактивный HTML-элемент, который пользователь может вызывать с помощью мыши, пальца, клавиатуры, голосовой команды или других вспомогательных технологий. Благодаря роли кнопки элемент теперь распознается программами чтения с экрана как кнопка; однако он недоступен с клавиатуры.

2. Добавьте tabIndex='0'

Tabindex делает элемент фокусируемым с помощью клавиатуры. При добавлении tabIndex='0' кнопка становится доступной с клавиатуры.

Теперь кнопка находится в состоянии фокуса, но клавиатура не может активировать кнопку. Обработчики событий клавиатуры должны быть добавлены к элементу.

3. Добавьте обработчики событий клавиатуры

Поскольку ожидается, что клавиши Enter и Space вызовут событие onClick для доступной кнопки, нам нужно добавить функциональность, при которой нажатие любой клавиши вызывает срабатывание кнопки. Мы можем сделать это, добавив событие onKeyDown к кнопке. Событие onKeyDown запускается при нажатии любой клавиши, но до того, как браузер обработает клавишу. Поскольку клавиша пробела по умолчанию запускает прокрутку страницы, нам нужно использовать метод preventDefault в функции onKeyDown. Метод preventDefault отменяет сработавший ключ, что возможно, потому что событие onKeyDown запускается до того, как браузер обработает сработавший ключ.

4. Отключенное состояние

Когда действие кнопки недоступно, вы можете отключить его, чтобы пользователи не могли с ним взаимодействовать. Когда элемент <button> имеет свойство disabled=true, <button> не фокусируется с клавиатуры и накладывается с непрозрачностью.

Важно отметить, что отключенные кнопки имеют недостатки, такие как отсутствие информирования пользователя о том, почему кнопка отключена, и отсутствие фокуса с клавиатуры. Тем не менее, есть случаи использования, когда включение отключенной кнопки работает нормально, например, предотвращает случайную отправку пользователем формы дважды.

Для <div>, которую мы превратили в доступную кнопку, визуально ей можно придать отключенное состояние с помощью стилей.

Добавление pointer-events: none; делает кнопку неактивной. Однако кнопка по-прежнему находится в состоянии фокуса. Чтобы сделать его недоступным для фокусировки с клавиатуры, tabIndex необходимо изменить с 0 на -1. Наконец, нам нужно добавить атрибут aria-disabled='true', чтобы программы чтения с экрана отображали кнопку как отключенную для пользователей.

Эти шаги делают отключенное состояние элемента похожим на состояние disabled элемента <button>. Однако есть способы, которыми отключенные кнопки могут быть более инклюзивными, например, сделать кнопку доступной для фокуса и показать вспомогательный текст, объясняющий, почему кнопка отключена.

Заключение

Создание кнопок со специальными возможностями гарантирует, что все пользователи могут взаимодействовать с кнопками независимо от их способностей. Важно, чтобы кнопку можно было активировать с помощью клавиатуры и чтобы вспомогательные технологии распознавали элемент как кнопку.

Надеюсь, прочитав эту статью, вы убедитесь, что кнопки на вашем сайте доступны. Если у них отсутствуют свойства, например, они не распознаются программами чтения с экрана или требуют видимого состояния фокуса, обязательно внесите соответствующие изменения, чтобы они были доступны. Когда вы делаете свой веб-сайт доступным, это улучшает взаимодействие с пользователем для всех.

Ресурсы