Роль семантики в навигации по страницам
Вы узнали о возможностях, семантике и о том, как вспомогательные технологии используют дерево доступности для создания альтернативного пользовательского опыта для своих пользователей. Вы можете видеть, что написание выразительного, семантического HTML дает вам большую доступность с минимальными усилиями, поскольку многие стандартные элементы имеют встроенную как семантику, так и поддерживающее поведение.
В этом уроке мы рассмотрим некоторые менее очевидные семантики, которые очень важны для пользователей программ чтения с экрана, особенно в отношении навигации. На простой странице с множеством элементов управления, но небольшим содержанием, ее легко просмотреть, чтобы найти то, что вам нужно. Но на страницах с большим количеством контента, таких как статья в Википедии или агрегатор новостей, нецелесообразно читать все сверху вниз; вам нужен способ эффективно перемещаться по контенту.
Разработчики часто ошибочно полагают, что программы чтения с экрана утомительны и медленны в использовании или что все на экране должно быть фокусируемым, чтобы программа чтения с экрана могла это найти. Часто это не так.
Пользователи программ чтения с экрана часто полагаются на список заголовков для поиска информации. Большинство программ чтения с экрана имеют простые способы выделения и сканирования списка заголовков страниц — важная функция, называемая ротором . Давайте посмотрим, как мы можем эффективно использовать заголовки HTML для поддержки этой функции.
Эффективное использование заголовков
Во-первых, давайте повторим более раннюю мысль: порядок DOM имеет значение не только для порядка фокуса, но и для порядка чтения с экрана. Поэкспериментировав с программами чтения с экрана, такими как VoiceOver, NVDA, JAWS и ChromeVox, вы обнаружите, что список заголовков соответствует порядку DOM, а не визуальному порядку.
Это справедливо для программ чтения с экрана в целом. Поскольку программы чтения с экрана взаимодействуют с деревом доступности, а дерево доступности основано на дереве DOM, порядок, который воспринимает программа чтения с экрана, напрямую зависит от порядка DOM. Это означает, что соответствующая структура заголовков важна как никогда.
На большинстве хорошо структурированных страниц уровни заголовков вложены, чтобы указать родительско-дочерние отношения между блоками контента. Контрольный список WebAIM неоднократно упоминает этот метод.
- В 1.3.1 упоминается «Семантическая разметка используется для обозначения заголовков».
- 2.4.1 упоминает структуру заголовков как метод обхода блоков контента.
- В 2.4.6 обсуждаются некоторые детали написания полезных заголовков.
- 2.4.10 гласит: «Отдельные разделы контента обозначаются заголовками, где это необходимо».
Не все заголовки должны быть видны на экране. В Википедии , например, используется метод, при котором некоторые заголовки намеренно выводятся за пределы экрана, чтобы сделать их доступными только для программ чтения с экрана и других вспомогательных технологий.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
Для сложных приложений это может быть хорошим способом размещения заголовков, когда визуальный дизайн не требует видимого заголовка или имеет место для него.
Другие варианты навигации
Хотя страницы с хорошими заголовками помогают пользователям программ чтения с экрана ориентироваться, есть и другие элементы, которые они могут использовать для перемещения по странице, включая ссылки , элементы управления формами и ориентиры .
Читатели могут использовать функцию ротора программы чтения с экрана (простой способ изолировать и сканировать список заголовков страниц), чтобы получить доступ к списку ссылок на странице. Иногда, как в вики, ссылок много, поэтому читатель может искать термин внутри ссылок. Это ограничивает количество обращений к ссылкам, которые действительно содержат этот термин, а не к каждому его появлению на странице.
Эта функция полезна только в том случае, если программа чтения с экрана может найти ссылки и текст ссылки имеет смысл. Например, вот некоторые распространенные закономерности, из-за которых ссылки трудно найти.
- Привязывайте теги без атрибутов
href. Эти цели ссылок, часто используемые в одностраничных приложениях, вызывают проблемы для программ чтения с экрана. Подробнее вы можете прочитать в этой статье об одностраничных приложениях . - Кнопки, реализованные со ссылками. В результате программа чтения с экрана интерпретирует содержимое как ссылку, и функциональность кнопок теряется. В таких случаях замените тег привязки настоящей кнопкой и соответствующим образом оформите ее.
- Изображения, используемые в качестве содержимого ссылки. Иногда необходимые связанные изображения могут оказаться непригодными для программ чтения с экрана. Чтобы гарантировать, что ссылка правильно отображается для вспомогательных технологий, убедитесь, что изображение имеет текст атрибута
alt.
Плохой текст ссылки — еще одна проблема. Кликабельный текст, такой как «узнать больше» или «нажмите здесь», не предоставляет семантической информации о том, куда ведет ссылка. Вместо этого используйте описательный текст, например «узнайте больше об адаптивном дизайне» или «посмотрите это руководство по холсту», чтобы помочь программам чтения с экрана предоставить содержательный контекст ссылок.
Ротор также может получить список управления формой . Используя этот список, читатели могут искать конкретные элементы и переходить непосредственно к ним.
Распространенной ошибкой программ чтения с экрана является произношение. Например, программа чтения с экрана может произносить «Udacity» как «oo-dacity», или читать номер телефона как большое целое число, или читать текст, написанный с заглавной буквы, как если бы это была аббревиатура. Интересно, что пользователи программ чтения с экрана уже привыкли к этой особенности и принимают ее во внимание.
Некоторые разработчики пытаются улучшить эту ситуацию, предоставляя текст, предназначенный только для чтения с экрана, который пишется фонетически. Вот простое правило фонетического правописания: не делайте этого ; это только усугубляет проблему! Если, например, пользователь использует дисплей Брайля, слово будет написано неправильно, что приведет к еще большей путанице. Программы чтения с экрана позволяют произносить слова вслух, поэтому предоставьте читателю возможность контролировать свои действия и решать, когда это необходимо.
Читатели могут использовать ротор для просмотра списка достопримечательностей . Этот список помогает читателям найти основной контент и набор навигационных ориентиров, предоставляемых элементами ориентиров HTML.
HTML5 представил несколько новых элементов, которые помогают определить семантическую структуру страницы, включая header , footer , nav , article , section , main и aside . Эти элементы специально предоставляют структурные подсказки на странице, не прибегая к использованию каких-либо встроенных стилей (что в любом случае следует делать с помощью CSS).
Семантические структурные элементы заменяют несколько повторяющихся блоков div и обеспечивают более четкий и наглядный способ интуитивного выражения структуры страницы как для авторов, так и для читателей.