辅助功能，字段集图例和标题标签 [英] Accessibility, fieldset legends, and header tags

问题描述

我正在开发的网站的要求是它必须符合508。当前，我们大多数的html视图以标题 h1 开头，然后在该视图上需要任何内容​​。现在，对于表单，建议在处理可访问性时使用 fieldset s和 legend s，还有许多其他准则。这使事情变得有些复杂，因为 h1 是内容的标题，但是如果我必须使用 fieldset 和图例，现在我有一个 h1 标题，但图例标题几乎是同一回事。例如：

A requirement of a site I am developing is that it must be 508 compliant. Currently most of our html views start with a header h1 and then whatever needs to be on that view. Now for forms, it is recommended to use fieldsets and legends when dealing with accessibility, among other numerous guidelines. This makes things a little more complicated because the h1 was to be the title of the content, but if I have to use a fieldset and a legend, now I have an h1 title but the legend title would pretty much be the same thing. For example:

<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 样式相同？还是应该让图例文字更具创意，以使它们与文字完全不同？

I'm not sure which route to go. Should I just get rid of the h1 and style the legend to be the same as the h1 styling? Or should I get creative with the legend text so that they aren't the exact same text? Thanks in advance.

推荐答案

将 h1 保留为原样（假设您可以在该屏幕上编辑教育详细信息，并使用 fieldset / legend 对任何相关的表单控件进行分组。例如，假设您有一系列处理用户受教育程度的复选框：

Leave the h1 as is (assuming that Education Details is the only thing you can edit on that screen) and use fieldset/legend to group any related form controls. For instance, lets say you have a series of checkboxes that deal with the user's level of education completed:

<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>

如果表单中没有任何与输入逻辑相关的部分，则省略字段集/传奇。拥有冗余或发挥创造力以致您不会变得多余不会改善可访问性。

If there are not any logically associated sections of inputs in the form, then omit the fieldset/legends. Having redundancy or "getting creative" so that you aren't redundant isn't going to enhance the accessibility.

请参见 WCAG 2.0-H82：使用FIELDSET和LEGEND对表单控件进行分组。

这篇关于辅助功能，字段集图例和标题标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！