back to CanAdapt home

Test of a form field nested in a radio group

Recently during WCAG evaluations I've been finding quite a few radio groups with nested form fields such as these below. It is very difficult for screen readers users to navigate this. Let's assume developers don't want to place the nested elememt below the radio group either dynamically via show/hide (when the pertinent radio button is selected) or statically (always visible). Placing an aria-label on the drop down doesn't seem to help either.

I'd argue it is a very bad UI design to do this and that it should be redesigned with the nested fields below the radio group. Unfortunately, many devs seem to like it. Currently, I would fail it in WCAG. Do we need an explicit failure technique in WCAG or in the HTML 5.1 spec? Is there something we can do using existing accessibility structures to fix it (create a positive technique), while keeping the layout?

Forgive the quick ugly UI with no CSS, but you get the idea. Feel free to Twitter me @davidmacd with responses, or respond on mail list.

Example 1

How do you want to pay?


Example 2:

Download data for the:
Date range


last year