使用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替换文字时，也应该注意：
简洁
清晰
符合语境
0
投稿猜你喜欢
PyQt5 事件处理机制PyQt为事件处理提供了两种机制：高级的信号与槽机制，以及低级的事件处理机制。信号与槽可以说是对事件处理机制的高级封- 上篇文章讲了js中的一些概念（词法结构） 和 数据类型（部分）。这章我们 继续.然后了解下js中操作数据 和 函数的 作用域。1,对象跟基本
- 文件的io操作的缓冲行为分为全缓冲：同系统及磁盘块大小有关，n个字节后执行一次写入操作行缓冲：遇到换行符执行一次写操作无缓冲：立刻执行写操作
- 本文实例讲述了Python使用defaultdict读取文件各列的方法。分享给大家供大家参考，具体如下：#!/usr/bin/python&
- 代码为：import matplotlib.pyplot as plt #用于显示图片import matplotlib.image as
- 介绍二分查找也称折半查找（Binary Search），它是一种效率较高的查找方法。但是，折半查找要求线性表必须采用顺序存储结构，而且表中元
- 还有多少耿直boy和我一样在等待微信官方送上一顶圣诞帽？最后知道真相的我眼泪掉下来……（还蒙在鼓里的同学请在微信最上方的搜索栏自行搜索『圣诞
- IE 开发团队更改了 IE8 的 User-agent ，更改的部分信息如下：IE8 on Windows Vista (Compatibi
- 单表的唯一查询用：distinct多表的唯一查询用：group bydistinct 查询多表时，left join 还有效，全连接无效，在
- Mysql默认是不可以通过远程机器访问的,通过下面的配置可以开启远程访问.我的Mysql环境是ubuntu+mysql51.修改/etc/m
- 一、前言：Thrift 是一种接口描述语言和二进制通信协议。以前也没接触过，最近有个项目需要建立自动化测试，这个项目之间的微服务都是通过 T
- 最近在使用echarts做报表需求，二次生成报表时数据合并,无法正确显示。第一次渲染：第二次渲染：可以看到这里的echarts项的serie
- 函数的递归调用:是函数嵌套调用的一种特殊形式具体是指:在调用一个函数的过程中又直接或间接地调用到了本身# 直接调用本身def func():
- 前面两天带着大家换了一个口味，带着大家学习了pyecharts的原理和部分图形制作。今天我们继续回归带你学MySQL系列，带着大家继续学习M
- 本文实例讲述了PHP删除数组中指定值的元素。分享给大家供大家参考，具体如下：测试数组如下：//这是一个测试数组$testArr = arra
- jQuery中文入门指南，翻译加实例，jQuery的起点教程中文版译者：Keel此文以实例为基础一步步说明了jQuery的工作方式。现以中文
- 首先要知道，修改滚动条样式，利用伪元素-webkit-scrollbar。注意， ::-webkit-scrollbar仅仅支持WebKit
- 概述很多人接触Python，都是从爬虫开始，其实很多语言都可以做爬虫，只是Python相对其他语言来说，更加简单而已。但是Python并不止
- 前两天简单认识了一下PyQt5，通过练习开发了一款在Window下自定义关机的小工具，代码如下：import os,sys,timefrom
- 前言：并行编程比程序编程困难，除非正常编程需要创建大量数据，计算耗时太长，物理行为模拟困难例子：N体问题物理前提：牛顿定律时间离散运动方程普
