链接
这篇文章让你的网页链接更富有可用性。
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;),这样屏幕阅读器用户就有同样效果。