跨浏览器，JavaScript的少，跳过导航链接

在上跳过导航链接的最佳做法最近搜索，这是最全面的解决方案，我可以找到：http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria 跨浏览器，JavaScript的少，跳过导航链接

我不喜欢这一个是什么它需要Webkit浏览器上的JavaScript。这真的是我们看起来像跳过导航链接一样简单的最佳解决方案吗？

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

来源

2011-02-02 Bart

我倾向于使用

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

我请确保＃跳过对导航和＃跳跃到内容的链接是在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的使用隐蔽/揭示的内容，我也相应更新的代码。

来源

2011-02-02 18:41:08 zzzzBov

注意，近视键盘的用户也将使用跳过链接，而不仅仅是屏幕阅读器用户，所以最好让跳过链接可见，这至少是重点。（实际上，屏幕阅读器用户可以使用快捷键跳转到页面上的许多元素，因此通常不太可能使用跳过链接而不是使用有视觉的键盘用户） – discojoe 2011-02-02 22:47:16

在大多数情况下，跳过链接会中断网页设计的视觉流。此外，如果您的内容距离浏览器的用户需要跳过链接的页面太远，那么您做错了。 – zzzzBov 2011-02-02 22:50:38

一个好的跳过链接应该总是可见的，以提醒用户的存在。一个好的选择是使用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 链接到一些有用的文章在跳跃环节实施和可用性

来源

2011-02-02 22:44:01 discojoe

跨浏览器，JavaScript的少，跳过导航链接

回答

相关问题