WCAG 可访问性 - 表单部分的重复部分

Question

在表单中，我有以下 6 个字段的重复结构：

[输入字段][选择框]
[输入字段][选择框]
[输入字段][选择框]

<form>
  <fieldset>
    <legend>Animal</legend>
    <label>Animal name</label>
    <input type="text">
    <label>Animal species:</label>
    <select>
      <option>Bird</option>
      <option>Mammal</option>
    </select>
  </fieldset>
  <fieldset>
    <legend>Animal</legend>
    <label>Animal name</label>
    <input type="text">
    <label>Animal species:</label>
    <select>
      <option>Bird</option>
      <option>Mammal</option>
    </select>
  </fieldset>
 <fieldset>
    <legend>Animal</legend>
    <label>Animal name</label>
    <input type="text">
    <label>Animal species:</label>
    <select>
      <option>Bird</option>
      <option>Mammal</option>
    </select>
  </fieldset>
</form>

从视觉上很明显，输入字段和选择框是相关的，因为它们在一行上，但是使用屏幕阅读器，似乎不清楚哪个“动物名称”与哪个“动物物种”选择框相关，因为没有

 group role

上的

<fieldset>

也不是像

<legend>Animal 1</legend><legend>Animal 2</legend>

这样的独特传说。

执行成功标准 https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships 或 https://www.w3.org/TR/WCAG20-TECHS/H71.html要求表单元素的关系清晰，例如通过具有唯一的

<legend>

s？

您能否将列出的两个成功标准解释为“强制”以编程方式区分 <fieldsets>，或者这只是最佳实践？ （例如，使各个

<legend>

文本变得独一无二？）

Answer 1

<fieldset>元素已经隐式具有

group

角色

，并且它的名称是根据

<legend>的内容确定的。这允许屏幕阅读器在留下一个字段集和输入一个新字段集时发出通知，就像输入的视觉边框和邻近度一样。

在这方面，您将通过成功标准 1.4.1 信息和关系，因为可以通过编程确定输入和选择对属于在一起。

当前代码示例失败 3.3.2 标签或指令，因为

使用了

<label> 元素

不正确：它与输入无关，因此输入没有可访问的名称。

您需要使用

for

属性，或者将输入包裹在标签内以将它们关联起来：

<label>Animal name
  <input type="text">
</label>

该名称在页面上不需要是唯一的，通过 

<fieldset>

进行分组就足够了。