当我们设计 web 表单时，我们不仅要考虑它在各种设备和浏览器上的兼容性，还要确保它符合无障碍性标准，以便所有人都能访问和使用这些表单。在这篇文章中，我们会学习如何创建一个与屏幕阅读器兼容的无障碍性表单。
什么是屏幕阅读器？
屏幕阅读器是一种软件工具，用于将计算机屏幕上的文本转换为声音或其他形式的输出，以帮助视力障碍者访问计算机界面和 Web 内容。
在构建无障碍性表单时，我们需要确保表单能够与屏幕阅读器配合使用，以便人们能够使用屏幕阅读器读取和导航表单。
创建无障碍性表单的最佳实践
1. 使用语义化 HTML 标记
首先，我们需要确保在 HTML 中使用语义化标记。语义化标记是指使用具有含义和表达能力的标记来定义 Web 页面中的内容。例如，使用<label>标记来定义表单字段的标签，以便屏幕阅读器能够将其与表单字段相关联。
以下是使用语义化标记的示例 HTML 代码：
------ ------ ---------------------- ------ ----------- --------- -------------------- ------ ------------------------- ------ ------------ ---------- --------------------- ------ -------------------------- ------ --------------- ------------- ------------------------ ------ ------------- ----------- -------
上述代码使用 <label> 标记来定义表单字段的标签，并使用 for 属性将其与表单字段相关联。
2. 添加隐藏标签来提供更多信息
在某些情况下，我们可能需要为表单字段提供更多的描述和信息。在这种情况下，我们可以使用 <span> 或 <div> 标记来添加隐藏标签。
以下是使用隐藏标签的示例 HTML 代码：
------ ------ ---------------------- ------ ----------- --------- -------------------- ------ ------------------------- ------ ------------ ---------- --------------------- ------ -------------------------- ------ --------------- ------------- ------------------------ ---- -------------- --------------------------- - --------------------------- ------ ------------- ----------- -------
上述代码使用一个隐藏的 <div> 标记来为密码字段提供更多说明。同时，我们可以使用 aria-hidden="true" 属性来确保屏幕阅读器不会阅读这个标签内的内容。
3. 使用有意义的标题和标签
无论是表单字段的标题还是标签文本，我们都应该确保使用有意义的文字。对于表单字段标题，建议使用简短和清晰的文字来描述该字段的内容。
以下是使用有意义标题和标签的示例 HTML 代码：
------ ------------- ------ ---------------------- ------ ----------- --------- -------------------- ------ ------------------------- ------ ------------ ---------- --------------------- ------ -------------------------- ------ --------------- ------------- --------------- ----------------------------------------- ---- -------------- --------------------------- - --------------------------- ------ ------------- ----------- -------
上述代码使用一个有意义的标题和简短的标签来描述每个表单字段。另外，对于密码字段，我们还使用了 aria-describedby 属性来将隐藏标签与该字段相关联。
4. 使用 ARIA 属性
ARIA 是一组属性和角色，用于改善访问性并使 Web 应用程序更易于使用。在构建无障碍性表单时，我们可以使用 ARIA 属性来标记表单字段的状态、属性和行为。
以下是使用 ARIA 属性的示例 HTML 代码：
------ ------ ---------------------- ------ ----------- --------- ----------- ----------------------------- ------ ------------------------- ------ ------------ ---------- --------------------- ------ -------------------------- ------ --------------- ------------- --------------- -------------------- ------------------- ----------------------------------------- ---- -------------- --------------------------- - --------------------------- ------ ------------- ----------- -------
上述代码使用了 aria-required 属性来标记姓名和密码字段为必填项，并使用了 aria-invalid 属性来标记密码字段的无效状态。另外，我们还使用了 aria-describedby 属性来将隐藏标签与密码字段相关联。
结论
无障碍性表单是一个让所有人都能够访问和填写的表单。使用上述最佳实践，我们可以确保我们创建的表单符合屏幕阅读器的标准，以便更多的人能够访问和使用这些表单。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671e01612e7021665ef5096f