使用Alt提升可访问性
作者:一叶千鸟 来源:千鳥志 时间:2009-04-04 19:22:00
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替换文字时,也应该注意:
简洁
清晰
符合语境


猜你喜欢
my.ini优化mysql数据库性能的十个参数(推荐)
教你用Type Hint提高Python程序开发效率
node.js用fs.rename强制重命名或移动文件夹的方法
国产化设备鲲鹏CentOS7上源码安装Python3.7的过程详解
phpmyadmin 4+ 访问慢的解决方法
MySQL中把varchar类型转为date类型方法详解

分享Pytest fixture参数传递的几种方式
python钉钉机器人运维脚本监控实例

死锁问题详解

Python区块链Creating Miners教程
微信小程序使用uni-app一键获取用户信息

php实现utf-8和GB2312编码相互转换函数代码
perl控制流介绍(if条件,while,for循环,foreach)
mysql中json的使用方式详解
sql2000挂起无法安装的问题的解决方法
Python利用flask sqlalchemy实现分页效果

Python基础中所出现的异常报错总结

javascript对象概念大全
PyTorch策略梯度算法详情

IE bug: 消失的绝对定位元素
