a11y Monthly: Spruce up website accessibility with aria-current

The aria-current attribute is a new, tiny bit of HTML in the upcoming ARIA 1.1 specification. It’s a simple, effective way to communicate to assistive technologies which the current item within a set of related items is. Here, I’ll try to explain how such a small attribute can improve your website accessibility. I’ll also show how it helps users of assistive technology orientate themselves within a list of items.

The “current” dilemma

Until now, there was no way to indicate with proper semantics the current item in a set of related items using HTML or ARIA. Of course, there are ways to distinguish the current item visually. You could apply some styling to make it look different from the others. However, CSS is a visual medium (with the exception of generated content) and as such is not exposed to assistive technologies.

Take the navigation menu, for instance. For years, diligent developers used workarounds to distinguish the menu item representing the current page. Removing the href attribute from the current link is one option. Another option is to make the current menu item text only, with no link at all.

These workarounds work to a certain extent. They help distinguish the current item from the other ones. However, they force users to explore content and infer which the current item is by its different markup. There is nothing to communicate in a good semantic way “Hey, I’m the current item.” No specific information is exposed to assistive technology software and to people who use that software.

One of the basic accessibility principles is that, whenever there is a visual indication that conveys important information, then this information should also be transmitted non-visually, in a semantic way, using proper markup. Only in this way software that grabs the content of your pages can understand the meaning of your HTML. This way, it can report correct information to people who use that software.

The aria-current attribute solves this problem.

What the specification says

At the time of writing, the WAI-ARIA 1.1 specification is still in a Candidate Recommendation status. It will be an official recommendation soon. In the meantime, support for aria-current is surprisingly good across major browsers and screen readers (kudos to Léonie Watson for the support data). Quoting from the specification, the aria-current attribute:

Indicates the element that represents the current item within a container or set of related elements.

You can give it one of the seven predefined values:

Value	Description
page	Represents the current page within a set of pages.
step	Represents the current step within a process.
location	Represents the current location within an environment or context.
date	Represents the current date within a collection of dates.
time	Represents the current time within a set of times.
true	Represents the current item within a set.
false (default)	Does not represent the current item within a set.

Practical usage

Turns out aria-current can be used for different patterns that are pretty common today. The most common use case is probably a navigation menu. In this case, the most appropriate value to use is “page”. Other use cases are, for example, the current step in a process/wizard (value: “step”), the current date in a calendar (value: “date”), or the current location in a breadcrumb path (value: “location”). There are no strict rules for which value to use. Use the one that makes the most sense in your use case. Remember: there should be only one element in a set of elements with aria-current.

How screen readers use aria-current

How screen readers use the aria-current attribute and what they announce? It’s very simple: the value “page” will make screen readers announce “current page”, the value “date” will make them announce “current date”, and so on. Only the value “true” is a bit different, it marks the current item as “current” but doesn’t specify what it is. Thus, the value “true” is meant to be used in all the cases where the current item is not a page, step, location, etc. One more interesting use case for “true” is when the specific wording used on the current item already includes the word “page”, “date”, etc. In this case, to avoid duplication such as “page 2 current page”, you may consider to use the value “true” instead of “page”. Again, there are no strict rules.

At Yoast, we’ve recently started using the aria-current attribute in our products. You can see it in action in the screenshot below, in the Yoast SEO plugin Configuration wizard:

Using a screen reader (in this case Safari and VoiceOver), the current step is properly announced, giving users an important feedback, equivalent to the visual feedback.

Also larger projects like WordPress have recently started using the aria-current attribute. In the next WordPress release (4.9), the main menu in the admin will use aria-current to identify the current menu item. This is the first time aria-current is used in WordPress and I’m hopeful it will be used in more places too.

Start using aria-current today

The new aria-current attribute offers a very simple way to improve your website accessibility. It can be implemented very easily, it doesn’t slow down development, and together with other quick accessibility tips can make your website more accessible for everyone.

Want to help?

At Yoast, accessibility matters a great deal. We know it’s a process and we’re continuously improving, testing, iterating, and developing. We’re always open to feedback and contributions. Please do not hesitate to let us hear your voice. Please report any issues or potential improvements you notice in our products.

Read more: Why every website needs Yoast SEO »