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

rya*_*lit 5 forms accessibility

我正在开发的网站的要求是它必须符合508.目前,我们的大多数html视图都以标题开头,h1然后是该视图中需要的任何内容.现在对于表单,建议在处理可访问性时使用fieldsets和legends,以及其他众多指南.这使事情变得有点复杂,因为它h1是内容的标题,但如果我必须使用a 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>
Run Code Online (Sandbox Code Playgroud)

我不确定要走哪条路.我应该摆脱h1传奇风格和风格一样h1吗?或者,我是否应该使用图例文字进行创作,以使它们不是完全相同的文本?提前致谢.

ste*_*eax 6

保持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>
Run Code Online (Sandbox Code Playgroud)

如果表单中没有任何逻辑关联的输入部分,则省略fieldset/legends.拥有冗余或"创造性"以便您不会多余,这不会增强可访问性.

请参阅WCAG 2.0 - H82:使用FIELDSET和LEGEND对表单控件进行分组.