使用Title提升可访问性

星期四 04.02.2009 - Posted in 工作分享, - 5,213 views

最早大家都没有给链接加title的习惯,后来因为w3c标准普及,又集体加上了title。从一个极端走到另个极端,于是出现很多怪异现象。两方面,第一a标签内title不是必须使用,第二title可以用在除了base, basefont, head, html, meta, param, script和title之外的所有标签。

抛开标签语义、搜索引擎友好等因素,在纯用户角度找几个场景来分析。

列表内容被截断后通过title显示完整,此时如果没有被截的链接,也会被再显示出来。试想本来已经看清楚的信息,触发又提示一遍,传达是不是感觉很婆妈。如果没有截的链接控制不输出title,效果或许合理很多。或者title在此时根本就不应该?印象中英文好站似乎很少做列表截取。

BXNA蓝色经典title图示

最典型类似对icon图示的辅助说明,可以最大化平衡界面复杂度与可操作性。并且针对某些群众认知度比较高的操作,如果图形传达到位,完全可以使用icon代替,更多交互场景请参考臭鱼在06年完成文字还是图标的总结。

Yahoo首页选项色块title图示
Delicious条目选项title图示

在导航系统的各条目中,title主要作用是做补充说明。同时也对应可访问性原则中,要求导航传达清晰简洁的建议。用户感兴趣后操作触发,再title提示更多详细,强调信息引导而不是推送。

CNN导航title图示
YUI导航title图示

还有种做目地指引之用的案例,明确告知用户这个链接做什么?到哪里?在某些容易引起误会,或者不是很清晰的地方效果比较好。另外title不在a标签内也有广泛应用,典型如表单。可以为用户提供更精准、得体的操作指引,并且我想一定程度上可以代替明文提示。

wordpress标题、分类title图示
Google Reader搜索title图示
Ticker雅虎title图示

学以致用,顺手给评论模板加了条语句。上次改的时候本想写出来,又感觉多余,现在好多了。准备动手评论的用户,自然会看到,并且这么土的语句也没有兼容性问题。

WP评论title图示

相应的不良应用不再图示举例,互联网上不胜枚举,深入分析语义和用法不仅能纠正错误、开拓思路,而且能贯通很多理论上的困惑。总结起来,title并不像seo从业者鼓吹的那么简单,在用户角度除避免与文字、图形重复传达,主要有三类用途:

  1. 描述非文本内容
  2. 补充说明文本内容
  3. 操作指引

© 一叶千鸟(转载请留原文链接,更新于2009年04月08日18点)

9条评论 发表»

voidman says:

受教。

ds says:

好文,转到Iconfans了,嘻嘻。。

1.Title里的视觉提示该不该在Web页添加?当然需要,尤其是非文本未能成功加载和显示时。

2.文本和非文本内容的描述和说明,对访客进一步的操作指引,这些都需要。但一定要是必要的时候才添加Title,过多的Title提示和“跟标题信息重复”的视觉提示,都会在有形和无形中给访客增加信息量。

3.要是在Title里的文本也可以添加修饰就好了。

PS:1.千鸟,建议你在这篇文章里所引用的图片上加上外轮廓线(虚线),直接在图片上加,而不是使用Web技术,用来区分图片内文字和你在文中所键入的文本(我在GR阅读器里展开你的这篇文章并没有像此文的URL中那样显示CSS修饰出的带阴影的图片)。

2.Ctrl+Enter 除了在评论框里用Title来提示,最好把它们嵌入到Submit Button里,毕竟评论框里的Ctrl+Enter 视觉提示是“隐性(需把‘选定文本’指针定位到评论框中才出现Title的视觉提示)”的,评论者在键入文本时注意力更多的是在思考“该如何评论”,且大多数站点评论框的Submit Button都不支持快捷键(Ctrl+Enter)的功能更没有视觉提示,这没有形成访客使用习惯的沿袭。

3.你的评论框在我这(WinXP IE 7)不能随文本的增多自动拉伸,也没有滚动条出现。

ds says:

由于Discuz论坛无法设置Trackback反向链接,故在你这贴个转载地址:http://www.iconfans.com/thread-4101-1-1.html

转载此文后,我把文中所引用图片做了处理(在图片周围添加绿色轮廓线)和在文章排版上做了略微处理(添加了用来指向的↓)

见谅我的修改~~最后谢谢你分享的文章。

闲耘 says:

也觉得本身显示完整的a标签的title没有必要,反而碍眼,影响用户行为。
另外觉得包括文本框、文本域等输入区域使用title也影响行为。

王小东 says:

但绝对不能够忘记简单啊,清爽简洁
研究人的心理最重要

littlesea says:

简单是发展硬道理,支持

西南偏西 says:

简单有效,的确很有用

对一些高端娴熟的网民来说是麻烦了点,对大众来说还是不错的TITLE提示

发表评论

Spammer必读