使用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替换文字时,也应该注意:

  1. 简洁

  2. 清晰

  3. 符合语境

标签:错误,图标,访问性,alt
0
投稿

猜你喜欢

  • my.ini优化mysql数据库性能的十个参数(推荐)

    2024-01-25 13:06:56
  • 教你用Type Hint提高Python程序开发效率

    2023-10-21 03:42:24
  • node.js用fs.rename强制重命名或移动文件夹的方法

    2024-05-13 10:05:37
  • 国产化设备鲲鹏CentOS7上源码安装Python3.7的过程详解

    2023-04-23 14:08:42
  • phpmyadmin 4+ 访问慢的解决方法

    2024-05-05 09:31:28
  • MySQL中把varchar类型转为date类型方法详解

    2024-01-27 03:15:01
  • 分享Pytest fixture参数传递的几种方式

    2023-06-15 01:25:28
  • python钉钉机器人运维脚本监控实例

    2022-08-23 22:19:48
  • 死锁问题详解

    2023-08-20 06:02:47
  • Python区块链Creating Miners教程

    2021-03-25 11:39:27
  • 微信小程序使用uni-app一键获取用户信息

    2024-05-05 09:07:09
  • php实现utf-8和GB2312编码相互转换函数代码

    2024-04-29 13:56:12
  • perl控制流介绍(if条件,while,for循环,foreach)

    2023-02-13 16:33:34
  • mysql中json的使用方式详解

    2024-01-27 14:39:43
  • sql2000挂起无法安装的问题的解决方法

    2024-01-20 19:09:34
  • Python利用flask sqlalchemy实现分页效果

    2023-10-05 16:36:21
  • Python基础中所出现的异常报错总结

    2023-07-14 05:33:47
  • javascript对象概念大全

    2009-05-22 18:24:00
  • PyTorch策略梯度算法详情

    2022-12-20 14:35:12
  • IE bug: 消失的绝对定位元素

    2009-10-26 17:59:00
  • asp之家 网络编程 m.aspxhome.com