本周总结:为图片标签<img>加上 alt属性的好处

336 阅读6分钟

本周培训了一个开发规范的会议:在开发网页的时候,为图片标签加上 alt属性的好处, 示例: <img src="apple.jpg" alt="苹果">

会议大纲如下:

正常开发网页,图片的alt属性并不是强制要写,所以我们开发页面样式时经常会省略该属性,它的作用是对图像的文本描述,对可访问性而言非常有用,屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义。

根据世界卫生组织 2017 年的数据,大约有 2.53 亿人患有视觉障碍,我之前接触过一些视力障碍用户,他们会使用手机设置- 辅助功能-旁白,打开这个功能后 点击就会朗读设备屏幕上的内容。 他们也希望拥抱互联网,访问网页,手机会根据点击朗读文字、图片,而朗读图片时就会依据的alt属性;

视力障碍用户访问网页情景: 代码:<img src="apple.jpg"> 点击屏幕图片会朗读声音: 图像 代码:<img src="apple.jpg" alt="又大又红的苹果"> 点击屏幕图片会朗读声音: 又大又红的苹果-图像

为什么无障碍如此重要(帮助残障人士)

为什么不是所有网站都能无障碍访问?你可能也会问自己为什么存在 “无障碍” 的问题,为什么不是所有网站都能让所有用户无障碍访问?要进行无障碍设计有许多不同原因,其中包括残疾人用户的需求、不同的人访问和使用互联网的不同途径和方式。

视障用户

视障用户包括色盲用户、完全失明用户(盲人)。如果图片不带有相关文字描述,则视障用户在理解图片方面会存在问题。如果图片没有文字描述,看不见图片的盲人用户就无法知道图片表达的是什么。色盲用户在识别设计元素(包括文字)方面也会存在问题,因为色盲用户所能识别的色彩不足以辨别所有的设计元素(包括背景色和页面颜色)。

所开发的网站,如果没有考虑到适应于屏幕发音阅读器(读屏软件, 如 JAWS)或 “非可视” 浏览器(或叫声音浏览器、读屏浏览器,如 MozBraille)。读屏浏览器是一个可以发音阅读出网站的浏览器,帮助有视觉障碍的用户访问网站。一个在可视浏览器(如 IE)上看起来良好的网站,在读屏浏览器下可能听起来非常糟糕。

听障用户

听障用户在听觉上存在问题。用声音传达的信息无法被听障用户所理解,简单解决方法是提供另外途径的信息传达方式,而不仅仅是声音,例如用文字描述、用图片。

残障用户(肢体伤残的用户) 如果你不是残障用户,你无法想象他们(残疾人)的网络体验。例如,你曾经试过不使用鼠标去访问网站吗?除非你很幸运的遇到一个无障碍访问良好的网站,否则你肯定觉得非常困难。残障用户经常无法使用鼠标,除非创建网站的导航和输入方式的需求中就考虑残障人士的需求,否则残障人士可能完全无法使用你的网站。

认知和神经障碍用户

网站往往比较复杂,要想找到我们所想要的信息经常不太容易。如果网站设计的过于复杂、导航不一致、存在让人分心(抓狂)的重复性动画,情况会更加糟糕。这些设计元素会导致认知和神经有障碍的用户的使用问题,甚至会让这些用户完全无法使用网站。

残障人士之外(所有用户都能受益)

前面我们知道如果我们存在某方面残障,使用互联网是件困难的事情。然后,web 无障碍访问不仅仅帮助到残障人士,良好理解和遵循 Web 无障碍设计,可以让所有用户都受益、更好的服务用户。

Web 无障碍设计还可以让通过以下方式使用你的网站的用户受益:

  • 使用移动手机、Web-TV 的用户
  • 低带宽的用户
  • 在吵杂环境下使用网站的用户
  • 容易被 “屏幕眩光” 伤到眼睛的用户
  • 开车时的用户
  • 低文化水平的用户
  • 第二语言访问的用户(国外用户)
  • 不同学习方式和习惯的用户
  • 处理好 Web 无障碍访问问题也可以改善:

页面传输和网站维护

  • 内容索引
  • 内容搜索

市场机会

让你的网站具有可及性还有其它原因。根据目前数据,在许多国家残疾人用户占到人口的 10%~20%,如果能吸收前面提到的残障人士成为你的网站的用户,可以提高你网站的市场占有率。

许多国家的老龄化人口都在增加,年龄的增大会带来更多的无障碍访问问题,包括视觉障碍、听觉障碍、记忆力下降等。如果你的网站能吸收老年人用户,也会大大提升你网站的市场占有率。

所以,无障碍访问是可以直接带来经济效益的。

让网页完全支持无障碍功能有一定成本,我们可以在让代码更规范,更语义化等方面去改变;

但是给图片标签加上一个属性描述,这个举动只需要1秒钟的时间,带来的用户体验确是跨越性的,也许只有一个视力障碍的用户在访问我们的官网,我想他在访问我们页面-点击图片的时候,朗读出图片描述信息的时候,一定会很欣慰

如何测试无障碍的 Web 网站应用

目前有很多用于测试无障碍访问(AVT,Accessibility Verification Test)Web 应用的工具,较为常用的有

NVDA:绝大部分读屏软件都是收费的,而 NVDA 是一个免费开源的读屏软件,而且做的很不错,NVDA 2011.2 中文用户指南 WebKing :是由 Parasoft 发布的一款静态扫描工具,用户可以在该工具中指定需要扫描的 web 页面文件的目录实现批量扫描。 JAWS :是由 Freedom Scientific 发布的一款屏幕阅读器, 它通过阅读页面的文字帮助使用者快速了解页面功能,完成相关操作。

参考文章:

AlloyTeamwww.alloyteam.com/2012/10/how…