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
Related ARIA techniques
Compatibility
TBD: Add support information for common UA and AT product combinations