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

Question

关于 "proper," "semantic," 和 "accessible" 使用表单和体系结构的文章如此之多，我正在重新思考我如何处理表单。 "right" 的变化实在太多了，以至于我不再 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 and/or 在标记的不同区域有标签）。所以，我不想在这里重复辩论，我倾向于使用 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

你问题的答案确实是 "it depends"。

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

错误处理，以及
附加说明

错误处理

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

将错误添加到标签中

您可以将错误文本添加到标签本身。使用包装标签可以更灵活地控制此错误文本在 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 关联，以便用户可以单击（或触摸）标签以激活checkbox/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 it references some example code that can be found here https://github.com/dylanb/a11yvalid and the running example of good best practices (except perhaps the CSS styling choices) can be found here http://dylanb.github.io/bower_components/a11yfy/examples/form-validation.html

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

Is there a Standardized method of Form Accessibility and Semantics?

html

forms

accessibility

错误处理

将错误添加到标签中

使用 ARIA 关联错误

附加说明