表单标签：输入字段无障碍的基本要求

表单是网络的基本组成部分。从简单的联系表单到复杂的电子商务结账流程，它们使用户能够与网站和应用程序进行交互。然而，设计不佳的表单可能会为残障用户带来巨大障碍。创建无障碍表单的一个关键要素是正确使用表单标签。本指南全面概述了表单标签的无障碍要求，确保您的表单能被所有人使用，无论其能力如何。

为什么无障碍的表单标签很重要？

无障碍的表单标签至关重要，原因如下：

可用性：清晰简洁的标签有助于所有用户理解每个输入字段的用途，从而提高整体可用性。
无障碍：标签为残障用户提供必要信息，特别是那些依赖屏幕阅读器等辅助技术的用户。没有适当的标签，这些用户可能无法完成表单。
WCAG 合规性：《网页内容无障碍指南》(WCAG) 要求所有表单控件都必须有关联的标签。满足这些指南可确保您的网站具有无障碍性，并在许多司法管辖区内合法合规。
SEO：虽然不是直接的排名因素，但无障碍的网站往往具有更好的用户体验，这可以间接提高 SEO 表现。

理解 WCAG 对表单标签的要求

WCAG 提供了确保表单无障碍的具体指南。以下是与表单标签相关的关键要求：

WCAG 2.1 成功标准 1.1.1 非文本内容 (A 级)

虽然不直接涉及标签，但该标准强调了为所有非文本内容提供文本替代方案的重要性，包括表单中使用的验证码 (CAPTCHA) 和图像。一个正确标记的表单对于为这些替代方案提供上下文至关重要。

WCAG 2.1 成功标准 1.3.1 信息与关系 (A 级)

通过呈现方式传达的信息、结构和关系应能以编程方式确定或在文本中提供。这意味着标签与其相应输入字段之间的关系必须在 HTML 代码中明确定义。

WCAG 2.1 成功标准 2.4.6 标题和标签 (AA 级)

标题和标签描述主题或目的。表单标签为输入字段提供描述性上下文，使用户更容易理解表单的结构并准确完成它。

WCAG 2.1 成功标准 3.3.2 标签或说明 (A 级)

当内容需要用户输入时，应提供标签或说明。

WCAG 2.1 成功标准 4.1.2 名称、角色、值 (A 级)

对于所有用户界面组件（包括但不限于表单元素、链接和由脚本生成的组件），其名称和角色可以被编程方式确定；用户可以设置的状态、属性和值可以被编程方式设置；并且这些项目的更改通知可供用户代理（包括辅助技术）使用。

实施无障碍表单标签的最佳实践

以下是创建无障碍表单标签的几项最佳实践：

1. 使用 <label> 元素

<label> 元素是将文本标签与输入字段关联的主要方式。它在标签和控件之间提供了语义和结构上的连接。<label> 元素的 for 属性应与相应输入字段的 id 属性相匹配。

示例：


<label for="name">姓名：</label>
<input type="text" id="name" name="name">

错误示例（应避免）：


<span>姓名：</span>
<input type="text" id="name" name="name">

使用 span 元素而不是 label 元素不会创建必要的程序化关联，使其对屏幕阅读器不可访问。

2. 明确地将标签与输入字段关联

如上例所示，使用 for 和 id 属性确保标签和输入字段之间有清晰明确的关联。

3. 正确放置标签

标签的放置位置会影响可用性。通常，标签应放置在：

输入字段上方：这通常是最无障碍和用户友好的选项，特别是对于文本字段和文本区域。
输入字段左侧：常见，但对于视力障碍用户可能效果不佳，因为他们可能难以扫描页面。
对于单选按钮和复选框：标签应放置在控件的右侧。

在放置标签时考虑文化规范。在某些语言中，标签传统上放置在输入字段之后。调整您的设计以适应这些偏好。

4. 提供清晰简洁的标签

标签应简短、具有描述性且易于理解。避免使用可能让用户困惑的行话或技术术语。例如，使用“用户名”或“电子邮件地址”而不是“UserID”。考虑本地化。确保您的标签可以轻松翻译成不同语言，同时保留其含义。

5. 必要时使用 ARIA 属性

ARIA (Accessible Rich Internet Applications) 属性可以增强表单元素的无障碍性，尤其是在复杂场景中。但是，应谨慎使用 ARIA，仅在原生 HTML 元素和属性不足时使用。

aria-label：当无法或不便使用可见标签时，使用此属性提供标签。
aria-labelledby：使用此属性引用页面上现有元素的 ID 作为标签。
aria-describedby：使用此属性为输入字段提供额外信息或说明。这对于提供上下文或解释验证规则很有用。

使用 aria-label 的示例：


<input type="search" aria-label="搜索网站">

使用 aria-labelledby 的示例：


<h2 id="newsletter-title">新闻订阅</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="输入您的电子邮件地址">

6. 使用 <fieldset> 和 <legend> 对相关表单元素进行分组

<fieldset> 元素用于对相关的表单控件进行分组，而 <legend> 元素为该字段集提供标题。这可以改善表单的结构，使用户更容易理解不同输入字段之间的关系。

示例：


<fieldset>
  <legend>联系信息</legend>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email">
</fieldset>

7. 提供清晰的错误信息

当用户填写表单时出错，应提供清晰且信息丰富的错误消息，解释哪里出了问题以及如何纠正错误。使用 aria-describedby 等 ARIA 属性将这些错误消息与相应的输入字段关联起来。

示例：


<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">请输入有效的电子邮件地址。</span>

确保错误消息在视觉上是可区分的（例如，使用颜色或图标），并且可以通过编程方式被辅助技术访问。

8. 使用足够的颜色对比度

确保标签文本和背景颜色之间有足够的颜色对比度，以满足 WCAG 的要求。使用颜色对比度分析工具来验证对比度是否满足最低要求（正常文本为 4.5:1，大文本为 3:1）。这有助于低视力用户更容易地阅读标签。

9. 确保键盘可访问性

所有表单元素都应能单独使用键盘访问。用户应能够使用 Tab 键在表单中导航，并使用空格键或 Enter 键与表单控件进行交互。用键盘彻底测试您的表单，以确保良好的键盘可访问性。

10. 使用辅助技术进行测试

确保表单无障碍的最佳方法是使用屏幕阅读器（如 NVDA、JAWS、VoiceOver）等辅助技术进行测试。这将帮助您识别在视觉检查中可能不明显的任何无障碍问题。让残障用户参与您的测试过程，以获得宝贵的反馈。

无障碍表单标签实施示例

示例 1：简单的联系表单（国际化视角）

考虑一个面向全球受众的联系表单。标签应清晰、简洁且易于翻译。


<form>
  <label for="name">全名：</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">电子邮件地址：</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">国家/地区：</label>
  <select id="country" name="country">
    <option value="">选择国家/地区</option>
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
    <option value="de">德国</option>
    <option value="fr">法国</option>
    <option value="jp">日本</option>
    <option value="au">澳大利亚</option>
    <!-- 添加更多国家/地区 -->
  </select><br><br>

  <label for="message">留言：</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="提交">
</form>

请注意，为了清晰起见，使用了“全名”而不是“姓名”，特别是对于姓氏在名前的文化。

示例 2：电子商务结账表单

电子商务结账表单通常需要敏感信息。清晰的标签和说明对于建立信任和确保无障碍至关重要。


<form>
  <fieldset>
    <legend>配送地址</legend>
    <label for="shipping_name">全名：</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">地址：</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">城市：</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">邮政编码/邮编：</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">国家/地区：</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">选择国家/地区</option>
      <option value="us">美国</option>
      <option value="ca">加拿大</option>
      <!-- 添加更多国家/地区 -->
    </select>
  </fieldset>

  <fieldset>
    <legend>支付信息</legend>
    <label for="card_number">信用卡号：</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">有效期 (月/年)：</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="月/年"><br><br>

    <label for="cvv">CVV：</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="下单">
</form>

使用字段集和图例将表单清晰地组织成逻辑部分。占位符文本提供了额外的指导，但请记住，占位符文本不应用作标签的替代品。

示例 3：带有 ARIA 属性的注册表单

考虑一个昵称是可选的注册表单。使用 ARIA 属性，我们可以提供额外的上下文。


<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">昵称 (可选)：</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">此昵称将公开显示。</span><br><br>

  <input type="submit" value="注册">
</form>

aria-describedby 属性将昵称输入字段链接到一个 span 元素，该元素提供了有关如何使用昵称的附加信息。

测试表单无障碍的工具

有几种工具可以帮助您评估表单的无障碍性：

Accessibility Insights：一个浏览器扩展程序，用于识别网页中的无障碍问题。
WAVE (Web Accessibility Evaluation Tool)：一个在线工具，用于评估网页的无障碍错误。
axe DevTools：一个浏览器扩展程序，用于执行自动化的无障碍测试。
屏幕阅读器 (NVDA, JAWS, VoiceOver)：使用屏幕阅读器进行测试对于识别通过自动化测试可能不明显的无障碍问题至关重要。

结论

无障碍的表单标签对于创造包容性的网络体验至关重要。通过遵循本指南中概述的最佳实践，您可以确保您的表单能被所有人使用，无论其能力如何。优先考虑无障碍不仅有利于残障用户，也为所有用户改善了网站的整体可用性。请记住，要持续使用辅助技术测试您的表单，并让残障用户参与您的测试过程，以获得宝贵的反馈，并不断改善您网站的无障碍性。

拥抱无障碍不仅仅是合规问题；这是为每个人创造一个更包容、更公平的网络。通过投资于无障碍的表单设计，您展示了对包容性的承诺，并为所有用户创造了更好的用户体验。