开发支持屏幕读取软件的 Web 2.0 应用

核心提示： 同样的，这四个链接不会影响页面视图，开发支持屏幕读取软件的 Web 2.0 应用(5)，当屏幕读取软件用户触发链接时，就会调用 onclick 事件，例如如果在 html 代码里直接设置 alt=”The type is group”，一个中国用户看到的图片信息将会是英文

同样的，这四个链接不会影响页面视图。当屏幕读取软件用户触发链接时，就会调用 onclick 事件，程序自动地将焦点设置到相应 section 的标题上，从而用户可以方便的浏览此 section 中的内容。

支持图片识别功能

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

为 img 元素添加 alt 属性

例如，下图左方图片为用户提供了类型信息：

图 3. Web 应用中的图片

这个图片的代码为：

清单 7. 图片的代码 .
　//Html　代码：　
　<img　src="http://tech.ddvip.com/2009-11/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 问题。