Приветствую всех на четвёртом уроке курса по тестированию доступности веб-сайтов и мобильных приложений, и сегодня мы познакомимся с семантической разметкой и навигацией.
Семантическая вёрстка — это метод создания веб-страниц с использованием HTML-тегов, которые соответствуют их семантике и логической структуре. И в отличие от традиционного подхода, где разметка определяется внешним видом страницы, семантическая вёрстка фокусируется на смысловом предназначении каждого блока и структуре страницы.
Почему семантика так важна? Семантика — это основа удобных интерфейсов, и зрячие пользователи часто легко ориентируются на сайте. Людям с ограниченными возможностями зрения приходится использовать дополнительные средства, такие как скринридеры и экранные лупы. И в этом случае семантическая HTML-разметка улучшает пользовательский опыт и не создаёт барьеров, мешающих полноценному использованию сайта.
Семантические теги уже встроены с ролями, состояниями и свойствами, которые помогают пользователям вспомогательных технологий понять, что это за элемент и как им управлять. Состояния и свойства предоставляют дополнительную информацию об элементах интерфейса. Например, скринридер сообщит о кнопке, что это кнопка, а пользователи голосового управления нажмут на неё командой «кнопка, клик». У чекбоксов есть состояния checked и unchecked, которые помогают понять, какой чекбокс выбран, а какой нет. Свойство уровня заголовка позволяет скринридерам зачитывать уровень заголовка вместе с его ролью: заголовок первого уровня или заголовок четвёртого уровня.
Другая важная часть семантики — улучшение навигации для скринридеров. Теги, такие как <header> и <footer>, являются ориентирами для пользователей. Это означает, что они могут быстро перемещаться по ним с помощью специальных горячих клавиш. Кроме того, можно открыть список со всеми ориентирами со страницы, а также с заголовками, кнопками и ссылками. Перемещение по заголовкам в мире скринридеров — это один из самых популярных методов поиска информации на странице.
Семантика имеет значение и для поисковой оптимизации сайтов (так называемые SEO). Уровень доступности сайта сам по себе является одним из факторов ранжирования в поисковых системах. Правильное использование семантических тегов делает интерфейс более доступным для пользователей и помогает обойти конкурентов в поисковой выдаче.
Семантическая вёрстка полезна и для поисковых систем. Они не могут понять текст, его контекст и важность. Семантические теги предоставляют контекст, который помогает поисковым системам понять содержимое сайта и проиндексировать его в сравнении с другими сайтами той же тематики. Использование хороших альтернативных описаний (alt) для изображений и скрытых субтитров для видео в <track> предоставляет поисковым роботам ещё больше информации, что помогает сайту попасть как в текстовый поиск, так и в поиск по изображениям.
Структура сайта и соответствующие семантические теги не влияют на позицию в выдаче, но увеличивают вероятность перехода на сайт. Заголовок второго уровня <h2> отображается под названием сайта в Google, если используется этот тег. Пользователям легче понять структуру сайта и выбрать его, особенно, если на других сайтах нет заголовков.
Навигация по сайту является важным фактором для продвижения сайта и простым способом повлиять на внутренние ссылки. Навигация <nav> со списком ссылок <a> в меню и футере помогает быстрее попасть в выдачу, чем ссылки в основной части страниц.
Заголовки <h1>-<h6> используются для определения заголовков на странице. <h1> используется для заголовка в документе, который является основным для всего документа или раздела. Остальные теги служат для подзаголовков, которые обозначают иерархию и структуру содержимого.
Тег <button> используется для кнопок, которые могут быть выбраны для отправки форм, выполнения команд или вызова функций через JavaScript.
Тег <img> используется для вставки изображений в документ.
Тег <table> используется для таблиц, которые состоят из нескольких элементов для структурирования данных: <tr> — для строк, <th> — для заголовочных ячеек и <td> — для стандартных ячеек.
Тег <ul> определяет неупорядоченный список, который обычно отображается маркерами.
Тег <a> используется для ссылок, с помощью которых пользователи переходят от одного документа к другому.
Тег <p> используется для абзаца текста. Абзацы являются основными блоками текста в HTML и используются для разделения содержимого на управляемые и логически разграниченные секции, что упрощает чтение и делает текст более понятным.
Навигация с помощью скринридера — это процесс, при котором пользователи с нарушениями зрения или без них используют специальные программы для чтения текста на экране компьютера. Скринридеры озвучивают контент на странице и позволяют перемещаться по интерфейсу при помощи клавиатуры или специальных сочетаний клавиш.
Скринридеры работают с Accessibility API, который передаёт информацию о пользовательских интерфейсах из браузеров. Таким образом, скринридеры могут взаимодействовать с различными элементами на странице, включая интерактивные кнопки и ссылки.
Навигация с помощью скринридера может осуществляться двумя способами: клавиатурным фокусом и навигацией по неинтерактивным элементам. В первом случае пользователи перемещают курсор клавиатуры по элементам интерфейса, а во втором — используют сочетания клавиш или специальные меню для быстрого доступа к нужным разделам страницы.
Для удобной работы со скринридером пользователи могут настроить специальные параметры, такие как скорость чтения и уровень громкости. Это позволяет адаптировать программу под индивидуальные потребности и предпочтения каждого пользователя.
Навигация с помощью скринридера также включает использование альтернативных текстовых описаний для изображений и видео. Это помогает программе лучше понимать содержание страниц и предоставлять пользователям более точную информацию.
Скринридеры также поддерживают функцию «горячих клавиш», позволяющую пользователям быстро переходить между разделами страниц или выполнять определённые действия. Это значительно упрощает процесс навигации и ускоряет работу с информацией.
Важно отметить, что навигация с помощью скринридера должна быть интуитивно понятной и удобной для пользователей. Разработчики должны учитывать особенности работы программ чтения с экрана и обеспечивать лёгкость использования всех функций и элементов интерфейса.
В целом навигация с помощью скринридера является важным аспектом доступности веб-ресурсов. Она позволяет людям с нарушением зрения получать доступ к информации и использовать функционал сайтов наравне с остальными пользователями.
