人们对于无障碍网站访问的需求越来越高，而对于表单这个常用的元素，无障碍访问也变得至关重要。本文将介绍如何使用 ARIA 标签创建一个无障碍的表单，涉及必需和可选的标签和属性，并提供示例代码和指导意义。
ARIA 是什么？
ARIA（Accessible Rich Internet Applications）是为了提升无障碍web而制定的一组规范。它定义了一些可用于标记 HTML 元素的特定属性，以使屏幕阅读器和其他辅助技术能够更好地理解它们。
必需的 ARIA 标签和属性
对于一个无障碍的表单，必须包含以下几个 ARIA 标签和属性：
- aria-labelledby
aria-labelledby 属性用于指定一个或多个元素的 ID，这些元素用于表示表单的标签名称。这样屏幕阅读器就可以读出标签，方便用户正确填写表单。
<label id="usernameLbl">用户名：</label> <input type="text" id="username" aria-labelledby="usernameLbl">
- aria-describedby
aria-describedby 属性用于指定一个或多个元素的 ID，这些元素用于提供有关表单的补充信息，例如错误信息等。屏幕阅读器可以读出这些信息，以帮助用户更好地填写表单。
<input type="email" id="email" aria-describedby="emailDesc"> <span id="emailDesc">请输入您的电子邮件地址。</span>
- aria-required
aria-required 属性指定一个元素是否为必填项。这可帮助屏幕阅读器指导用户完成表单。
<label id="usernameLbl" aria-required="true">用户名：</label> <input type="text" id="username" aria-labelledby="usernameLbl">
可选的 ARIA 标签和属性
以下是一些可选的 ARIA 标签和属性，可提供更好的无障碍访问体验：
- aria-invalid
aria-invalid 属性指示输入是否有效。属性值为 "true" 表示无效，为 "false" 表示有效。
<label id="zipcodeLbl">邮 编：</label> <input type="text" id="zipcode" aria-labelledby="zipcodeLbl" aria-invalid="true"> <span id="zipcodeErrMsg">不是一个有效的邮编。</span>
- aria-autocomplete
aria-autocomplete 属性用于指定输入的自动完成是否启用，以及何时启动自动完成。可能的值包括 "inline"、"list" 和 "both"。
<label id="cityLbl">城 市：</label> <input type="text" id="city" aria-labelledby="cityLbl" aria-autocomplete="list"> <ul id="cityList"> <li>北京</li> <li>上海</li> <li>广州</li> <li>深圳</li> </ul>
- aria-haspopup
aria-haspopup 属性指示与当前输入关联的菜单是否已打开。如果打开，则属性值为 "true"；如果关闭，则为 "false"。
<label id="languageLbl">语 言：</label> <input type="text" id="language" aria-labelledby="languageLbl" aria-haspopup="true"> <ul id="languageList"> <li>中文</li> <li>英文</li> <li>日文</li> <li>韩文</li> </ul>
示例代码
// www.javascriptcn.com code example
<form>
<fieldset>
<legend>我的信息</legend>
<label id="usernameLbl" aria-required="true">用户名：</label>
<input type="text" id="username" aria-labelledby="usernameLbl">
<label id="passwordLbl" aria-required="true">密 码：</label>
<input type="password" id="password" aria-labelledby="passwordLbl">
<label id="emailLbl" aria-required="true">Email：</label>
<input type="email" id="email" aria-labelledby="emailLbl" aria-describedby="emailDesc">
<span id="emailDesc">请输入您的电子邮件地址。</span>
<label id="phoneLbl">手 机：</label>
<input type="tel" id="phone" aria-labelledby="phoneLbl">
<label id="countryLbl">国 家：</label>
<input type="text" id="country" aria-labelledby="countryLbl" aria-autocomplete="both">
<label id="languageLbl">语 言：</label>
<input type="text" id="language" aria-labelledby="languageLbl" aria-haspopup="true">
<ul id="languageList">
<li>中文</li>
<li>英文</li>
<li>日文</li>
<li>韩文</li>
</ul>
<label id="zipcodeLbl">邮 编：</label>
<input type="text" id="zipcode" aria-labelledby="zipcodeLbl" aria-invalid="true">
<span id="zipcodeErrMsg">不是一个有效的邮编。</span>
</fieldset>
</form>指导意义
使用 ARIA 标签创建无障碍表单的最佳实践包括：
对于每个表单元素，使用
label元素和aria-labelledby属性标记标签名称。目的是让屏幕阅读器能够读出标签名称，帮助用户正确填写表单。对于需要补充信息的表单元素，使用
aria-describedby属性标记描述性文本。目的是让屏幕阅读器读出描述性文本，帮助用户更好地填写表单。对于必填项，使用
aria-required属性标记必填项。目的是提供必填项的提示，让用户注意填写。可选的 ARIA 标签和属性可以提供更好的无障碍访问体验。最好在项目实施前评估这些额外的标签属性是否有用。
总之，无障碍访问的表单可以帮助更多的用户访问您的网站，因此在进行前端开发时应该重视无障碍问题，并且要求我们应该从开发最初阶段就考虑到无障碍方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c15a7e314edc2684958e6b