WebAIM - Web Accessibility In Mind

E-mail List Archives

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


From: Gunderson, Jon R
Date: Aug 29, 2012 9:26AM

Are the elements basically being used to show the state of content that can be selectively hidden or visible?

If so use aria-expanded property and aria-controls.



-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Paul J. Adam
Sent: Wednesday, August 29, 2012 9:59 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Using aria-selected=true on any HTML element?

I guess most of the HTML elements with selected state could have a role=tab, but they don't always look like tabs. Basically what I'm referring to is that many times I see custom user interface components that are designed visually to have selected and unselected states. The developer may code these on top of a normal link or list item or a div, whatever CSS and JavaScript allows them to do. So my quandary was how do I communicate that state to screen readers. Do I use ARIA with weak support or go back to old school visually hidden text. Visually hidden text is the only bulletproof solution.

Paul J. Adam
Accessibility Evangelist
Deque Systems
@pauljadam on Twitter

On Aug 29, 2012, at 2:39 AM, Benjamin Hawkes-Lewis < <EMAIL REMOVED> > wrote:

> On Tue, Aug 21, 2012 at 8:36 PM, Paul J. Adam < <EMAIL REMOVED> > wrote:
>> 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?
> What sort of selection are you talking about here, that would apply to
> links or list items?
> --
> Benjamin Hawkes-Lewis
> > > list messages to <EMAIL REMOVED>