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

Question

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

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

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

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

Answer 1

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

#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>

Answer 2

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

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

Answer 3

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

Помещение ul в div с идентификатором #nav является функциональным, но div не делает ничего, кроме переноса ul для идентификации. Чище просто идентифицировать "ul" и не указывать "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
}

Answer 4

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

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

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

Answer 5

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