Как установить приоритет для программ чтения с экрана некоторых частей HTML-страницы?

Я хочу сделать свою HTML-страницу подходящей для программ чтения с экрана.

В настоящее время страница состоит из 3 основных частей: заголовка, боковой панели и содержимого:

введите описание изображения здесь

Программы чтения с экрана сначала читают заголовок, затем боковую панель и, наконец, результаты поиска.

К сожалению, пользователи, у которых есть проблемы со зрением, долго ждут, пока программа прочитает все содержимое боковой панели (потому что на боковой панели много фильтров). Как я могу установить больший приоритет для результатов поиска? Причина, по которой результаты поиска должны читаться до содержимого боковой панели.

И будет здорово, если кто-нибудь предоставит мне учебник по HTML о том, что я могу сделать, чтобы повысить уровень доступности HTML-страниц:

  • Как я могу изменить некоторые элементы DIV, чтобы программа чтения с экрана пропускала их?
  • Как изменить последовательность чтения содержимого страницы?
  • Как сделать доступными только форму поиска и результаты поиска (и несколько ссылок)?

html accessibility wai-aria wcag2.0 screen-readers
person bmalets    schedule 10.06.2015    source источник
comment
Это только частичный ответ, но использование элементов HTML5, таких как верхний колонтитул, нижний колонтитул, навигация, в сторону, статья и раздел, поможет вам. Кроме того, обязательно используйте роли ориентира aria (role = search, role = navigation, role = main и т. Д.) В соответствующих элементах div.   -  person cfnerd    schedule 10.06.2015
comment
Могу я спросить, почему вы пытаетесь это делать?   -  person unobf    schedule 10.06.2015
comment
@unobf, потому что у меня большой список поисковых фильтров, и пользователи хотят сначала услышать результаты поиска   -  person bmalets    schedule 10.06.2015
comment
@unobf, поэтому я хочу пропустить заголовок и боковую панель при создании результатов поиска   -  person bmalets    schedule 10.06.2015

Ответы (3)


arrow_upward
4
arrow_downward

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

Если вы можете использовать HTML5, используйте элементы <header>, <aside> или <nav>, а затем элементы <main> для заголовка, фильтров, боковой навигации и результатов поиска соответственно.

Если вы не можете использовать HTML5, добавьте role = "banner", role = "complementary", role = "navigation" и role = "main" в элементы оболочки этих регионов.

Рекомендуется также добавить в документ структуру заголовков (программы чтения с экрана также могут перемещаться по ним) и ссылку для пропуска (для зрячих пользователей, использующих только клавиатуру).

person unobf    schedule 10.06.2015

arrow_upward
0
arrow_downward

Обычно нужно иметь ссылку «пропустить навигацию», которая является привязкой к тому месту, где начинается ваш реальный контент. Это позволяет программам чтения с экрана переходить вперед.

<a href="#main" class="skip-navigation">Skip Navigation</a>

...

<h1 id="main">Search Results</h1>

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

.skip-navigation {
  position: absolute;
  left: -5000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
person Brad    schedule 10.06.2015
comment
спасибо @Brad, а как насчет тегов div? будет ли он пропущен как ссылка, если он содержит skip-navigation класс? - person bmalets; 10.06.2015
comment
HTML5 предоставляет такие теги, как header, aside и article, которые добавляют семантическое значение веб-странице. Наряду с ссылками для пропуска их также можно использовать для улучшения доступа к странице. - person Pratap; 10.06.2015
comment
@bmalets Класс skip-navigation предназначен только для стилизации. Вам не нужно его использовать. Все дело здесь в том, что у вас есть ссылка на ссылку на странице. - person Brad; 10.06.2015

arrow_upward
0
arrow_downward

Проблема была исправлена ​​со свойством "aria-live"

Программа чтения с экрана считывает тег «aria-live» после каждого изменения содержимого. Итак, если пользователь изменит текст в форме поиска, программа чтения с экрана прочитает содержимое тега «aria-live» с результатами поиска, загруженными с помощью ajax.

Протестировано с помощью ChromeVox

person bmalets    schedule 25.06.2015