Radio expander

This radio expander group uses a mixture of role and some JavaScript to make checkboxes sound like radio buttons while preserving a meaningful browsing and focus order.

Choose your plan:

Plan Alpha Plan Alpha Description

This extra text is descriptive of Plan Alpha.

Plan Bravo Plan Bravo Description

This extra text is descriptive of Plan Bravo.

Plan Charlie Plan Charlie Description.

This extra text is descriptive of Plan Charlie.

Bad example

This inaccessible example violates WCAG 2.4.3: Focus Order because elements do not receive focus in an order that preserves meaning.

Choose your plan:

Plan Delta Plan Delta Description

This extra text is descriptive of Plan Delta.

Plan Echo Plan Echo Description

This extra text is descriptive of Plan Echo.

Plan Foxtrot Plan Foxtrot Description.

This extra text is descriptive of Plan Foxtrot.