WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using aria-selected=true on any HTML element?

for

From: Brendan McKeon
Date: Aug 21, 2012 10:07PM

I'm wondering if there's also an issue with UI terminology... The term
casual English term 'selected' can have different meanings depending on
context; and aria-selected is appropriate for only one of those. For
example, "selected text" is a different concept than "selected items"; the
phrase "select a link" or "select the main menu item" really refers to
activation or perhaps focus. Similarly, the phrase "list item" could refer
to either a (usually) non-interactive bulleted LI tag, or an interactive
selectable item in a list box, which is an OPTION tag within a SELECT.

Aria-select is generally reserved for the purpose of indicating that one
element, among several similar siblings, is in such a state that it
represents the current value of the overall container control. So you can
have a selected list item within a listbox; the selected tab within a tab
control, and so on. That's really the key meaning behind the aria-selected
attribute; it's not simply a way to cause the screenreader to read out the
text "selected", it's implying more about the structure and context of the
element also.

I'm wondering if you could give more details about your UI examples, to see
if they match this model, or if there's really something else going on. Do
these cases feature a parent container, for example? Does clicking on or
moving focus to the element in question select it, or cause something else
to happen? Are they single-select or multiple-select? Do the items remain
selected when focus is moved to a different control?


Note that by default, LI and OPTION tags are associated with ARIA roles
listitem and option respectively. When those are in turn exposed through
accessibility APIs, both end up with the same role as "listitem", but other
properties will indicate to the user that the former is read-only or
non-interactive, while the latter is a forms-style selectable or interactive
UI component. So if you have some LI tags that you've marked up and attached
javascript to in order to make them behave like listbox elements, then
role=option would be appropriate to indicate this (would also need an
appropriate role on the container element also), and then aria-selected
would be fine.


Brendan.