Radio button: Custom radio button does not have a role and/or state

Rule

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

Background

Every user interface control must have a role to convey what type of control it is for screen reader and other assistive technology users. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) using ARIA as well as expected keyboard interactions.

How to Fix

Fix this issue by using ONE of the following techniques:

1. Use the HTML <input type="radio"> element with a programmatic label.
2. Use the ARIA method:

a. Use the role="radio" attribute on the radio button container. b. Use the aria-checked="true"/"false" attribute to convey the checked/unchecked state. c. Provide a programmatic label by using the aria-labelledby attribute or aria-label attribute or wrapping the visible label inside the radio element.

<div role="radiogroup" aria-labelledby="pizza"> <h3 id="pizza">Pizza Crust</h3> <div class="radio" role="radio" aria-checked="true" aria-labelledby="reg" tabindex="0"></div> <div id="reg">Regular crust</div> <div class="radio" role="radio" aria-checked="false" aria-labelledby="deep" tabindex="-1"></div> <div id="deep">Deep dish</div> <div class="radio" role="radio" aria-checked="false" aria-labelledby="thin" tabindex="-1"></div> <div id="thin">Thin crust</div> </div>