WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA controls

for

From: Birkir R. Gunnarsson
Date: Sep 3, 2014 12:50PM

Greetings

Aria-controls is mostly used with tabs or links that expand and
collapse areas of the page that are not inline (in code order
immediately following) the link.
Say we have 3 tabs
- customer
- employee
- business partner

Then, elsewhere on the page, we have a container (div with id="info1"
) called "information".
the content in this panel is information about employee when the
employee tab is activated, customer info when customer tab is
activated etc.
For this you need to use aria-controls on each of the tabs pointing to
the id of the information container.
They would all point to the same id (in this case "info1", there is
only one container with info.
Jaws uses this and offers you to use a shortcut key to jump directly
to the area controlled by the tab. NVDA has not offered this as far as
I know (have not tested development version of most recent NVDA
build).
If you have a link tht expands and collapses a section that
immediately follows the link, you do not need aria-controls to
indicate that.
If the link controlled an area elsewhere on the page, this would be helpful.
You never need this to associate a label with a formfield, for
instance, so you were perfectly right about that.
hth
-B

On 9/3/14, Stanzel, Susan - FSA, Kansas City, MO
< <EMAIL REMOVED> > wrote:
> Hi Listers,
>
> I am not very well versed in html5 so please excuse me if this is a stupid
> question. I am unsure when ARIA controls are necessary. If for example you
> use the label for and the ID correctly as I have done previously why would I
> need the labeledby statement?
>
> Susie Stanzel
>
>
>
>
> This electronic message contains information generated by the USDA solely
> for the intended recipients. Any unauthorized interception of this message
> or the use or disclosure of the information it contains may violate the law
> and subject the violator to civil or criminal penalties. If you believe you
> have received this message in error, please notify the sender and delete the
> email immediately.
> > > >


--
Work hard. Have fun. Make history.