Accessible radio buttons: Your comprehensive how-to guide

Today, let’s dive into the importance of crafting radio buttons that are not just functional but also accessibility compliant. You might think, “Why fuss over radio buttons?” Well, let me tell you, many websites have inaccessible radio buttons in their forms, creating limitations for some of their customers. Radio buttons are crucial components of user interaction, especially for those who rely on assistive technologies.

With semantic HTML or without

Using semantic HTML:

When it comes to building accessible components like radio buttons, starting with semantic HTML lays a solid foundation. Using HTML provides built-in accessibility features and ensures compatibility with various assistive technologies.

Without semantic HTML:

While not ideal, you can still achieve accessibility by leveraging ARIA attributes. By assigning roles along with aria attributes like, you can create an inclusive experience for your customers.

So, what makes a radio button accessible? Let’s break it down what you’ll need:

Identifying your radio buttons

When it comes to crafting accessible web experiences, ensuring your radio buttons are properly identified can make a world of difference. Here’s how to call them out to your customers:

Semantic HTML version:

Native HTML elements like <input type="radio"> inherently provide accessibility features. You can add the topic in a heading or paragraph tag.

<p>Who is your favorite James T Kirk actor?</p>
<input type="radio" ...>
<input type="radio" ...>
<input type="radio" ...>

Without semantic HTML:

For non-semantic implementations, you’ll need to add the role="radiogroup" and aria-labelledby with the same name as the topic of your group. Additionally, you’ll identify each radio button option by adding role="radio". You’ll also need to add a dynamic aria-checked attribute to reflect their states.

<div role="radiogroup" aria-labelledby="topickirk" id="radiogroup">
  <p id="topickirk">Who is your favorite James T Kirk actor?</p>
  <div>
    <span role="radio" aria-checked="false" ...></span>
    <span role="radio" aria-checked="true" ...></span>
    <span role="radio" aria-checked="false" ...></span>
</div>

Group labels matter

Ever noticed how related items are better understood when grouped together? Let’s see how you can inform your customers what is grouped together.

Semantic HTML version:

Give the radio buttons a shared name attribute ensures they’re recognized as part of the same group, maintaining consistency and accessibility.

<p>Star Trek original series or The Next Generation</p>
<input type="radio" name="bestkirk" ...>
<input type="radio" name="bestkirk" ...>
<input type="radio" name="bestkirk" ...>

Without semantic HTML:

Luckily, this was done when you added role="radiogroup".

<div role="radiogroup" aria-labelledby="topickirk" id="radiogroup">
  <p id="topickirk">Who is your favorite James T Kirk actor?</p>
  <div>
    <span role="radio" aria-checked="false" ...></span>
    <span role="radio" aria-checked="true" ...></span>
    <span role="radio" aria-checked="false" ...></span>
</div>

Labels, labels, labels

Imagine a radio button without a label – it’s like trying to guess what’s inside a wrapped gift. Everyone deserves clarity.

Semantic HTML version:

Each radio button should have a corresponding <label> element with a for attribute that matches the same name as your input’s id.

<p>Who is your favorite James T Kirk actor?</p>
<input type="radio" id="shatner" name="bestkirk" value="Shatner">
<label for="shatner">William Shatner</label>
<input type="radio" id="pine" name="bestkirk" value="Pine">
<label for="pine">Chris Pine</label>
<input type="radio" id="wesley" name="bestkirk" value="Wesley">
<label for="wesley">Paul Wesley</label>

Without semantic HTML:

Each radio button will need a <label> that has an id with the same name as your aria-labelledby.

<div role="radiogroup" aria-labelledby="topickirk" id="radiogroup">
  <p id="topickirk">Who is your favorite James T Kirk actor?</p>
  <div>
    <span role="radio" aria-checked="false" tabindex="0" aria-labelledby="shatner" data-value="Shatner"></span>
    <label id="shatner">William Shatner</label>
  </div>
  <div>
    <span role="radio" aria-checked="true" tabindex="0" aria-labelledby="pine" data-value="Pine"></span>
    <label id="pine">Chris Pine</label>
  </div>
  <div>
    <span role="radio" aria-checked="false" tabindex="0" aria-labelledby="wesley" data-value="Wesley"></span>
    <label id="wesley">Paul Wesley</label>
  </div>
</div>

Since you're using a non-native elements like a <div> or <span> for your radio buttons, make sure to add a tabindex="0" to ensure they're keyboard accessible.

Make your radio buttons keyboard friendly

Not everyone navigates the web with a mouse. Some prefer the trusty keyboard. Here’s what you need to know to make them keyboard accessible.

Semantic HTML version:

Without semantic HTML:

You’ll need to ensure that your customers can interact with them using the keyboard in the following ways:

• Tab: Moves the focus forward to the next focusable element.
• Tab + Shift: Moves the focus back to the previous focusable element.
• Space: Checks the radio if not already checked. Unchecks a previously checked radio button in the radio group.
• Right Arrow or Down Arrow: Move focus to and checks the next radio button in the group, unchecking the previously focused radio button. If focus is on the last radio button, focus moves to the first radio button.
• Left Arrow or Up Arrow: Move focus to and checks the previous radio button in the group, unchecking the previously focused radio button. If focus is on the first radio button, focus moves to the last radio button.

A helpful reminder

When it comes to radio buttons, you can only pick one option from the group. If you want to give your customer the ability to select multiple choices, checkboxes are the way to go!

Conclusion

Now, armed with the knowledge of both semantic HTML and ARIA attributes, let’s create radio buttons that not only function flawlessly but also welcome everyone to the party, regardless of how they access the web. Let’s make the internet a more inclusive place, one radio button at a time!