十八 链接的可用性

这篇文章让你的网页链接更富有可用性。

Tabbing

那些不能使用指定装置可以通过链接"tab"，比如，链接应该有合乎逻辑的tabbing顺序。tabindex属性允许你定义这个顺序，尽管html是线性的，就算它可能是，一个合乎逻辑的tabbing顺序应该自动到达地方。

Accesskeys 访问健

Accesskey允许更易用的导航即通过指派键盘按键到链接（当用户使用"alt"或"ctrl"+Accesskeys获得链接焦点）。方便那些不能使用指定设备的用户，这种方法非常快速和易用。

没有必要为每个链接建立Accesskeys，但对主要链接使用是个很好的方法。

<a href="somepage.html" accesskey="s">Some page</a>

访问键的问题在于用户没有办法找到它们（除非看源代码），主流的屏幕阅读器会显示访问键，但这样充分利用，你可能想要使它们更直率。

你可以实施一个相同的想法关于“skip navigation”跳跃导航链接技术（看下面），或者选择一个独立页面说明你网站的可用性功能描述，包括访问键。一个流行的方法是在链接显示下划线的字母，同样的方法使用在大部分windows程序里。

可以在a list aprat了解更多

链接titles

加上title属性是个好方法，为用户增加链接的描述，改善导航。

如果链接使用javascript，同样有利于为没有javascript功能的用户解释。

<a href="#" onclick="opennastypopup()" onkeypress="opennastypopup()" 
title="Open a nasty Javascript pop-up window">Monster</a>

Popups 弹出

聊下javascript弹出，如果你坚持使用它们，或者别人建议你使用它们，你可以使用像onclick一样的onkeypress获得等多可用性。如果你的链接href属性里包含普通页面并且通过弹出功能返回false，如果用户没有javascript，将载入普通页面。例子：

<script type="text/javascript">
 function opennastypopup() {
  window.open("monster.html", "", "toolbar=no,height=100,width=200");
  return false;
 }
</script>
...
<a href="monster.html" onclick="return opennastypopup()" onkeypress="return opennastypopup()">Monster</a>

相邻链接 Adjacent Links

相邻链接应该通过多个空格分离，让屏幕阅读器更容易辨认。

可以在链接之间添加字符，比如“link | link”，或者用字符包围链接，比如“[link] [link]”。把 导航放到列表里也是一个不错的主意。这样可以通过CSS定义的你的选择显示，连方式（使用display:in-line;）

跳过链接

你应该给屏幕阅读器用户直接跳过链接到达内容的机会。这是因为如果你的导航是一致的，用户不需要通过每个页面的相同信息，特别是导航非常多。你可以通过链接跳过导航直接到达内容。

<div id="header">
 <h1>The Heading</h1>
 <a href="#content" accesskey="n">Skip navigation</a>
</div> 

<div id="navigation">
 <!--loads of navigation stuff -->
</div>

<div id="content">
 <!--lovely content -->
</div>

很明显，你不希望在浏览器里显示该链接，可以在css里定义看不到它。

这是一个css方法，对‘skipping navigation'非常有效。它包括令链接看不见的方法。

最主要的方法是使用“display;none;”，但是一些屏幕阅读器会不读取链接，有意的，"skip naigation"链接必须显示。

它还是不必要看得见，虽然没有哪个观点指出它适合用户视觉。所以替代display:none;的方法是把元素的宽高设为零（width:0;height:0;overflow:hidden;），这样屏幕阅读器用户就有同样效果。