When to use aria-checked vs aria-current

Last week, we covered the five rules of ARIA usage. This week, we’re putting rule #3 into practice: making sure ARIA attributes accurately describe what elements actually do.

These two ARIA attributes sound similar, but mixing them up creates confusing experiences for assistive technology users. Here’s how to use each correctly.

aria-checked: For Toggleable Choices

Use aria-checked when something can be selected or toggled. Think checkboxes, radio buttons, and toggle switches. It tells screen readers whether an option is currently chosen. However, you should avoid adding aria-checked to native HTML checkboxes. The <input type="checkbox"> already communicates its checked state. Only use aria-checked on custom widgets that lack native support.

aria-current: For Location and Context

Use aria-current to identify where someone is right now within a set of related items. It’s about location and context, not selection. The most common value is aria-current="page" for the current page in your navigation menu. When a screen reader encounters this, it announces “current page” along with the link text. Other values include step (multi-step processes), date (today in a calendar), time, and location (breadcrumbs).

The Key Difference

aria-checked says, “This option is selected/toggled on” and aria-current says, “You are here.”

Think of navigation menus. The highlighted “About” page in your menu isn’t “checked” like a checkbox. It’s current because you’re viewing that page. Use aria-current="page".

In a date picker, today’s date gets aria-current="date". The date you’ve selected for your appointment gets aria-selected="true". They serve different purposes.

When in doubt, ask yourself this: Is this showing what’s selected, or showing where the user is? Selection gets aria-checked or aria-selected. User location gets aria-current.