辅助功能、字段集图例和标题标签

Question

我正在开发的网站的一个要求是它必须符合 508。目前我们大部分的 html View 都以标题 h1 开头然后是该 View 上需要的任何内容。现在对于表格，建议使用 fieldset s 和 legend s 在处理可访问性以及其他众多准则时。这让事情变得有点复杂，因为 h1是内容的标题，但如果我必须使用 fieldset和一个传奇，现在我有一个 h1标题，但图例标题几乎是一样的。例如:

<h1>Edit Education Details</h1>

  <form>
    <fieldset>
      <legend>Edit Education Details</legend>

      <p>
        <label for="school">School</label>
        <input id="school" name="school" type="text"/>
      </p>

      ...other fields

    </fieldset>      
  </form>

我不确定要走哪条路。我应该摆脱 h1吗？并将图例样式设置为与 h1 相同造型？或者我应该对图例文本进行创作，以便它们不是完全相同的文本？提前致谢。

Answer 1

留下 h1按原样(假设教育详细信息是您可以在该屏幕上编辑的唯一内容)并使用 fieldset/legend对任何相关的表单控件进行分组。例如，假设您有一系列复选框来处理用户已完成的教育水平:

<h1>Edit Education Details</h1>

<form>

<p>
  <label for="school">School</label>
  <input id="school" name="school" type="text"/>
</p>
<fieldset>
  <legend>Level of Education Completed</legend>
  <input type="checkbox" id="highschool">
  <label for="highschool">High School</label>
  <input type="checkbox" id="associates">
  <label for="associates">Associates Degree</label>
  [...]
</fieldset>      
</form>

如果表单中没有任何逻辑关联的输入部分，则省略 fieldset/legends .拥有冗余或“变得有创意”，这样你就不会冗余了，这不会提高可访问性。

见 WCAG 2.0 - H82: Grouping form controls with FIELDSET and LEGEND .