Using aria-describedby to replicate fieldset and legend

Complex forms should use a fieldset and legend to group similar inputs. The legend is announced along with label text for each input. This is especially helpful when form inputs are repetitive, such as mailing, billing, and work address information.

This example fixes a form that included a form within a table. It uses the aria-describedby attribute to connect the individual form inputs with a header cell. It was inspired by DeQue’s recent article for using ARIA to replace fieldset/legend in a set of radio buttons: ARIA-Group: a viable alternative for Fieldset / Legend?.

Using aria-describedby to replace fieldset/legend

This version of our form uses the fieldset and legend to contain the radio buttons.

E – bills

Notify me each day if:

Sample code

<form action="#">
<legend>E - bills</legend>
<p>Notify me each day if:</p>
<input type="checkbox" checked="checked" disabled="disabled" name="received" value="received"  id="a1"/><label for="a1">Bill Received</label>
<input type="checkbox" name="due" value="due"  id="a2"/><label for="a2">Payment Due</label>
<input type="checkbox" name="not" value="not"  id="a3"/><label for="a3">Not Received</label>
<input type="checkbox" name="expected" value="expected"  id="a4"/><label for="a4">Expected to be received</label>

Using aria-describedby

The aria-describedby attribute allows us to point to a chunk of content on the page and use it as an extended description. This content will be announced by a screen reader after the label content. It’s easy to use, simply add an id to your description container. The aria-describedby attribute will point to the container’s id.

Sample form with aria-describedby

This form uses a table for layout instead of a fieldset and legend. This simplified form would be a silly use of table layout for forms. However, this could be used when the form elements are included in a larger data table.

E-bills Notify me each day if:

Sample Code

<form action="#">
  <table role="presentation" >
    <tbody role="group" aria-labeledby="b1" aria-describedby="b2">
        <th rowspan="5" scope="row" id="b1">E-bills</th>
        <th scope="col" id="b2">Notify me each day if:</th>
        <td><input type="checkbox" checked="checked" disabled="disabled" name="received" value="received" aria-describedby="b2"  id="b5"/><label for="b5">Bill Received</label></td>
        <td><input type="checkbox" name="due" value="due"  id="b6" aria-describedby="b2 b1"/><label for="b6">Payment Due</label></td>
        <td><input type="checkbox" name="not" value="not"  id="b7" aria-describedby="b2"/><label for="b7">Not Received</label></td>
        <td><input type="checkbox" name="expected" value="expected" aria-describedby="b2"  id="b8"/><label for="b8">Expected to be received</label></td>

Screen reader example

Watch a brief video of this page being read by voiceover: aria-describedby used on table based form layout (.mov).

Published by Ted

Accessibility is more than making sure images have alternate text. I work with engineers, product managers, and designers to understand how accessibility impacts the users, set realistic deadlines, and create the solutions to provide a delightful experience to all users, regardless of their physical, sensory, or cognitive ability.

Leave a comment

Your email address will not be published.