Эта страница переведена с помощью Cloud Translation API.

Семантика и навигация по контенту

Роль семантики в навигации по страницам

Alice Boxhall

Dave Gash

Meggin Kearney

Вы узнали о возможностях, семантике и о том, как вспомогательные технологии используют дерево доступности для создания альтернативного пользовательского опыта для своих пользователей. Вы можете видеть, что написание выразительного, семантического 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 и обеспечивают более четкий и наглядный способ интуитивного выражения структуры страницы как для авторов, так и для читателей.

Роль семантики в навигации по страницам

Alice Boxhall

Dave Gash

Meggin Kearney

В этом уроке мы рассмотрим некоторые менее очевидные семантики, которые очень важны для пользователей программ чтения с экрана, особенно в отношении навигации. На простой странице с большим количеством элементов управления, но небольшим содержанием, ее легко просмотреть, чтобы найти то, что вам нужно. Но на страницах с большим количеством контента, таких как статья в Википедии или агрегатор новостей, нецелесообразно читать все сверху вниз; вам нужен способ эффективно перемещаться по контенту.

Пользователи программ чтения с экрана часто полагаются на список заголовков для поиска информации. Большинство программ чтения с экрана имеют простые способы изолировать и сканировать список заголовков страниц — важная функция, называемая ротором . Давайте посмотрим, как мы можем эффективно использовать заголовки HTML для поддержки этой функции.

Эффективное использование заголовков

В 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 .

HTML5 представил несколько новых элементов, которые помогают определить семантическую структуру страницы, включая header , footer , nav , article , section , main и aside . Эти элементы специально предоставляют структурные подсказки на странице, не прибегая к использованию каких-либо встроенных стилей (что в любом случае следует делать с помощью CSS).

Роль семантики в навигации по страницам

Alice Boxhall

Dave Gash

Meggin Kearney

В этом уроке мы рассмотрим некоторые менее очевидные семантики, которые очень важны для пользователей программ чтения с экрана, особенно в отношении навигации. На простой странице с большим количеством элементов управления, но небольшим содержанием, ее легко просмотреть, чтобы найти то, что вам нужно. Но на страницах с большим количеством контента, таких как статья в Википедии или агрегатор новостей, нецелесообразно читать все сверху вниз; вам нужен способ эффективно перемещаться по контенту.

Эффективное использование заголовков

В 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 .

HTML5 представил несколько новых элементов, которые помогают определить семантическую структуру страницы, включая header , footer , nav , article , section , main и aside . Эти элементы специально предоставляют структурные подсказки на странице, не прибегая к использованию каких-либо встроенных стилей (что в любом случае следует делать с помощью CSS).