Используйте семантический HTML для легкой победы с помощью клавиатуры

Используя правильные семантические элементы 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 .