Доступность в HTML

Доступность в HTML

В продолжение двух последних моих сообщений я хочу сказать еще несколько слов о том, как мы можем написать нашу разметку, чтобы она была действительно удобной и полезной для посетителей и роботов, без ущерба для старых браузеров (хотя я «ЗА» например, прекращение поддержки IE7 / 8). В этом уроке мы поговорим о преимуществах, которые предлагает нам ARIA.

Сначала давайте проясним, что такое ARIA. Это сокращение от «Доступные полнофункциональные интернет-приложения» или на болгарском языке — «Доступные полнофункциональные интернет-приложения». Даже на родном языке это может показаться немного запутанным для некоторых посетителей (лично я нахожу это еще более запутанным на болгарском языке, чем на английском), поэтому вот несколько слов, чтобы подробно прояснить, что это должно быть.

Начнем с «доступного». Доступность — один из факторов, которому в последние 2-3 года уделялось больше внимания, и на который все еще очень мало влияет. Идея состоит в том, что в мире есть люди с ограниченными возможностями, которые заслуживают средств, дающих им равные возможности для достижения своих целей, включая осведомленность об Интернете, поскольку Интернет становится все большей частью нашей повседневной жизни..

Читать также:  Запросы AJAX

«Богатые Интернет-приложения» — это целостный термин, который, если я правильно помню, был введен компанией Adobe около 4–5 лет назад, с помощью которой они назвали популярные в то время сайты на основе Flash, которые предлагали функции, которых у браузеров еще не было, либо они были нестандартизированы и требовали во много раз больше времени для запуска «приложения» всех браузеров, либо просто приходилось использовать методологии, которые, хотя и позволяли достичь цели, имели другую цель и поэтому считались неуместными. Однако с тех пор HTML, JS и CSS значительно изменились, и Apple сыграла важную роль в ограничении Flash Player и нацеливании на пользователей..

В предыдущих статьях мы говорили о том, что новые теги в HTML не имеют полной встроенной поддержки старых браузеров. Это правда, что для того, чтобы заголовок> контейнер выглядел правильно в IE7 / 8, нам не нужно много работать, но зачем это делать, если мы все равно можем это сделать? Единственное, что мы достигаем с помощью этого, — это некоторая псевдосемантика, которую, однако, мы можем получить другим способом, а именно с помощью ARIA..

Читать также:  Файлы

Примечание. ARIA рекомендуется использовать с тегами HTML5, но это не значит, что он не будет работать так же с тегами HTML4 (по крайней мере, на данный момент)..

Что на самом деле предлагает нам ARIA?

ARIA — это стандарт дополнительных атрибутов, которые назначаются тегам в нашей разметке, с помощью которых мы можем добавить дополнительную информацию о назначении раздела нашего сайта. Так что заголовок> мы можем просто заменить на div role = "banner">. Атрибут роли будет проигнорирован браузерами, которые его не понимают, а современные трактуют его правильно. Разница в том, что старые браузеры правильно представляют тег div>, для которого установлен этот атрибут..

Помимо баннера, есть и другие роли, которые можно использовать для одностраничных элементов. Некоторые из них:

  • дополнительный — подходит для элементов aside>
  • contentinfo — общая информация — относится к нижнему колонтитулу> и информация о зарезервированных правах
  • form — для форм на странице
  • main — описывает раздел страницы, где сосредоточена основная информация
  • навигация — подходит для nav>
  • search — должен применяться к контейнеру, содержащему поисковую систему на странице
Читать также:  Активное состояние меню блога при чтении сообщения блога

Есть и другие роли, которые вы можете увидеть в статье на английском языке, название которой переводится как «Как сделать семантические элементы HTML5 более доступными»..

Помимо атрибута role, спецификация ARIA включает другие атрибуты, начинающиеся с префикса «aria-», которые в основном используются для предоставления информации о статусе элемента. Обязательные поля онлайн-формы, например, могут быть помечены как "обязательные для арии". С другой стороны, навигация по выпадающему меню может содержать атрибут «aria-has-popup». При загрузке динамического содержимого с помощью JavaScript мы можем добавить атрибут «aria-busy», который указывает, что элемент вскоре (после того, как запрос вернет результат) изменит свое содержимое..

Я знаю, что сухие спецификации не всегда являются наиболее востребованным источником информации, но наиболее точные и правильные объяснения по этому поводу можно найти на http://www.w3.org/TR/wai-aria/.

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?