Кросс-браузер, без Javascript, Skip Navigation Link - PullRequest
Новая
       14

Кросс-браузер, без Javascript, Skip Navigation Link

6 голосов
/ 02 февраля 2011

В недавнем поиске лучших практик для ссылок Skip Navigation это наиболее полное решение, которое я смог найти: http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria

Что мне не нравится в этом, так это то, что он требует JavaScript на Webkitбраузеры.Является ли это действительно лучшим решением, которое у нас есть для чего-то такого простого, как пропустить навигационную ссылку?

Есть какие-нибудь ссылки или примеры, которые говорят о других, "лучших" решениях?

Ответы [ 2 ]

2 голосов
/ 03 февраля 2011

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

Рассмотрим этот HTML 

<div id="skip"><a href="#content">Skip to content</a></div>

Используется с этим CSS 

#skip a {
position: absolute;
margin-left: -3000px;
width: 1;
height: 1;
overflow: hidden;
}

и 

#skip a:focus, #skip a:active {
margin-left: 0px;
width: auto;
height: auto;
}

Ссылка скрыта, пока не получит фокус.:focus обслуживает не браузеры IE, а :active обслуживает пользователей IE.Пользователь мыши никогда не увидит ссылку, так как :hover не используется.

update: 03 \ 02 \ 11 Ссылки на некоторые полезные статьи о реализации пропуска ссылок и удобстве использования

1 голос
/ 02 февраля 2011

Я склонен использовать 

#skip-to-nav, #skip-to-content
{
  position: absolute;
  right: 100%;
}

И я убедился, что ссылки # skip-to-nav и # skip-to-content находятся в элементе body.

Drupal 7 использует: 

/**
 * Hide elements visually, but keep them available for screen-readers.
 *
 * Used for information required for screen-reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user.
 * "!important" is used to prevent unintentional overrides.
 */
.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

/**
 * The .element-focusable class extends the .element-invisible class to allow
 * the element to be focusable when navigated to via the keyboard.
 */
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
  position: static !important;
  clip: auto;
}

Я протестировал обе программы для чтения с экрана, и они, похоже, отлично работают для всех, кто не видит экран.

Что касается порядка табуляции, я не беспокоюсь о том, что пользователь вкладывает вкладку в элемент, который он не видит. Я, вероятно, должен, но я считаю, что подавляющее большинство пользователей в любом случае не используют клавишу табуляции. Те, кто, как правило, лучше понимают, что происходит, так что, ИМХО, это становится спорным.

Изменить, чтобы добавить:

После некоторого обсуждения с @discojoe я решил немного подробнее рассмотреть, что использует drupal 7 для сокрытия / показа содержимого, и соответственно обновил код.

...