html - 是否有表单可访问性和语义的标准化方法？

Question

关于表单和架构的“正确”、“语义”和“可访问”使用的文章如此之多，我正在重新思考我如何处理表单。什么是“正确的”实际上有太多的变化，以至于我不再 100% 确定什么是真正准确的。

在 MDN 文章 ( here ) 中，它提到:

With this example, a screen reader will pronounce "Fruit juice size small" for the first widget, "Fruit juice size medium" for the second, and "Fruit juice size large" for the third.

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small" />
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium" />
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large" />
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

现在，对于类似上面的示例，我可以看到这样做的好处，但是，假设我制作了一个多步购物车，我不希望辅助技术说出“Checkout: cc-number”、“Checkout : cc-date”，在每个标签前使用“checkout”。特别是在标记步骤的情况下。这将是重复的，有时会令人困惑我会假设......但我总是将表单的各个部分分组在 <fieldset> 中。 .现在我正在重新考虑使用 fieldset和 legend完全没有，但它现在是否违背语义？权衡取舍是什么？有余额吗？

此外，我将使用相同的 MDN 文章，所以我不会在整个网络上发送给您，

Note that even without considering assistive technologies, having a formal label set for a given widget lets users to click on the label to activate the corresponding widget in all browsers. This is especially useful for radio buttons and checkboxes.

Some assistive technologies can have trouble handling multiple labels for a single widget. Because of this, you should nest a widget inside its corresponding element to build an accessible form.

<form>
  <p>
    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
    <label for="taste_1">I like cherry</label>
  </p>
  <p>
    <label for="taste_2">
      <input type="checkbox" id="taste_2" name="taste_banana" value="1">
      I like banana
    </label>
  </p>
</form>

现在，在这种情况下，这两个项目的标签相当常见，我使用了这两种方法，但是这里可访问性和语义之间是否存在平衡？我倾向于将标签 not 包装输入以确保代码的一致性，我知道他们在这个问题上有激烈的争论(主要是放弃 for 并且不需要 id 和/或者在标记的不同区域有标签)。所以，我不想在这里重复辩论，我倾向于使用 for和 id不管我是否将元素包装在 label 中或不。但是，如果有人担心可访问性，那么为什么后者不是黄金标准呢？

还有一点，WAI-Aria 规则现在有所贡献，那么这些规则对表单的可访问性和语义有多大影响？

<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<form>
  <fieldset>
    <legend>Fruit juice size*</legend>
    <p>
      <label for="size_1">
        <input type="radio" name="size" id="size_1" value="small" aria-labelledby="size_1_label" />
        <span id="size_1_label" required aria-required="true">Small</span>
      </label>
    </p>
    <p>
      <label for="size_2">
        <input type="radio" name="size" id="size_2" value="medium" aria-labelledby="size_2_label" />
        <span id="size_2_label">Medium</span>
      </label>
    </p>
    <p>
      <label for="size_3">
        <input type="radio" name="size" id="size_3" value="large" aria-labelledby="size_3_label" />
        <span id="size_3_label">Large</span>
      </label>
    </p>
  </fieldset>
</form>

我真的很好奇在处理语义和可访问标记时是否有标准化的方法。到目前为止，人们似乎只是做他们认为正确的事情，然后在互联网上发表他们的想法。

我通读了 W3C 的草案和建议，但即使他们使用了不同的示例。有没有人有证据证明什么方法真正提高了与表单相关的可访问性和语义？他们的任何特定网站是否有时间资源来测试这个并得出我能够审查的准确结论？

Answer 1

您问题的答案确实是“视情况而定”。

您在上面列出的所有可访问标记均有效。因此，如果您只是在寻找可访问的标记，则可以使用任何示例。其余的决定实际上归结为

1. 错误处理，以及
2. 附加说明

错误处理

当错误出现在您的表单中时，它们需要以编程方式与它们引用的表单字段相关联。在维护标签本身的同时，有两种方法可以做到这一点:

将错误添加到标签

您可以将错误文本添加到标签本身。使用包装标签可以让您更灵活地控制此错误文本在 DOM 中出现的顺序。您可以将错误放在标签之前、标签之后、输入之后或输入之前。出于这个原因，您可能会选择使用包装技术而不是非包装技术:

<label>My Input
    <input type="text" aria-invalid="true" id="myinput" name="myinput"/>
    <span class="error">The input field must be a valid username</span>
</label>

使用 ARIA 关联错误

第二种技术是使用 ARIA 关联错误。这非常灵活，因为它允许多个元素构成输入的标签，也可用于附加说明。

<label id="mylabel">My Input</label>
<input type="text" aria-invalid="true" aria-labelledby="mylabel myerror"/>
<span id="myerror" class="error">The input field must be a valid username</span>

现在，如果您的输入是复选框或单选按钮，您将需要维护 for 和 id 关联，以便用户可以单击(或触摸)标签以激活复选框/ radio 。

附加说明

如上所述，使用 ARIA 标签技术，您可以将多个元素与单个输入字段相关联。这对于提供额外的说明和提示很有用。 aria-labelledby 用于可访问的名称(标签)，而 aria-describedby 可用于提示，也可以通过使用多个 id 来引用多个元素。

<label id="mylabel">My Input</label>
<input type="text" aria-invalid="true" aria-labelledby="mylabel myerror" aria-describedby="unameinstructions"/>
<span id="myerror" class="error">The input field must be a valid username</span>
<span id="unameinstructions">A valid user name must contain at least one alpha, one numeric character and must be at least 8 characters</span>

这是我在可访问的动态表单上创建的演示文稿 http://www.slideshare.net/dylanbarrell/accessible-dynamic-forms-27169766它引用了一些示例代码，可在此处找到 https://github.com/dylanb/a11yvalid以及良好最佳实践的运行示例(也许 CSS 样式选择除外)可以在这里找到 http://dylanb.github.io/bower_components/a11yfy/examples/form-validation.html