开发支持屏幕读取软件的 Web 2.0 应用-5 支持 Forms 表单识别功能

look_w

支持 Forms 表单识别功能Form 在 Web 页面中用于各种各样的交互，例如 Form 允许用户选择和购买商品，填写调查表，注册用户等。屏幕读取软件应该能够访问到 Form 元素并且明确每个 Form 元素的目的。为了达到这个目标，屏幕读取软件需要考虑两个因素：正确定位每个 Form 元素的文本描述标签；正确定位 Form 中需要用户交互的区域。因此 Web 应用开发人员应该满足以下几方面的要求：
用 <label> 元素将 Form 与其描述外在的关联起来。用 <legend> 元素为一组 radio buttons 或者 checkboxes 提供标签
例如，下图是一个需要用户输入名字的 Input 元素：
图 6. Web 应用中的 Input Form其代码为：
清单 9. 为 Input 添加 label.

1 2 3 4 5 6

//html 代码： <label for="name">${labelName}</label> <input id="name" dojoAttachPoint="_ name" value="" type="text/> //javascript 代码： this.labelName = Constance.getMessages(“labelName”);

值得注意的是，<label> 元素中，for 属性的值与 input 元素的 id 值是一一对应的。　
对于 radio buttons 或者 checkboxes，借助 <fieldset> 和 <legend> 元素将一组 Form 元素相互关联起来，并提供描述信息。例如：
图 7. Web 应用中的 radio button清单 10.为 radio button 添加 legend.

1 2 3 4 5 6 7

<fieldset>      <legend>Choose your favorite ice cream flavor</legend>      <input type="radio" name="chocolate" id="choc" />      <label for="choc">Chocolate</label>      <input type="radio" name="vanilla" id="vanilla" />      ... </fieldset>

在不能使用 <label> 元素的情况下，通过 title 属性定义 Form 的描述信息
例如一个搜索栏，允许用户输入检索信息，其代码为：
清单 11. 为无 label 的 Form 元素添加描述信息

1 2 3 4 5

//html 代码：          <input title="${labelTitle}" type="text"/> //javascript 代码： this.labelTitle = Constance.getMessages(“labelTitle”);

对于特殊元素，例如 dojo 中定义的 Form 元素需要特殊处理
通常，dojo 中所定义的 Form 元素，例如 dijit.form.CheckBox 或者 dijit.form.RadioButton，都是自动生成 id 属性，不能直接由用户定义。而为了将 Form 元素与 label 元素关联起来，Web 开发人员需要为 label 元素设置 for 属性，使之与 Form 的 id 值保持一致。我们可以通过以下方法满足 dojo 定义的 Form 元素对屏幕读取软件的支持：
清单 12. 特殊 Form 元素处理

1 2 3 4 5 6 7 8 9 10

// html代码： //在html中声明Form和label元素，不设置id和for属性。 //注意，开发人员可以通过dojoType指定当前元素的类型： <input value="labelShowAdapter" dojoAttachPoint="labelShowAdapter" name="adapter" dojoType="dijit.form.CheckBox"/> <label dojoAttachPoint="labelShowAdapterLabel"> Show Addapter</label> //javascript代码： // 在相应的javascript中设置label元素的for属性： this.labelShowAdapterLabel.setAttribute("for", this.labelShowAdapter.id);

如果一个页面上有多个类似的 Form 元素，需要用 title 属性详细加以说明
图 8. 多个 Input Form 示例图如上图所示，同一个页面上有两个 input form，都是用来搜索表格内容。由于这两个 input 元素是针对不同的表格，如果它们的 title 都是”search table content”，用户将不能区分每个 input 元素的具体作用，从而影响屏幕读取软件的使用效率。因此 Web 应用开发人员要对每一个 Form 元素都加以无歧义的说明。