Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

Visual Example


Acceptance Criteria

As a screen reader user I should be provided with a <fieldset> that groups multiple form control options.

As a screen reader user I should be provided with a "legend" that describes the group of form controls.

Groups of form controls (such as a list of checkboxes, list of radio buttons, group of input fields) sometimes require a higher-level label. This information can be associated to the group of form controls using <fieldset> and <legend>. The <fieldset> defines the group and the <legend> contains the description. Screen readers announce the <legend> when users navigate into the group.


Markup and Code

<fieldset>
<legend>Billing Address</legend>
<label for="address">Address</label>
<input id="address" required type="text">
<label for="city">City</label>
<input id="city" required type="text">
<label for="state">State</label>
<input id="state" required type="text">
<label for="zip">Zip Code</label>
<input id="zip" required type="text">
</fieldset>

View HTML markup on github

  • No labels