WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-labelledby vs aria-activedescendant

for

From: Bourne, Sarah (ITD)
Date: Aug 22, 2011 8:24AM

I have neither info nor experience, but it's tickling a memory of struggling with CSS for UL/LI a (very) long time ago. I was trying to set something at the container level (UL) but it was not carrying through to the items inside that container (the LIs.) I remember thinking that perhaps it was because the UL has no content other than other elements. If true, then this could be tripping up your example: it can't find direct content to use the label with. I would try adding the aria-labelledby to the list items since that's what worked for my CSS problem.

(I assume you have a specific reason for not using the SELECT input, which screen readers know how to deal with.)

sb

Sarah E. Bourne
Director of Assistive Technology &
Mass.Gov Chief Technology Strategist
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502  fax 617-626-4516
http://twitter.com/sarahebourne
<EMAIL REMOVED>
http://www.mass.gov/itd


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Ney André de Mello Zunino
Sent: Monday, August 22, 2011 9:01 AM
To: WebAIM discussion list
Subject: Re: [WebAIM] aria-labelledby vs aria-activedescendant

On 10/08/2011 09:05, Ney André de Mello Zunino wrote:
> I'm having trouble getting a simple menu widget to be properly
> labelled (/aria-labelledby/) when using /aria-activedescendant/ to
> manage focus. When the widget receives focus, its label is not read;
> only the active menu item given by /aria-activedescendant/ is. This
> behavior seems misleading and lacking in the sense of providing a
> blind user with context.
>
> Illustrative example:
>
> <h2 id="menu-label">Colors Menu</h2>
>
> <ul id="colors-menu" role="menu" tabindex="0"
> aria-activedescendant="color1"
> aria-labelledby="menu-label">
> <li id="color1" role="menuitem">Green</li> <li id="color2"
> role="menuitem">Yellow</li> <li id="color3" role="menuitem">Blue</li>
> </ul>
>
> In the example above, when the menu receives focus, its label "Colors
> Menu" is not read. Instead, only the active item "Green" is. I
> expected the menu label to be announced prior to the item itself.
>
> Has anybody got any info or experience with a situation like this?
>
> Browser: Firefox 5
> AT: JAWS 11

I'll try bumping this thread as I've yet to find a solution to the issue presented in my original message from Aug. 10th. I believe it's a simple case of me failing to do something elementary and so I'm hoping someone who knows better might be able to advise me.

The case in point: when an ARIA menu widget receives focus, the screen reader should first read its label or description (given by aria-labelledby or aria-describedby, respectively) and only then inform the user about the currently active subitem (given by aria-activedescendant). I've done some tests and it seems very misleading to a blind user that when focus is set on the menu widget, only the menu item is read. He/she might not even be sure that that is a menu item.

Thanks again,

--
Ney André de Mello Zunino
Pesquisa e Desenvolvimento
Softplan/Poligraph
Sistema da Qualidade Certificado ISO9001:2008
Fone/Fax: 0xx(48) 3027-8000
http://www.softplan.com.br/