blog

在现代Web应用程序中，表单是一个至关重要的组件。用户可以通过表单输入数据并与应用程序进行交互。为了提高用户体验，并让所有用户都能轻松地使用您的应用程序，构建可访问的自定义表单控件是非常重要的。

1. 语义化的HTML结构

在构建可访问的自定义表单控件时，我们应该始终使用语义化的HTML标签。这有助于屏幕阅读器正确解读和呈现表单内容，从而提供更好的辅助功能体验。以下是一些常见的语义化标签：

1.1 <label>元素

<label>元素用于关联表单控件和标签文本，从而实现点击标签时聚焦到对应控件的效果。对于自定义控件，确保<label>的for属性与控件的id相匹配。

1
2
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

1.2 输入控件

使用正确的输入类型，并为每个输入控件提供相应的label，这有助于屏幕阅读器正确解读输入字段。

1
2
<label for="email">邮箱地址：</label>
<input type="email" id="email" name="email">

1.3 下拉框

对于下拉框（<select>），使用<optgroup>和<option>元素来创建选项组和选项。

1
2
3
4
5
6
7
8
9
10
11
<label for="country">选择国家：</label>
<select id="country" name="country">
  <optgroup label="亚洲">
    <option value="china">中国</option>
    <option value="japan">日本</option>
  </optgroup>
  <optgroup label="欧洲">
    <option value="germany">德国</option>
    <option value="france">法国</option>
  </optgroup>
</select>

1.4 角色属性

对于自定义控件，您可以使用role属性来指定其角色，从而帮助屏幕阅读器正确地识别控件类型。

1
<div role="button" tabindex="0">点击我</div>

2. 键盘导航和焦点管理

构建可访问的表单控件不仅意味着让鼠标用户轻松使用，还要确保键盘用户也能无障碍地访问。为此，需要处理焦点的顺序和键盘导航。

2.1 焦点顺序

通过设置合理的tabindex值来定义焦点的顺序。确保焦点按照预期顺序在表单控件之间移动，这使得用户可以使用Tab键在控件之间进行导航。

1
2
3
4
5
6
7
8
<label for="name">姓名：</label>
<input type="text" id="name" name="name" tabindex="1">

<label for="email">邮箱：</label>
<input type="email" id="email" name="email" tabindex="2">

<label for="message">消息：</label>
<textarea id="message" name="message" tabindex="3"></textarea>

2.2 键盘导航

确保所有表单控件都可以使用键盘进行操作。例如，对于按钮，应该在按下Enter键时触发点击事件。

1
<button onclick="submitForm()" onkeyup="handleKeyUp(event)">提交</button>
1
2
3
4
5
function handleKeyUp(event) {
  if (event.key === "Enter" || event.keyCode === 13) {
    submitForm();
  }
}

3. ARIA属性

ARIA（可访问性增强技术）属性允许开发者为自定义表单控件提供更多信息，使屏幕阅读器能够准确传达给用户。

1
<div role="checkbox" aria-checked="true" tabindex="0">选中</div>

确保aria-*属性与控件的状态和角色相匹配，并及时更新以反映实际情况。

4. 错误处理和验证

表单验证对于用户输入的数据合法性至关重要。对于无障碍性，我们应该向用户明确错误信息，并提供解决方案。

1
2
3
<label for="age">年龄：</label>
<input type="number" id="age" name="age" required>
<div role="alert" id="age-error" aria-live="assertive"></div>
1
2
3
4
5
6
7
8
9
10
11
const ageInput = document.getElementById("age");
const ageError = document.getElementById("age-error");

ageInput.addEventListener("invalid", (event) => {
  event.preventDefault();
  ageError.textContent = "请输入有效的年龄。";
});

ageInput.addEventListener("input", () => {
  ageError.textContent = "";
});

通过合适的aria-live属性，屏幕阅读器会实时地通知用户输入的有效性状态。

结论

通过遵循以上的准则，您可以构建一个可访问的自定义表单控件，使您的Web应用程序对所有用户都更加友好和无障碍。通过语义化的HTML结构、键盘导航、ARIA属性和良好的错误处理，您的表单控件将为所有用户提供更好的用户体验。