Accessibility is a crucial consideration when designing and developing components, as it ensures that all users, regardless of their abilities or limitations, can interact effectively with your project. In this section, we will explore how our radioButton has been developed with accessibility in mind, ensuring that all users have a smooth and meaningful experience.

Radio buttons are followed by a label that clearly indicates their purpose. Helper texts and error messages must clearly indicate the relevant information. In error messages, when possible, include information about how to correct them.

To support screen reader users, this component should include WAI ARIA attributes (the alt and aria specific props) to have a correct semantic markup. Screen reader and keyboard users should be able to operate with all the interactive elements.

If a radio group doesn’t have a default selected, the focus moves to the first radio button in the group.

Radiobutton text labels are also selectable. The area for clicking and selecting radiobuttons needs to be large enough. This is especially important for mobile and app display views.

If possible don't cause a change in context when selecting a radiobutton. Although it is not recommended, if there is no choice but to cause a change in context by selecting a radio button component, screen reader users should be warned.

The area for clicking and tapping buttons must be large enough. The recommended size of the target for pointer inputs is at least 24x24px and 44x44px for best readability.

Check other components specific accesibility recommendations: