基于 Web 2.0 开发无障碍访问 Web 应用的最佳实践（2）

look_w

可“读”的图片随着 Web 页面的友好性不断提高，图片的使用也越来越广泛。然而对于无法亲眼看到页面的用户需要借助屏幕阅读器才能够知晓当前阅读的内容是一张图片以及该图片的作用，对于页面中所有有意义的图片，尤其是一些动态的图片，比如链接或是按钮，开发人员必须要给出其 alt 属性值。如清单 11 所示：
清单 11. 为图片设置 alt 属性

1	<img src="sam.jpg" alt="Sam Palmisano" width="150" height="175" />

提示：请尽量避免使用图片作为背景，如果需要，请在 CSS 文件中指定。
创建无障碍访问的数据表格在 Web 页面中通常有两种用途的表格，一种用于页面布局，另外一种用于显示数据。
数据表格需要用 <th> 指定行或列的标题行，同时还需要显式地指定 summary 属性值，使得屏幕阅读器可以读出表的主要用途。如清单 12 所示：
清单 12. 数据表格

1 2 3 4 5 6 7 8 9 10 11 12 13

<table border="1" summary=”A example simple data table”<caption> Boys and Girls in Elementary School Classes</caption>    <tr>   <th scope="col">Class</th>   <th scope="col"># of Boys</th>   <th scope="col"># of Girls</th> </tr>   <tr>   <th scope="row">1st Grade</th>   <td>11</td>    <td>10</td>    </tr>.. </table>

布局表格的用途是为了页面布局美观而使用的，所以在其定义中不应该包含行或列标题行，同时设定 summary 的属性值为空。布局表格对于屏幕阅读器应该是透明的。通常情况下，如果表格有至少两行两列四个单元格，同时其大小在 200 到 16000 平方像素之间，在 JAWS 中会默认为是数据表。所以如果一个表格是为布局而设置的，请避免为其指定 summary 属性值。有些屏幕阅读器偶尔会混淆数据表格与布局表格，为了避免混淆我们可以指定 WAI-ARIA 的 role 属性值为 presentation。如清单 13 所示：
清单 13. 设置表格的 role 属性

1	<table role="presentation">...</table>

然而并非所有的浏览器都支持 WAI-ARIA 属性，这种情形下，我们可以设定表格的 datatable 属性值为 0, 这样 JAWS 也会将其视为布局表格。
清单 14. 设置表格的 datatable 属性

1	<table datatable="0">...</table>

Id 属性值唯一在 Web 页面中必须保证每个元素的 id 属性值在页面中是唯一的，如果有重复 id 值，WebKing 会提示出错。
提供必要的指导信息页面中隐式的添加一些必要的指导信息可以使得无法看到 Web 页面的用户在屏幕阅读器的帮助下清楚的了解页面的功能以及如何快速使用这些功能。如清单 15 所示：
清单 15. 利用 <h2> 标签设置提示信息

1	<h2 style="position: absolute;left: -3000px;width: 500px;">Start of left navigation</h2>

在 Web 页面中，为了保证表单中录入的数据真实有效，需要对表单中的一些输入字段加以验证，为保证验证生成的反馈信息可以被无障碍的访问即屏幕阅读器可以在表单验证后的第一时间将反馈信息传达给用户，需要对页面代码做一些修饰。表单验证可以分为客户端验证与服务器端验证。以下将分别讨论这两种场景。