在今天的数字时代，Web 表单已经成为了我们生活中不可或缺的一部分。但是对于部分残障人士来说，如视力障碍者、听力障碍者、肢体残疾者等，使用 Web 表单可能会面临一些困难。因此，在设计 Web 表单时，我们需要考虑到所有用户的需求，实现无障碍设计，提供更好的用户体验。
ARIA（Accessible Rich Internet Applications）属性是一种定义 Web 应用程序和 Web 内容语义的集合。通过使用 ARIA 属性，在设计 Web 表单时，可以明确指定对于视力障碍者等用户的提示信息、验证和错误信息等方面。本篇文章将通过详细的示例，介绍如何使用 ARIA 属性实现无障碍 Web 表单设计。
ARIA 属性的组成
ARIA 属性主要由以下三部分组成：
- role：表示元素的角色。
- aria-XXX：表示元素的属性。
- aria-describedby：表示元素相关的描述信息。
其中，role 属性定义了元素在系统中所扮演的角色，包括但不限于 button、checkbox、menu、radiogroup 等等。aria-XXX 属性表示元素的其他属性，比如 aria-required 表示该元素是必填的。aria-describedby 属性则表示元素相关的提示信息或错误信息等。
在 Web 表单中使用 ARIA 属性
添加表单验证
在设计 Web 表单时，表单验证是必不可少的一部分，它确保用户输入的数据符合规范。而对于部分视力障碍的用户来说，如何及时了解到输入数据是否符合规范就显得十分重要。我们可以使用 ARIA 属性来提供给用户必要的提示信息。
在以下的示例中，我们展示了如何使用 ARIA 属性实现必填字段『姓名』的验证。
<form> <label for="name">姓名：</label> <input type="text" id="name" aria-required="true" placeholder="请输入您的姓名"> <button type="submit">提交</button> </form>
- 在 label 标签中，我们使用 for 属性将其与输入框关联起来，使其能够在点击标签时获得焦点。
- 在 input 标签中，我们使用 aria-required 属性标记该输入框不能为空，告诉用户它是必填的。
- 同时使用 placeholder 属性，给用户提供一个初始值。
- 在提交按钮中添加 type="submit"，表示在用户填写完表单后，可以点击该按钮进行提交。
添加错误信息提示
除了提示用户必填字段，我们还要考虑如果用户填写的数据不符合规范，我们应该如何提示用户，并让用户快速得到正确的提示信息。我们可以使用 ARIA 属性中的 aria-describedby 属性，来指定错误信息的位置。
在以下示例中，我们展示了如何使用 ARIA 属性实现『姓名』字段格式的验证：
<form>
<label for="name">姓名：</label>
<input type="text" id="name" aria-required="true" aria-describedby="name-info" placeholder="请输入您的姓名" pattern="[a-zA-Z0-9]{4,12}">
<p id="name-info" class="error">请输入 4 - 12 位字母或数字</p>
<button type="submit">提交</button>
</form>- 在 input 标签中，我们使用 pattern 属性，对输入的数据格式进行限制，这里限制为 4 - 12 位字母或数字。
- 同时，我们在 input 标签中，使用 aria-describedby 属性来指定显示错误信息的位置。
- 在 p 标签中，我们定义了 class="error"，用于在 CSS 样式中渲染错误信息的样式。
为表单元素指定角色
在设计 Web 表单时，元素之间的关系也是非常重要的。在部分情况下，我们需要给表单元素指定一个角色，来明确表单元素的属性。
在以下示例中，我们展示了如何使用 ARIA 属性来指定各个表单元素的属性：
// javascriptcn.com 代码示例
<form>
<div class="form-group">
<h2>选择您喜欢的产品</h2>
<div role="radiogroup" aria-labelledby="product-label">
<label id="product-label">产品：</label>
<div role="radio" aria-checked="true">
<input type="radio" name="product" id="product1" value="1">
<label for="product1">产品1</label>
</div>
<div role="radio">
<input type="radio" name="product" id="product2" value="2">
<label for="product2">产品2</label>
</div>
</div>
</div>
<div class="form-group">
<h2>选择您的天然气供应商</h2>
<div role="radiogroup" aria-labelledby="gas-label">
<label id="gas-label">天然气供应商：</label>
<div role="radio" aria-checked="true">
<input type="radio" name="gas" id="gas1" value="1">
<label for="gas1">供应商1</label>
</div>
<div role="radio">
<input type="radio" name="gas" id="gas2" value="2">
<label for="gas2">供应商2</label>
</div>
</div>
</div>
<button type="submit">提交</button>
</form>- 在 div 标签中，我们使用 role="radiogroup" 表示这个 div 是一个由单选框组成的组，使用 aria-labelledby 属性来与 label 标签进行关联。
- 同时，我们指定了每个单选框的 role 属性为 "radio"，用于明确单选框的职责。
- 使用 aria-checked 属性，指定当前单选框是否选中。
总结
通过本文，我们可以发现使用 ARIA 属性在设计 Web 表单时非常方便，可以大大简化代码的编写，同时也为残障人士带来更好的用户体验。但是，在使用 ARIA 属性时，我们不能仅仅满足于照搬示例代码，更要对其进行深入的学习和理解，以真正实现无障碍设计，让所有用户都能够体验到无障碍可用的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6533d7207d4982a6eb77bdfc