十八 链接的可用性

80酷酷网    80kuku.com

  链接

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

Tabbing

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

keys 访问健

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

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

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

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

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

可以在a list aprat了解更多

链接titles

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

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

<a href="#"  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"  onkeypress="return opennastypopup()">Monster</a>

相邻链接 Adjacent Links

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

可以在链接之间添加字符,比如“link | link”,或者用字符包围链接,比如“[link] [link]”。把 导航放到列表里也是一个不错的主意。这样可以通过定义的你的选择显示,连方式(使用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;),这样屏幕阅读器用户就有同样效果。



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: