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 11:07PM

Scratch that, been doing too much stuff with listboxes today, so everything
I see is a listbox... you're talking about a breadcrumb bar, or page
navigation menu or tabs or something similar here?

These would seem to be a good match for tabs, but that doesn't work out well
in practice. Bryan Garaventa has an article outlining the problems with this
at the following link, and suggests offscreen text as best option for now:
http://www.linkedin.com/groups/Why-you-should-not-use-4512178.S.134719297

Brendan.


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Brendan McKeon
Sent: Tuesday, August 21, 2012 9:08 PM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] Using aria-selected=true on any HTML element?

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.


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Paul J. Adam
Sent: Tuesday, August 21, 2012 12:37 PM
To: WebAIM Discussion List
Subject: [WebAIM] Using aria-selected=true on any HTML element?

The WAI-ARIA spec states that the aria-selected state is only used in roles
gridcell, option, row, and tab.
<http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected>;

Is it bad to use aria-selected=true on a HTML widget with a selected state
that does not fall into one of these roles? Like a list item or link?

If aria selected should not be used on links or list items then how would
you communicate state to a screen reader? Visually hidden text? Title
attribute?

Adding aria-selected to a HTML element does cause VoiceOver to speak the
text "selected" even if it's not one of the supported roles.

Thoughts?

Paul J. Adam
Accessibility Evangelist
Deque Systems
<EMAIL REMOVED>
www.PaulJAdam.com
@pauljadam on Twitter

messages to <EMAIL REMOVED>

messages to <EMAIL REMOVED>