Скрытое оглавление для программ чтения с экрана

StackOverflow https://stackoverflow.com/questions/613203

  •  03-07-2019
  •  | 
  •  

Вопрос

Я видел на нескольких сайтах, что в верхней части их страницы есть раздел навигации с внутренними ссылками на другие части страницы, чтобы пользователи с программами чтения с экрана могли быстро переходить к содержимому, меню , нижний колонтитул и т. д. Это " nav " элемент перемещается за пределы экрана с помощью CSS, поэтому обычные пользователи его не видят.

Как лучше всего это реализовать? То есть, что является наиболее доступным и наименее навязчивым для программ чтения с экрана? Вот с чем я играл: 

<div id="nav">
    <a href="#one">Jump to section one</a>
    <a href="#two">Jump to section two</a>
    <a href="#three">Jump to section three</a>
</div>

<!-- versus -->

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

Преимущество первого состоит в том, что он намного чище в своей разметке, но не совсем семантический. Кроме того, это выглядит как & Quot; Перейти к первому разделу Перейти к второму разделу Перейти к третьему разделу & Quot ;. Я знаю, что внешний вид не важен, поскольку он скрыт, но влияет ли это на то, как он читается? Есть ли между ними подходящие паузы?

Второе немного более многословно по своему синтаксису, но, надеюсь, более информативно.

Что из этого лучше, и есть ли еще лучший способ?

Это было полезно?

Решение

Вы можете загрузить плагин для Firefox под названием Fangs (в отношении реального средства чтения с экрана) Челюсти). Это будет производить текст, который челюсти будут читать. Это очень удобно. Я бы выбрал хорошую семантическую разметку только по ссылкам одна за другой. Я также скрыл бы это с чем-то вроде 

#nav {
    position: absolute;
    left: 0;
    top: -9999px

}

Использование display: none может не считываться некоторыми программами чтения с экрана.

На моих собственных сайтах я обычно делал это: 

<div id="section-nav">
    <p>Jump to</p>
    <ul>
       <li><a href="#section1">Section1</a></li>
    </ul>
</div>

Другие советы

Помните, что программы чтения с экрана обычно объявляют гиперссылки как таковые. Это означает, что ваш первый пример не будет прочитан как & Quot; Перейти к первому разделу перейти к второму разделу перейти к третьему разделу & Quot; а " Ссылка: переход к первому разделу, ссылка: переход ко второму разделу, ссылка: переход к третьему разделу " или что-то подобное.

(Лично я все же выбрал бы второй, семантический вариант, но это только мое личное предпочтение.)

Вы должны разместить ссылки в с идентификатором (или классом) #nav. Это дает возможность тем, кто использует программы чтения с экрана, понять, что содержимое представляет собой список ссылок: & Quot; Это список из трех элементов: ссылка, переход к первому разделу, переход к переходу ко второму разделу. »... Quot &;

Размещение " ul " в " div " с идентификатором " #nav " работает, но div ничего не делает, кроме переноса " ul " для идентификации. Чище просто идентифицировать & Quot; ul & Quot; и оставьте " div " из. Следующий код является лучшим (я думаю). Чисто и точно. 

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

Чтобы удалить текст со страницы с помощью css, используйте: 

ul#nav {
    position: absolute;
    left: -9999px
}

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

Лучший способ сделать то, что вы просили, - это использовать <ul> с якорями внутри них.

Однако в WebKit есть некоторые ошибки, из-за которых фокус на самом деле не смещается к целевому элементу, поэтому вам также необходимо прикрепить обработчик событий к ссылкам, чтобы сместить фокус. Это также потребует, чтобы целью был соболиный фокус (tabindex="-1" для этого будет работать).

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top