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 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With