标记语言——短语元素(4)
<abbr>和<acronym>
我还想提出两个短语元素,就是<abbr>(缩写名词)和<acronym>(略称).使用这些标签能够为缩写名词提供定义,让所有使用者看懂内容,提升网页的易用性.
让我们从新看看W3C在HTML4.01规范内定义的<abbr>和<acronym>用途:
- <abbr> 代表缩写名词(像WWW,HTTP,URL,Mass.等)
- <acronym> 代表略称(像WAC,radar等)
配合适当的title属性是这些元素能帮助不了解特定名词的使用者,举例来说,在标识"XHTML"缩写的时候,我们能这样使用<abbr>标签:
<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
在这里使用<abbr>会使屏幕阅读器拼出缩写内容(X-H-T-M-L),而不是念出完整内容,相对的,使用<acronym>的话则会让他念出完整内容,而不是缩写.
使用<acronym>标签的示例如下:
<acronym title="North Atlantic Treaty Organization">NATO</acronym>
我们也能使用两条听觉CSS规则,再次强调这些差异:
abbr {
speak:spell-out;
}
acronym {
speak:normal;
}
听觉样式让作者能特别为屏幕阅读器指定朗读方式,这能修改页面的听觉表达方式,引导标记结构,改变音调,音色等,让页面朗读的效果与视觉效果更一致.
定义一次
许多人都建议只定义一次在页面内反复出现的缩写,略称,他们认为每次名词出现时重复定义太浪费空间了,而最好只在首次出现的时候加上title属性,我认为这么做有些道理,虽然当使用者被导引到页面特定段落时,可能因为看不到页首展开缩写,略称,从而无法从定义中获利.
利用你的判断力,决定何时(以及要多频繁)定义放在<abbr>和<acronym>内的名词吧.
显示效果
要在视觉上吸引读者,有些浏览器预设会在<abbr>和<acronym>下面加上1像素的点状底部边线,引诱使用者将鼠标移到缩写名词,略称上面,当鼠标移到上面后,浏览器就会以"工具提示"的方式显示title属性提供的定义内容.
对那些不预设显示点状底部边线的浏览器来说,可以通过定义CSS达到同样的效果.
abbr, acronym {
border-bottom: 1px dotted;
cursor: help;
}
我们也加上额外的规则,把光标转成"求助"(大多数浏览器都会支持),帮助使用者看出这不是可以点选的链接,而是以"工具提示"显示的定义内容(Mark Newhouse,"Real World Style:CSS Help",http://realworldstyle.com/css_help.html).
图6-4就是浏览器的显示效果,将"XHTML"扩展成定义文字,以及点状底部边线,求助光标:
图6-4.一般浏览器显示<abbr>的示例
兼容性问题
值得一提的是,在本书撰写的时候,windows版的Internet Explorer还不支持为<abbr>标签指定样式,显示工具提示. IE/Win支持<acronym>标签,这是为了鼓励某些设计者只使用<acronym>处理缩写名词与略称.
这么做或许很有吸引力,但是为了解决现实问题而使用错误的元素并不是件好事,对这个特定问题来说,我偏好根据规范表示名词,让正确支持的浏览器处理<abbr>标签的样式.让我们很快地看看几个还没提到的短语元素.