Using the radio role

Description

This technique demonstrates how to use the radio role and describes the effect it has on browsers and assistive technology.

Possible effects on user agents and assistive technology

Note: Opinions may differ on how assistive technology should handle this technique. The information provided below is one of those opinions and therefore not normative.

Examples

Example 1:

Example from the Basic form hints MDN page.

<h3 id="rg1_label">Lunch Options</h3>

<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
  <li id="r1" tabindex="-1" role="radio" aria-checked="false">
    <img role="presentation" src="radio-unchecked.gif" /> Thai
  </li>
  <li id="r2" tabindex="-1" role="radio" aria-checked="false">
    <img role="presentation" src="radio-unchecked.gif" /> Subway
  </li>
  <li id="r3" tabindex="0" role="radio" aria-checked="true">
    <img role="presentation" src="radio-checked.gif" /> Radio Maria
  </li>
</ul>

Working Examples:

Notes

ARIA roles and attributes used

Compatibility

TBD: Add support information for common UA and AT product combinations

Additional resources