Radio Buttons without Fieldset/Legend
Radio buttons can be problematic for assistive technology users if not coded correctly. The examples below demonstrate common coding patterns for coding buttons and how to make them accessible. The examples below do not make use of Fieldset and Legend html elements. Fieldset and Legend force formatting styles that are often incompatible with some layout requirements.
Problem: Assistive technology users can have confusing information presented when not radio buttons are not coded properly.
Solution: The use of style="display:none" on the second radio button label can result in a better assistive tecnology user's experience.
Example 1: Not Accessible
Radio Button (no Fieldset/Legend)
Personal Information
Example 2: Accessible
Radio Button (no Fieldset/Legend)
Personal Information
Yes
No