第十五天:定义快速键
HTML 有一个鲜为人知的功能,就是在链结及表单里还可以使用 accesskey
属性,让网页设计师定义常用链结或表单区域的快速键。在 Windows 上,你可以按下 ALT + 某个便捷键;在 Macintosh 上则是按下 Control + 某个便捷键。如果便捷键是被定义在某个链结上的话,你的浏览器就会跟着连结出去;如果是被定义在表单区域的话,你的浏览器就会把焦点一到那个区域里。 Internet Explorer 从 4.0 版开始支援便捷键, Netscape 则是从 6.0 版开始支援。比较旧的浏览器会单纯地忽略掉这个属性,所以不会造成甚么可怕的影响。
虽然那个按键对应到甚么功能并没有一个标准,但是这里还是列出了一些常用的快速键:
- 便捷键 1
- 主页面
- 便捷键 2
- 跳到主要内容(也就是导览列跳过链结)
- 便捷键 9
- 回应
谁因此获益?
- Jackie 从中获益了。因为当 JAWS 读到定义有
accesskey
的链结时,也会把这个便捷键唸出来。举例来说,<a href="index.html" accesskey="1">Home pageD</a>
这个链结会被 JAWS 读成“ link: Home page, ALT + 1 ”。所以 Jackie 可以按下 ALT+1 来把浏览器焦点移到那个链结,然后再按下 ENTER 就可以从那个链结连出去。 - Bill 从中获益了。虽然 Bill 受到中风的影响,没办法有效率地使用滑鼠,但是他还可以靠键盘导览以及快速键的帮忙来在页面中移动。便捷键可以帮他非常有效率地跳到常用的链结。 Bill 能够按下 ALT+1 ,接着 Mozilla 就会马上连到定义有
accesskey="1"
的链结去。(注:既然 Mozilla 不会把便捷键唸出来,那么 Bill 要怎么发现有这个便捷键可以用就会变成一个重要的议题了。我们将在后面讨论到这个诀窍。)
怎么做:主页链结
Movable Type: 预设的模版并没有连回主页的链结,所以你应该在站台名称的地方加上链结,并且赋予一个
accesskey
。在你的模版里搜寻<$MTBlogName$>
,然后改成这样:<a href="<$MTBlogURL$>" style="color:black; text-decoration:none" accesskey="1"><$MTBlogName$></a>
Radio: 在你的模版中搜寻
{siteName}
。这很有可能已经是某个链结了,像这样:<a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none"><%siteName%></a>
所以你祇要在这个链结里加上
accesskey
属性就行了。像这样:<a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none" accesskey="1"><%siteName%></a>
Blogger: 在你的模版里搜寻
<$BlogTitle$>
。如果这个标签已经被<a>
标签关上了的话,就在<a>
标签里加上accesskey="1"
属性,就跟前面的 Radio 一样。如果你的<$BlogTitle$>
标签还没有被<a>
标签关上的话,就用像这样的标签把它关上(别忘记要插入你自己的主页网址):<a href="http://你的/主页的/网址" style="color:black; text-decoration:none" accesskey="1"><$BlogTitle$></a>
怎么做:跳过导览链结
你是否有提供一个跳过导览列的链结呢?如果有的话,就指定 accesskey="2"
给它吧。
<a class="skiplink" href="#startcontent" accesskey="2">跳过导览列</a>
怎么做:回馈链结
你是否有提供连到回馈表单或你的电子邮件住指的链结呢?如果有的话,就指定 accesskey="9"
给它吧。
<a href="mailto:me@mydomain.com" accesskey="9">寄信给我</a>
注意: Radio 网志通常会有个连到回馈表单的链结(小信封图示),但是这个链结是由巨集所产生的,所以你没办法在上面加上 accesskey
。
请确定你在网站上的每一页都加上了 accesskey
;这表示你得修改所有相关的模版。
延伸阅读
- Jukka Korpela: Improving accessibility with
accesskey
in HTML forms and links. Explains why all my suggestedaccesskey
codes are numbers, instead of letters. - Paul Bohman: Access keys, IE6. 这是 Web Accessibility Forum Mailing List 上关于
accesskey
的部分讨论。