Используя правильные семантические элементы HTML, вы можете удовлетворить большинство или все ваши потребности в доступе с клавиатуры. Это означает меньше времени на возню с tabindex
и больше довольных пользователей!
Бесплатная поддержка клавиатуры (и улучшенные возможности мобильных устройств)
Существует ряд встроенных интерактивных элементов с правильной семантикой и поддержкой клавиатуры. Большинство разработчиков используют:
Кроме того, элементы с атрибутом contenteditable
иногда используются для ввода текста в свободной форме.
Легко упустить из виду встроенную поддержку клавиатуры, которую предлагают эти элементы. Ниже приведены некоторые примеры элементов для изучения. Вместо использования мыши попробуйте использовать клавиатуру для управления ими. Вы можете использовать TAB
(или SHIFT + TAB
) для перемещения между элементами управления, а также вы можете использовать клавиши со стрелками и клавиши, такие как ENTER
и SPACE
для управления их значениями.
Если у вас есть телефон под рукой, вы можете увидеть, что часто эти встроенные элементы имеют уникальные взаимодействия на мобильном устройстве. Попытка воспроизвести эти мобильные взаимодействия самостоятельно — это большая работа! Это еще одна веская причина придерживаться встроенных элементов, когда это возможно.
Используйте button
вместо div
Распространенным антишаблоном доступности является обработка неинтерактивного элемента, например div
или span
, как кнопки путем добавления к нему обработчика щелчка.
Но чтобы считаться доступной, кнопка должна:
- Возможность фокусировки с помощью клавиатуры
- Поддержка отключена
- Поддерживайте клавиши
ENTER
илиSPACE
для выполнения действия - Правильно озвучиваться программой чтения с экрана
У кнопки div
нет ничего из этого. Это значит, что вам нужно будет написать дополнительный код, чтобы повторить то, что элемент button
дает вам бесплатно!
Например, элементы button
имеют изящный трюк, называемый * синтетической активацией щелчка *. Если вы добавите обработчик "щелчка" к button
, он будет запущен, когда пользователь нажмет ENTER
или SPACE
. Кнопка div
не имеет этой функции, поэтому вам нужно будет написать дополнительный код для прослушивания события keydown
, проверить, что keycode - ENTER
или SPACE
, а затем запустить обработчик щелчка. Ой! Это много дополнительной работы!
Сравните разницу в этом примере. Нажмите клавишу TAB
для любого из элементов управления и используйте ENTER
и SPACE
, чтобы попытаться щелкнуть по ним.
Если на вашем сайте или в приложении есть кнопки div
, рассмотрите возможность замены их на элементы button
. button
легко стилизовать, и она полна преимуществ для доступности!
Ссылки против кнопок
Еще один распространенный антишаблон — рассматривать ссылки как кнопки, прикрепляя к ним поведение JavaScript.
<a href="#" onclick="// perform some action">
И кнопки, и ссылки поддерживают некоторую форму синтетической активации щелчком. Так что же выбрать?
- Если нажатие на элемент приведет к выполнению действия на странице, используйте
<button>
. - Если нажатие на элемент перенаправит пользователя на новую страницу, используйте
<a>
. Сюда входят одностраничные веб-приложения, которые загружают новый контент и обновляют URL с помощью History API .
Причина этого в том, что кнопки и ссылки по-разному объявляются программами чтения с экрана. Использование правильного элемента помогает пользователям программ чтения с экрана знать, какой результат ожидать.
TODO: DevSite - оценка «Подумай и проверь»
Стайлинг
Некоторые встроенные элементы, в частности <input>
, могут быть сложными для стилизации. С помощью небольшого количества умного CSS вы можете обойти некоторые из этих ограничений. Проект WTFForms (с забавным названием) содержит пример таблицы стилей , демонстрирующий ряд приемов стилизации некоторых сложных встроенных элементов.
Следующие шаги
Использование встроенных элементов HTML может значительно улучшить доступность вашего сайта и значительно сократить вашу рабочую нагрузку. Попробуйте перемещаться по сайту с помощью табуляции и найдите элементы управления, которые не поддерживают клавиатуру. Если возможно, замените их на стандартизированные альтернативы HTML.
Иногда вы можете найти элемент, у которого нет аналога в HTML. Это нормально! Читайте дальше, чтобы узнать, как добавить поддержку клавиатуры к пользовательским интерактивным элементам управления с помощью tabindex
.