Используя правильные семантические элементы HTML, вы сможете удовлетворить большинство или все ваши потребности в доступе с клавиатуры. Это означает меньше времени на работу с tabindex и больше довольных пользователей!
Бесплатная поддержка клавиатуры (и лучший мобильный опыт)
Имеется ряд встроенных интерактивных элементов с правильной семантикой и поддержкой клавиатуры. Большинство разработчиков используют следующие:
Кроме того, элементы с атрибутом contenteditable иногда используются для ввода текста произвольной формы.
Легко упустить из виду встроенную поддержку клавиатуры, которую предлагают эти элементы. Ниже приведены некоторые примеры элементов для изучения. Вместо использования мыши попробуйте управлять ими с помощью клавиатуры. Вы можете использовать TAB (или SHIFT + TAB ) для перемещения между элементами управления, а также использовать клавиши со стрелками и такие клавиши, как ENTER и SPACE , для управления их значениями.
Если у вас под рукой есть телефон, вы увидите, что часто эти встроенные элементы имеют уникальные взаимодействия на мобильном телефоне. Попытка воспроизвести эти мобильные взаимодействия самостоятельно — это большой труд! Это еще одна веская причина по возможности придерживаться встроенных элементов.
Используйте button вместо div
Распространенный антишаблон доступности — рассматривать неинтерактивный элемент, такой как div или span , как кнопку, добавляя к нему обработчик щелчка.
Но чтобы считаться доступной, кнопка должна:
- Будьте сосредоточены с помощью клавиатуры
- Поддержка отключена
- Поддержка клавиш
ENTERилиSPACEдля выполнения действия. - Правильно объявляться программой чтения с экрана
Кнопка div не имеет ничего из этого. Это означает, что вам нужно будет написать дополнительный код, чтобы воспроизвести то, что элемент button дает вам бесплатно!
Например, у button элементов есть изящный трюк под названием * активация синтетического щелчка *. Если вы добавите обработчик «щелчка» к button , он будет запускаться, когда пользователь нажимает ENTER или SPACE . Кнопка div не имеет этой функции, поэтому вам нужно будет написать дополнительный код для прослушивания события keydown , проверить, что код клавиши — 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 .