Question

我正在开发的网站的要求是它必须符合508标准。目前，我们的大多数html视图都以标题h1开头，然后是该视图的所有内容。现在，对于表单，建议在处理辅助功能时使用fieldset和legend以及其他众多指南。这会使事情变得复杂一点，因为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。

辅助功能，字段集图例和标头标记

1 个答案: