Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)归海一刀published in(发表于) 2014/3/30 5:21:13 十八 链接的可用性_[Html教程]
这篇文章让你的网页链接更富有可用性。
那些不能使用指定装置可以通过链接"tab",比如,链接应该有合乎逻辑的tabbing顺序。tabindex属性允许你定义这个顺序,尽管html是线性的,就算它可能是,一个合乎逻辑的tabbing顺序应该自动到达地方。
tabindex
Accesskey允许更易用的导航即通过指派键盘按键到链接(当用户使用"alt"或"ctrl"+Accesskeys获得链接焦点)。方便那些不能使用指定设备的用户,这种方法非常快速和易用。
没有必要为每个链接建立Accesskeys,但对主要链接使用是个很好的方法。
accesskey="s">Some page
访问键的问题在于用户没有办法找到它们(除非看源代码),主流的屏幕阅读器会显示访问键,但这样充分利用,你可能想要使它们更直率。
你可以实施一个相同的想法关于“skip navigation”跳跃导航链接技术(看下面),或者选择一个独立页面说明你网站的可用性功能描述,包括访问键。一个流行的方法是在链接显示下划线的字母,同样的方法使用在大部分windows程序里。
可以在a list aprat了解更多
加上title属性是个好方法,为用户增加链接的描述,改善导航。
title
如果链接使用javascript,同样有利于为没有javascript功能的用户解释。
title="Open a nasty Javascript pop-up window">Monster
聊下javascript弹出,如果你坚持使用它们,或者别人建议你使用它们,你可以使用像onclick一样的onkeypress获得等多可用性。如果你的链接href属性里包含普通页面并且通过弹出功能返回false,如果用户没有javascript,将载入普通页面。例子:
onclick
onkeypress
href
false
...href="monster.html" onclick="return opennastypopup()" onkeypress="return opennastypopup()">Monster
相邻链接应该通过多个空格分离,让屏幕阅读器更容易辨认。
可以在链接之间添加字符,比如“link | link”,或者用字符包围链接,比如“[link] [link]”。把 导航放到列表里也是一个不错的主意。这样可以通过CSS定义的你的选择显示,连方式(使用display:in-line;)
display:in-line;
你应该给屏幕阅读器用户直接跳过链接到达内容的机会。这是因为如果你的导航是一致的,用户不需要通过每个页面的相同信息,特别是导航非常多。你可以通过链接跳过导航直接到达内容。
The HeadingSkip navigation id="content">
很明显,你不希望在浏览器里显示该链接,可以在css里定义看不到它。
这是一个css方法,对‘skipping navigation'非常有效。它包括令链接看不见的方法。
最主要的方法是使用“display;none;”,但是一些屏幕阅读器会不读取链接,有意的,"skip naigation"链接必须显示。
display;none;
它还是不必要看得见,虽然没有哪个观点指出它适合用户视觉。所以替代display:none;的方法是把元素的宽高设为零(width:0;height:0;overflow:hidden;),这样屏幕阅读器用户就有同样效果。
display:none;
width:0;height:0;overflow:hidden;),这样屏幕阅读器用户就有同样效果。
赞