Making inclusive toggles: A path to accessibility

Welcome readers, today, we’re tackling toggles and how to make them inclusive. Toggles may seem simple at first glance, but ensuring they’re inclusive requires attention to detail in markup, design, and behavior. So, let’s dive in and learn how to create toggles that everyone can use and enjoy.

Two options, one decision

When it comes to toggles, simplicity is key. Customers should have a straightforward choice between two options: “on” or “off”, or “yes” or “no.” What matters most is giving your customers a clear binary decision.

Building your toggle

Let’s start with a simple example: asking customers if they’d like to be notified by email. We’ll include text asking about email notification and copy for the two choices. You can use CSS or JavaScript to toggle between showing “Email me” or “No emails” text based on the toggle’s current state, to make clear to your customer which choice they’ve made.

Note: I’ve hidden the aria-hidden to ensure screen readers don’t get repetitive information that will be captured using the aria-checked attribute.

<button type="button">
	<span class="label">Notify by email?</span>
	<span class="on" aria-hidden="true">Email me</span>
	<span class="off" aria-hidden="true">No emails</span>
</button>

It’s preferred and highly recommended to wrap your toggle in a <button> element. This automatically makes the toggle keyboard accessible. If you choose to use a <div>, make sure your toggle is keyboard accessible, which we’ll cover shortly.

Adding a role

To make sure our toggle is identifiable, especially for screen reader users, we add role="switch".

<button type="button" role="switch">
  <span class="label">Notify by email?</span>
  <span class="on" aria-hidden="true">Email me</span>
  <span class="off" aria-hidden="true">No emails</span>
</button>

Here’s the <div> version:

<div role="switch" tabindex="0">
  <span class="label">Notify by email?</span>
  <span class="on" aria-hidden="true">Email me</span>
  <span class="off" aria-hidden="true">No emails</span>
</div>

Is it checked?

We need a dynamic attribute to announce the toggle’s state. Enter aria-checked Ensure this attribute reflects the toggle’s current state with a value of true for “on” and false for “off”.

<button type="button" role="switch" aria-checked="false">
  <span class="label">Notify by email?</span>
  <span class="on" aria-hidden="true">Email me</span>
  <span class="off" aria-hidden="true">No emails</span>
</button>

For the <div> version:

<div role="switch" aria-checked="false" tabindex="0">
  <span class="label">Notify by email?</span>
  <span class="on" aria-hidden="true">Email me</span>
  <span class="off" aria-hidden="true">No emails</span>
</div>

Style your toggle

Ensure your toggle meets color contrast requirements. The toggle itself should have a 3:1 contrast ratio, while surrounding text needs a 4.5:1 ratio. Test your colors on WebAim to ensure accessibility.

Avoiding Color Dependency

Keyboard behavior

For customers navigating via keyboard, ensure your toggle behaves as your keyboard customer would expected.

TAB

Customers should be able to navigate to the toggle using the TAB key. Press TAB to move forward and Shift + TAB to move backward.

Space or Enter key

Both the Space and Enter keys should toggle the switch between “on” and “off” states when the toggle is focused.

Conclusion

As we conclude our journey through accessible toggles, let’s review what we’ve learned. By ensuring our toggles have the right roles, attributes, and accessibility features, we create digital experiences that welcome and empower all customers. Let’s continue building a more inclusive web together.