对于许多人来说，表单是他们与网站或应用程序进行交互的方式之一，因此，表单设计的重要性不言而喻。在我们设计表单时，考虑到无障碍用户的需求能够为他们提供方便而且减少错误，同时也提高了所有用户的用户体验。在本篇文章中，我们将讨论无障碍模式下的表单设计，包括可访问性、键盘导航、错误处理和表单样式等方面内容。
可访问性
许多有障碍的用户需要辅助技术来浏览网站。因此，我们在表单设计时应该遵循一些可以帮助到这些用户的规则，比如：
- 标签和标题要有意义
使用明确和有意义的标签和标题有助于辅助技术正确地理解和交互表单，这可以使表单数据更加易于阅读和理解。对于复杂的表单，最好使用描述性的标题来使表单的用途更加清晰。
- 使用标准 HTML 标记
标准 HTML 标记可以更好地支持辅助技术，并且使表单更加可访问。在我们使用非标准标记时，这可能会使票据不完全或错误。
- 使用 ARIA 标记
ARIA 是一组用于描述 Web 应用程序和 HTML 元素交互的规范。通过使用 ARIA 标记，我们可以进一步增强表单的可访问性，并允许辅助技术为用户提供更多支持。
键盘导航和访问
一些用户使用键盘而不是鼠标来浏览网站和填写表单，因此我们必须考虑键盘导航和访问性。有几个重要的注意事项需要注意：
- 使用有用的 tabindex
Tabindex 是一种 HTML 属性，用于定义元素在 tabindex 顺序中的位置。使用它有助于确保用户可以通过侦听到键盘按键来导航表单。考虑像下面的代码示例一样的 tabindex 次序：
-- -------------------- ---- ------- ------ ----------- --- ------ ----------- ----------- --------- ------------- -------- ------ ------------ ------- ------ ------------ ------------ ---------- ------------- -------- ------ -------------- --- --------- ------------ -------------- ------------------------ -------- ------- ------------- --------------------------
在这个示例中，输入字段和 textarea 间以 tabindex 顺序排列，这将允许用户通过使用绑定键向前和向后浏览表单。
- 提供聚焦反馈
当页面元素获得焦点时，开发人员应该特别注意它们收到的信号。我们需要提供特殊标记或视觉效果，确保可视差异为无障碍用户提供足够的反馈。例如，我们可以在样式方面改变表单实例中的背景色或添加外观、声音或标记性文本。
错误处理
在用户提交表单时，我们需要有效地处理任何可能引起失败的错误。我们可以使用一些最佳实践，以便最小限度地减少表单提交失败的可能性。
- 使用简单明了的语言
确保错误和问题的文字简洁、明了和易于理解。我们需要对错误和问题使用与文本和文档中的其他内容相同的语言风格和语调，这样用户才能正确理解出现的错误并了解如何解决它。
- 标记并设置焦点
用户填写表单时，详细说明表单数据错误并将焦点集中在导致错误的字段上有助于减少错误发生的可能性。通过标记文本、文本框和提示，我们可以让用户更快地发现错误，从而更快地解决它们。
下面是一个简单的示例代码，该代码为文本输入提示添加了一个简单样式，从而使用户注意到表单中的错误。
-- -------------------- ---- -------
------
-------
-----
------ ----------- ---------
----- ----------------------------------
--------
-------
-------
------ ------------ ---------
----- ----------------------------------------
--------
------- -------------------------
-------表单样式
表单样式必须清晰明了，以便用户可以简单、舒适地浏览并提交表单。以下是在表单设计时需要考虑的一些样式方案：
- 在标签上使用对齐
在样式表中为表单添加适当的 text-align 样式，以使表单更易于阅读和填写。
- 使用不同的表单状态样式
我们可以提供适当的样式用于表单字段不同的状态，例如悬停、焦点和错误状态。
-- -------------------- ---- ------- ----------------------- - ----------------- ----- - ----------- - -------- --- ----- ----- - -------------------------- - ------------- ---- -
通过修改 CSS 中的颜色和大小来调整表单输入框的外观，我们可以轻松地定制我们的表单以适应不同的场景。
结论
无障碍表单设计可以帮助所有用户轻松填写表单，无论他们是否具有视觉障碍，键盘使用困难或其他障碍。在设计表单时考虑到无障碍的内容，可以增强所有用户的用户体验。我们可以在表单中引入很多修改，包括使用 ARIA 标记、使用 tabindex 和修改表单状态的 CSS 样式等。在实践中，根据实际情况在表单设计还有很多可供优化的地方，优秀的表单设计必须基于细致的测试，以确保实现最佳体验和最佳可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67063ea0d91dce0dc85a7d1e