随着互联网的普及，许多人都依赖于网络来获取信息和进行交流。这其中很多人，包括身体上有障碍的人、老年人和使用辅助技术的人，往往需要使用无障碍性（Accessibility）的网站或应用程序。对于前端开发人员来说，无障碍性是设计和开发用户体验良好的网站的重要组成部分。表单作为用户输入和提交信息的重要方式，无障碍性表单设计尤其重要。
本文将介绍无障碍性表单设计的关键技巧，帮助读者了解有关表单设计的无障碍性问题，以及如何优化表单以增强用户友好性、可访问性和可用性。
1. 表单标签
在HTML中，每个表单元素都必须将其与正确的标签相关联。 对于大多数输入类型（如文本、电子邮件、电话、密码等等），可以使用相应的HTML标签。但是，很多表单的标签需要自定义。
1.1. 标签必须与相应的input元素相关联
每个表单控件应该用label元素对它进行描述。要么在label内添加input元素，使用for属性，并将其值设置为input的ID。例如：
<label for="username">用户名：</label> <input type="text" id="username">
或者，在input元素内添加label元素，使用radio或checkbox元素。例如：
<input type="radio" id="gender-m" name="gender"> <label for="gender-m">男性</label> <input type="radio" id="gender-f" name="gender"> <label for="gender-f">女性</label> <input type="radio" id="gender-other" name="gender"> <label for="gender-other">其他</label>
在这个例子中，每个radio元素都与它的标签相关联。
1.2. 使用语义标记
唯一的目的是使结果更加可读。对于表单来说特别重要，所以要确保每个元素都具有正确的语义标记。例如，文本输入应使用input type="text"，而不是input type="generic"或input type="widget"之类的通用标记。
1.3. 语音输入支持
在支持语音输入的浏览器中，通过使用标准标记，可以为音频输入创建支持语音输入的表单元素。以下是语音识别输入的示例代码：
-- -------------------- ---- ------- ------- ------------- ------ ----------- ---------------- -------- ------- --------------------- --------- --------------------------- --------
2. Tab键和焦点序列
许多用户使用键盘而不是鼠标浏览网络。这就需要对焦点的方便性有良好的控制，并遵循正确的焦点序列。
2.1. tab键
如果一个网站的tab键的焦点从上到下呈现良好的移动，那么它就很容易使用。为了使您的表单具有无障碍性，请确保焦点的顺序是逻辑的，并正确地控制它。一个常见的错误是将多个具有完全相同的tab键引导到下一个控件。使用tabindex属性指定焦点顺序，例如：
<label for="firstName">名字</label> <input id="firstName" tabindex="1" type="text"> <label for="lastName">姓氏</label> <input id="lastName" tabindex="2" type="text"> <label for="email">电子邮件地址</label> <input id="email" tabindex="3" type="email">
在这个例子中，tab键的焦点将先移到firstName输入，然后是lastName输入，最后是email输入。
2.2. 默认焦点
在表单加载时设置默认焦点，是提高可访问性的另一个好方法。示例如下：
-- -------------------- ---- ------- ------ ------ --------------------------- ------ ----------- --------------- -------------- ---- ------ -------------------------- ------ --------------- --------------- -------------- ---- ------ ------------------------ ------ ------------- ---------- ------------ ------- -------- -------------------------------------------- -- ------------- ---------
在这个例子中，默认焦点设置为用户名输入，因此用户可以立即开始输入信息。
3. 键盘功能
键盘的功能对于那些不能使用鼠标的用户来说非常重要。按键就可以进行如左右移动、选择、取消等操作，保证这些操作在表单中也都得到了支持。
3.1. 返回上一步
在需要输入多个字段的长表单中，用户可能会意外地跳到下一个域而忘记填写某些字段。为了解决这个问题，您可以给出一个返回上一个域的选项。例如：
-- -------------------- ---- ------- ------ ------ ---------------------- ------ ----------- --------- ------------ ---- ------ ----------------------- ------ ------------- ---------- ------------- ---- ------- ------------- ---------------------------------------- ---- ------ ------------- ----------- -------
在这个例子中，用户可以点击“返回到名称”按钮，返回到第一个输入域。
3.2. cancel button
当用户填写表单，并不想提交时，只需点击cancel button。为了使这个按钮有效，必须将它包含在表单中，并防止用户填写前不小心提交。示例如下：
-- -------------------- ---- ------- ------ ------ ------------------------ ------ ----------- --------- ------------ ---- ---- ------- ------------------------- ------- ------------------------ ------- ------------- ---------------------------------------------------------------- -------
4. 状态提示
提供有关表单状态的信息，以增强用户体验。如果输入被接受，则在提交之前显示消息。如，如果输入不完整或格式错误，则显示错误消息等，以下是示例代码：
-- -------------------- ---- -------
------
------ ----------------------
------ ----------- ----------- --------- ---------
----
----
------- -------------------------
-------
--------
--- ---- - -------------------------------
------------------------------- --------------- - -- ----
-- ----------------------- - -- ------------
----------------------- -- ------
---------------------
-
---
---------在这个例子中，表单验证确定用户输入是否有效，并显示警告消息。
结论
通过本文所述的这些关键技巧，您可以创建易于使用、易于理解和可访问的表单，从而为最大的受众提供无障碍性体验。虽然本篇文章只介绍了一些有关无障碍性表单设计的关键技巧，但是这些技巧将会更容易检测和修复表单的无障碍性问题。在实践中遵循这些技巧，将使您的表单更加可用并且更容易访问！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff811f1b0bf82c71cae649