c

第十五天:定义快速键

Defining keyboard Shortcuts 第十五天:定义快速键

HTML 有一个鲜为人知的功能,就是在链结及表单里还可以使用 accesskey 属性,让网页设计师定义常用链结或表单区域的快速键。在 Windows 上,你可以按下 ALT + 某个快捷键;在 Macintosh 上则是按下 Control + 某个快捷键。如果快捷键是被定义在某个链结上的话,你的浏览器就会跟着连结出去;如果是被定义在表单区域的话,你的浏览器就会把焦点一到那个区域里。 Internet Explorer 从 4.0 版开始支援快捷键, Netscape 则是从 6.0 版开始支援。比较旧的浏览器会单纯地忽略掉这个属性,所以不会造成甚么可怕的影响。

虽然那个按键对应到甚么功能并没有一个标准,但是这里还是列出了一些常用的快速键:

快捷键 1
主页面
快捷键 2
跳到主要内容(也就是导航列跳过链结
快捷键 9
回应

谁因此获益?

  1. 小莉 从中获益了。因为当 JAWS 读到定义有 accesskey 的链结时,也会把这个快捷键念出来。举例来说, <a href="index.html" accesskey="1">Home pageD</a> 这个链结会被 JAWS 读成“ link: Home page, ALT + 1 ”。所以 小莉 可以按下 ALT+1 来把浏览器焦点移到那个链结,然后再按下 ENTER 就可以从那个链结连出去。
  2. 老路 从中获益了。虽然 老路 受到中风的影响,没办法有效率地使用滑鼠,但是他还可以靠键盘导航以及快速键的帮忙来在页面中移动。快捷键可以帮他非常有效率地跳到常用的链结。 老路 能够按下 ALT+1 ,接着 Mozilla 就会马上连到定义有 accesskey="1" 的链结去。(注:既然 Mozilla 不会把快捷键念出来,那么 老路 要怎么发现有这个快捷键可以用就会变成一个重要的议题了。我们将在后面讨论到这个技巧。)

怎么做:主页链结

  • 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 博客(blog)通常会有个连到回馈表单的链结(小信封图示),但是这个链结是由巨集所产生的,所以你没办法在上面加上 accesskey

请确定你在网站上的每一页都加上了 accesskey ;这表示你得修改所有相关的模版。

延伸阅读

<< 第十四天:在链结上加入标题 | 目录 | 第十六天:不要开出新视窗 >>

End Channel Nav
>可访问性指南

Divo in Accessibility

CSS2.0 中文手册

HTML 标准指南