Jump to content

Marking elements activatable using aria-pressed

ARIA provides an attribute which allows to mark an element as activatable. It works pretty uniformly in modern browsers and screen readers. Still, for most situations there exist alternative techniques that are more robust.

Background

In modern web applications there are often situations where the user needs to be able to toggle an element's activity.

On a visual level, this status typically is indicated using icons, for example a "play/pause" icon for an audio player. But this information needs to be available also on the semantical level, so screen readers can announce it.

Intended use

On a semantical level, the aria-pressed attribute is a good choice to convey that an element's visibility can be activated, together with its current state:

<button aria-pressed="false">
  Toggle
</button>

A screen reader will announce:

Toggle. Button not pressed.

If the button is activated (and the aria-pressed status is changed to true by JavaScript), the screen reader will announce this change:

Pressed.

Marking an element togglable using aria-pressedPreview

Real world use

As shown above, if the button's aria-pressed value is changed using JavaScript while it is focused, screen readers announce the change. This is pretty exceptional, as most other changes to an element are not detected by screen readers (and as such not announced).

In line with the requirement that every user interaction must result in an adequate feedback (see How to implement websites that are ready for screen reader usage), the aria-pressed attribute may seem really useful for elements like that toggle something, for example a "Play audio" button.

But in fact, there is an even simpler and more robust way to implement this using a checkbox.

Alternative technique using checkbox

Instead of fiddling around with ARIA, you can achieve the same result using a traditional checkbox (styled to your likings).

Marking an element toggleable using a checkboxPreview

While this is even more robust than using aria-pressed, it may feel out of place within a "real" form.

Do not confuse with aria-selected

There is another, similarly appealing ARIA attribute called aria-selected: it can only be used together with certain roles (for example role="tablist") and as such should not be confused with aria-pressed.

Do not use for marking expandability

If you need to mark that the visibility of an element can be toggled, instead of aria-pressed, you should use aria-expanded, see Marking elements expandable using aria-expanded.

Conclusion

If you need to describe the activatable status of interactive elements, aria-pressed is one of the few ARIA attributes we can recommend for general use. The alternative technique using a checkbox may be even more robust though (especially outside of forms).

In the end it is up to you what technique you choose.