Web 表单是 Web 应用程序中最常用的元素之一。然而，很多 Web 表单并不是对所有人都友好的。对于视力受损、听力受损、肢体残疾、认知障碍等人群，使用 Web 表单可能会带来困难。因此，本文将介绍无障碍性设计指南之 Web 表单设计，以帮助开发者创建易于使用的 Web 表单。
如何创建无障碍的 Web 表单
1. 标记表单元素
在 HTML 中，表单元素应该使用标准的 HTML 标记。例如，文本输入应该使用 <input type="text"> 标记，密码输入应该使用 <input type="password"> 标记，单选按钮应该使用 <input type="radio"> 标记等等。这样做可以让用户代理（如屏幕阅读器）正确地解释表单元素。
2. 提供标签
每个表单元素都应该有一个标签来描述它。标签应该与表单元素相关联，使得用户代理可以将标签与表单元素关联起来。有两种方法可以将标签与表单元素相关联：
- 使用
<label>标记 - 使用
aria-label属性
使用 <label> 标记可以让用户点击标签时自动将焦点移动到相应的表单元素上。例如：
<label for="username">用户名：</label> <input type="text" id="username">
使用 aria-label 属性可以在没有可见标签的情况下提供标签。例如：
<input type="text" aria-label="用户名">
3. 提供说明
对于一些复杂的表单元素，需要提供更详细的说明。例如，日期选择器、时间选择器等。可以使用 aria-describedby 属性将说明与表单元素关联起来。例如：
<label for="date">日期：</label> <input type="date" id="date" aria-describedby="date-desc"> <p id="date-desc">请使用 YYYY-MM-DD 格式输入日期。</p>
4. 提供错误提示
当用户提交表单时，如果表单元素的值不符合要求，则应该提供错误提示。错误提示应该清楚地说明错误的原因，并指出如何纠正。可以使用 aria-invalid 属性将错误提示与表单元素关联起来。例如：
<label for="email">邮箱：</label> <input type="email" id="email" aria-invalid="true"> <p id="email-error">请输入有效的邮箱地址。</p>
5. 提供键盘快捷键
对于一些肢体残疾或者认知障碍的用户，使用键盘进行操作可能更为方便。因此，需要为表单元素提供键盘快捷键。例如：
<input type="checkbox">：使用空格键选中或取消选中<input type="radio">：使用 Tab 键选中下一个选项，使用箭头键进行选项切换<select>：使用 Tab 键移动到下一个选项，使用箭头键进行选项切换
示例代码
下面是一个无障碍的 Web 表单的示例代码：
<form>
<label for="username">用户名：</label>
<input type="text" id="username" required>
<label for="password">密码：</label>
<input type="password" id="password" required>
<label for="email">邮箱：</label>
<input type="email" id="email" required aria-invalid="true">
<p id="email-error">请输入有效的邮箱地址。</p>
<label for="gender">性别：</label>
<select id="gender" required>
<option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
<fieldset>
<legend>请选择您喜欢的水果：</legend>
<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">苹果</label>
<input type="checkbox" id="banana" name="fruit" value="banana">
<label for="banana">香蕉</label>
<input type="checkbox" id="orange" name="fruit" value="orange">
<label for="orange">橙子</label>
</fieldset>
<fieldset>
<legend>请选择您的爱好：</legend>
<input type="checkbox" id="music" name="hobby" value="music">
<label for="music">音乐</label>
<input type="checkbox" id="movie" name="hobby" value="movie">
<label for="movie">电影</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">阅读</label>
</fieldset>
<button type="submit">提交</button>
</form>总结
无障碍性设计可以让所有人都能够方便地使用 Web 应用程序。在 Web 表单设计中，我们需要标记表单元素、提供标签、提供说明、提供错误提示以及提供键盘快捷键等。通过这些方法，我们可以创建无障碍的 Web 表单，让所有人都能够方便地使用我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658e24f3eb4cecbf2d3f822a