Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessibility, fieldset legends, and header tags

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>

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.

like image 472
ryanulit Avatar asked Mar 21 '13 17:03

ryanulit


1 Answers

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.

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

like image 102
steveax Avatar answered Sep 22 '22 14:09

steveax