< Back to Demos | Learn more at PaulJAdam.com >

<fieldset> <legend> Accessibility Demos

http://pauljadam.com/demos/fieldsetlegend.html

Note on differences in Screen Reader Behavior:

Not all screen readers speak the <legend> text for each input in the <fieldset>, NVDA speaks it only once for each group when entering the <fieldset>, same with TalkBack/Firefox. VoiceOver OS X speaks it once for each input in the group only if you're TABing but if you're using VO+arrow keys or VO+CMD+J it does not speak the <legend> for each input. VoiceOver iOS does not speak the legend for any of the inputs, the legend is simply static text. JAWS speaks the <legend> for each input in the <fieldset>. This behavior could change as it has in VoiceOver over the years.

Default Visible <fieldset> <legend>

Billing Address




Shipping Address



Visually Hidden <legend> with Visible Section Heading

This behaves just like the default visible legend for a screen reader user when TABing through each input. Screen reader users can now also use heading element quick navigation commands.

Billing Address

Billing Address




Shipping Address

Shipping Address