ACCESSIBLE FORMS: Calling All Radio Buttons

Radio Buttons Illustration

To be recognized by screen readers, radio button groups need: 1) a fieldset, 2) a legend, and 3) labels.

Legend text is announced along with the label text for radio buttons inside a fieldset, which makes it easier for a screen reader user to understand each radio button choice.

CODE EXAMPLE:

<form>

<fieldset>
<legend>Choose the sandwich you want to order:</legend>

<input type=”radio” name=”sandwich” value=”ham” id=”sandwich_ham”>
<label for=”sandwich_ham”>Ham</label>

<input type=”radio” name=”sandwich” value=”tuna” id=”sandwich_tuna”>
<label for=”sandwich_tuna”>Tuna Fish</label>

<input type=”radio” name=”sandwich” value=”cheese” id=”sandwich_cheese”>
<label for=”sandwich_cheese”>Cheese</label>

</fieldset>

</form>

BROWSER VIEW

Sample of Grouped Radio Buttons with Fieldset and Legend

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===