图片的alt属性

很多人都知道给图片添加alt属性,一方面来作为图片的替代文字,一方面作为对图片的说明,一方面为了SEO,另一方面是各方的要求。但是对于alt里到底要添加什么样的值绝大多数人是说不出所以然的。以下面的图片为例

一个正确的alt值可能有很多种可能

一个说明图片如何正确使用alt值的例子

看看各家网站对这个图片的alt值是如何定义的。

腾讯网:http://news.qq.com/a/20121115/001041.htm#p=2  无alt

新浪网:http://slide.news.sina.com.cn/c/slide_1_34240_27800.html#p=4  无alt

网易:http://news.163.com/photoview/00AN0001/29296.html#p=8GBO753D00AN0001&from=photoPrev  无alt

搜狐:http://pic.news.sohu.com/group-394394.shtml#0  无alt

有点无语了。看看这四个地址分别对应的title是什么。

腾讯网:高清:新一届中央政治局常委集体亮相_新闻_腾讯网

新浪网:新一届中央政治局常委亮相_高清图集_新浪网

网易:新一届中共中央政治局常委集体亮相_网易新闻

搜狐:新一届中央政治局常委亮相-新闻图片库-大视野-搜狐

现在应可以发现这个图片说的到底是什么了。从照片所处的上下文环境中,我们可以看出如果将这个网页的标题内容赋值给这个图片的alt是比较合适的(当然要去掉各个网站和频道的后缀)。

但是并不是说“新一届中共中央政治局常委集体亮相”是这个图片的唯一的alt值。一个图片的alt值一定要根据上下文来赋值,还是以这个图片为例子,我模拟一些上下文环境,并且赋予相应的比较合适的值。

可能是关于郑重场合着装的文章:alt=”在大多数的国家和政党事务中,与会者着黑色西服”

可能是关于绘画作品的文章:alt=”人民大会堂某厅的壁画某某某”

可能是特指某个人:alt=”中间的是习近平总书记”

可能是一个记者的微博:alt=”我在人民大会堂”

可能是描述新闻工作者:alt=”每逢重大会议记者们希望找到好的拍摄位置”

可能是描述如何投票的问题:alt=”决策参与人数为10人以内单数最佳”

而在本文中我使用的是:alt=”一个说明图片如何正确使用alt值的例子”

alt值同样也不应该太长,一个简短的描述是比较合适的,保证用户一眼能看清楚的就好,屏幕阅读器用户1~2秒内听完。

屏幕阅读器会将<img />读作“图片 什么什么”。所以alt中的”的图像”、“高清组图”是多余的。

关于 rockywen

平等、美好、安逸、自由 Accessibility Strategist 你已经努力的创造了一个伟大的应用,不要错过这个让他能服务更多用户的机会。还有,这是一件对的事情。
此条目发表在 技术 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注