开发支持屏幕读取软件的 Web 2.0 应用-3 支持图片识别功能

look_w

支持图片识别功能如果不加特殊处理，屏幕读取软件将忽略 Web 应用中的图片信息，因此为每个有意义的图片，尤其是链接或者按钮等活动图片提供文本格式的替换信息，是开发支持屏幕读取软件 Web 应用的首要原则。这些文本信息必须是有意义的，并且能为图片提供简单的描述，用户可以根据图片替换信息，借助屏幕读取软件识别图片。对于不重要或者冗余的图片，将图片替换信息设置为空，屏幕读取软件就会忽略这个图片。图片替换信息并不仅仅适用于有视力障碍的用户，它同样适用于那些只支持文本的浏览器，如手机浏览器。
为 img 元素添加 alt 属性
例如，下图左方图片为用户提供了类型信息：
图 3. Web 应用中的图片这个图片的代码为：
清单 7. 图片的代码 .

1 2 3 4 5

//Html 代码： <img src="rtlm_machine.jpg" alt="${labelGroup}" width=”150” height=”175”/> //javascript 代码： this.labelGroup = Constance.getMessage(“labelGroup”);

值得注意的是，对于使用鼠标的用户来说，如果鼠标放到图片上，alt 的内容将会显示在屏幕上。因此对于一个支持全球化的 Web 应用来说，不能简单的在 html 代码里设置 alt 属性值，否则 Web 应用将不会根据浏览器 locale 信息而选择相应的 alt 翻译。例如如果在 html 代码里直接设置 alt=”The type is group”，一个中国用户看到的图片信息将会是英文字符串。这里我们通过在 javascript 中给 labelGroup 赋值的方法来避免 globalization 问题。
为活动图片添加文本信息
Web 应用为了视觉美观，会将按钮或者链接等元素以图片的形式显示出来。例如，下图右上角的两个图片分别是“添加用户”和“删除用户” 按钮。
图 4. Web 应用中的活动图片其中“添加用户”按钮的 javascript 实现为：
清单 8. 为图片添加文本信息 .

1 2 3 4 5 6 7 8

// 构造 button 元素 var addButton = document.createElement("button"); var img = document.createElement("img"); img.src = “Add_User.jpg”; addButton.appendChild(img); addButton.onclick = function() {     this.addUser(); }

//为 button元素添加文字信息
//设置 button元素的 name属性，其值为相应的文字信息

1	addButton.name = Constance.getMessage(“addUser”);

用户可以通过屏幕读取软件获取此按钮信息：Add User Button。