Testing fieldsets and legends

The <fieldset> HTML element is used to group more than one form field within a web form. The <legend> HTML element represents a label for the content of its parent <fieldset>.

Example 1

This radio group has no group role or name.

This is a serious accessibility issue. Screen reader users have no way of knowing that these radio buttons form a group or what question they are intended to answer.

HTML markup 
<ul class="form-list">
  <li>
    <input type="radio" id="dog1" name="example1">
    <label for="dog1">Dog</label>
  </li>
  <li>
    <input type="radio" id="cat1" name="example1">
    <label for="cat1">Cat</label>
  </li>
  <li>
    <input type="radio" id="rabbit1" name="example1">
    <label for="rabbit1">Rabbit</label>
  </li>
</ul>

Example 2

This radio group has no group role and the name is not programmatically associated with the radios.

This is an accessibility issue. Screen reader users may need to leave forms mode and navigate around the page to discover the nearby heading that describes the radio group.

Favourite animal

HTML markup 
<h3>Favourite animal</h3>
<ul class="form-list">
  <li>
    <input type="radio" id="dog2" name="example2">
    <label for="dog2">Dog</label>
  </li>
  <li>
    <input type="radio" id="cat2" name="example2">
    <label for="cat2">Cat</label>
  </li>
  <li>
    <input type="radio" id="rabbit2" name="example2">
    <label for="rabbit2">Rabbit</label>
  </li>
</ul>

Example 3

This radio group has group role via <fieldset> but no name.

This is an accessibility issue. Although the radios are grouped, screen reader users may still need to leave forms mode to discover the question or heading that describes the group.

HTML markup 
<fieldset>
  <ul class="form-list">
    <li>
      <input type="radio" id="dog3" name="example3">
      <label for="dog3">Dog</label>
    </li>
    <li>
      <input type="radio" id="cat3" name="example3">
      <label for="cat3">Cat</label>
    </li>
    <li>
      <input type="radio" id="rabbit3" name="example3">
      <label for="rabbit3">Rabbit</label>
    </li>
  </ul>
</fieldset>

Example 4

This radio group has group role via <fieldset> and name via <legend>

Recommended. The radio group has both a programmatic group and an accessible name, allowing screen reader users to understand the question while navigating the form.

Favourite animal
HTML markup 
<fieldset>
  <legend>Favourite animal</legend>
  <ul class="form-list">
    <li>
      <input type="radio" id="dog4" name="example4">
      <label for="dog4">Dog</label>
    </li>
    <li>
      <input type="radio" id="cat4" name="example4">
      <label for="cat4">Cat</label>
    </li>
    <li>
      <input type="radio" id="rabbit4" name="example4">
      <label for="rabbit4">Rabbit</label>
    </li>
  </ul>
</fieldset>

Example 5

This radio group has group role via radiogroup and name via aria-labelledby

Acceptable when needed. This provides an accessible group and name, but a native <fieldset> and <legend> should be preferred whenever possible.

Favourite animal

HTML markup 
<div role="radiogroup" aria-labelledby="aaa">
  <h3 id="aaa">Favourite animal</h3>
  <ul class="form-list">
    <li>
      <input type="radio" id="dog5" name="example5">
      <label for="dog5">Dog</label>
    </li>
    <li>
      <input type="radio" id="cat5" name="example5">
      <label for="cat5">Cat</label>
    </li>
    <li>
      <input type="radio" id="rabbit5" name="example5">
      <label for="rabbit5">Rabbit</label>
    </li>
  </ul>
</div>

Testing home