E-mail List Archives
Thread: aria-labelledby vs aria-activedescendant
Number of posts in this thread: 4 (In chronological order)
From: Ney André de Mello Zunino
Date: Wed, Aug 10 2011 6:06AM
Subject: aria-labelledby vs aria-activedescendant
No previous message | Next message →
Hello.
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
Thank you,
--
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/
From: Ney André de Mello Zunino
Date: Mon, Aug 22 2011 7:00AM
Subject: Re: aria-labelledby vs aria-activedescendant
← Previous message | Next message →
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/
From: Bourne, Sarah (ITD)
Date: Mon, Aug 22 2011 8:24AM
Subject: Re: aria-labelledby vs aria-activedescendant
← Previous message | Next message →
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 ADDRESS REMOVED =
http://www.mass.gov/itd
From: Ney André de Mello Zunino
Date: Mon, Aug 22 2011 1:27PM
Subject: Re: aria-labelledby vs aria-activedescendant
← Previous message | No next message
On 22/08/2011 11:24, Bourne, Sarah (ITD) wrote:
> 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.)
Thank you for your response, Sarah. I think I see your point. However,
after running a couple of additional experiments, I am still unable to
get aria-labelledby and aria-activedescendant to behave well when used
in conjunction. In other words, if the container widget uses
aria-activedescendant to indicate which of its child elements is the
currently active one, only that child element "is read", not the
container's label. On the other hand, if I have aria-labelledby on each
of the child elements, the label is read, but not the elements themselves.
I have uploaded the 2 files that make up the experiments at PasteBin.
The explanatory text in Brazilian Portuguese, but I will translate the
description of each included test here:
TEST 1: Menu with UL and LI markup (preferred option)
TEST 2: Menu with UL and LI markup but with aria-labelledby set for each
LI instead of the UL.
TEST 3: Menu with DIV markup.
TEST 4: Menu with DIV markup but with aria-labelledby set for each menu
item DIV instead of the container DIV.
[1] teste11.css => http://pastebin.com/k7rfycJC
[2] teste11.html => http://pastebin.com/25bgR9TN
Regards,
--
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/