Question

在最近搜索Skip Navigation链接的最佳做法时，这是我能找到的最全面的解决方案：http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria

我不喜欢这个，它需要在Webkit浏览器上使用JavaScript。这真的是我们对看似简单的跳过导航链接的最佳解决方案吗？

有任何链接或样本可以谈论其他“更好”的解决方案吗？

Answer 1

一个好的跳过链接应始终可见，以提醒用户其存在。一个很好的选择是使用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。

更新：03 \ 02 \ 11 链接到一些关于跳过链接实现和可用性的有用文章

Answer 2

我倾向于使用

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

我已经使用屏幕阅读器进行了测试，对于看不到屏幕的人来说，它们似乎都能正常工作。

就Tab键顺序而言，我不担心用户标签到他们看不到的元素。我可能应该，但我发现绝大多数用户无论如何都不使用tab键。那些确实倾向于更多地了解正在发生的事情的人，所以恕我直言，它变得毫无意义。

编辑添加：

在与@discojoe讨论之后，我决定让我更接近drupal 7用于隐藏/显示内容的内容，我已相应地更新了代码。

跨浏览器，无Javascript，Skip Navigation Link

2 个答案: