Using the radio role - Accessibility 编辑

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: Opinons may differ on how assistive technology should handle this technique. The information provided above 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 attributes used

Related ARIA techniques 

Compatibility

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

Additional resources