网络编程
位置:首页>> 网络编程>> 网页设计>> 使用Alt提升可访问性

使用Alt提升可访问性

作者:一叶千鸟 来源:千鳥志 发布时间:2009-04-04 19:22:00 

标签:错误,图标,访问性,alt

alt的准确含义是,当照片不存在或者load错误时的提示。但同时img也同时支持alt和title,再有某些浏览器的错误解析,因此经常被误导并误用。最简单、准确的理解,在看不到图片的情况下如何用文字传达给用户?

比如下图flickr的订阅图标通过alt告知用户Add to My Yahoo!,个人认为这里使用title进行操作指引更合适,alt属性应该进行描述。并且此时只有在IE6和IE7中才可见tip,其他任何智商稍微正常的浏览器都看不到,更糟糕的是IE8仍旧没有改善。

某些图片带链接,也就是img外层有a的情况下,并没有注意传达需求上的差异,把img标签的alt与a标签的title都应用同样的说明。但实际上它们本质不同,如下图flickr提供给用户的外链代码,可惜与上个例子有同样问题,在IE环境下看不到a标签的tip。

问题也不是没办法解决,如下图Wordpress2.7上传图片插入编辑器自动生成的代码,把img标签的alt和title都写了出来,可以保证在各种浏览器中的兼容性。

再来看看flickr.com顶部logo的代码,直接使用alt写入Flickr logo. If you click it, you’ll go home。如果按照刚才探讨的结论调整还有更优答案,参考下图第二个例子。也就是说,图片在有链接的情况下,alt传达内容是什么?title传达链接到哪里?

分别测试IE7, FF3, Chrome1, Safari4四个浏览器,可证明其良好通用性。依次如图:

结合title来更好的说明alt用法,可见如果结构、表现分离彻底,辅助修饰等图片根本不需要img插入,也就避免了很多alt的错误应用场合。Junchen在05年译的alt属性和title属性中有更多规范和细则,alt相较title而言用途单一,但给img插入使用alt替换文字时,也应该注意:

  1. 简洁

  2. 清晰

  3. 符合语境

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com