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 fieldset
s and legend
s 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.
Leave the
h1
as is (assuming that Education Details is the only thing you can edit on that screen) and usefieldset/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: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.