E-mail List Archives
Thread: ARIA controls
Number of posts in this thread: 5 (In chronological order)
From: Stanzel, Susan - FSA, Kansas City, MO
Date: Wed, Sep 03 2014 12:21PM
Subject: ARIA controls
No previous message | Next message →
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.
From: Jukka K. Korpela
Date: Wed, Sep 03 2014 12:45PM
Subject: Re: ARIA controls
← Previous message | Next message →
2014-09-03 21:21, Stanzel, Susan - FSA, Kansas City, MO kirjoitti:
> 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?
You don't need ARIA attributes in such cases. They are meant to be used
for providing information that programs cannot infer from normal HTML
markup.
First rule of ARIA use in the working draft "Using WAI-ARIA in HTML" is:
"If you can use a native HTML element [HTML5] or attribute with the
semantics and behaviour you require already built in, instead of
re-purposing an element and adding an ARIA role, state or property to
make it accessible, then do so."
http://www.w3.org/TR/aria-in-html/#first-rule-of-aria-use
The <label> element is an HTML element for the purpose of specifying a
label for a control. When you can use it, you do not need to duplicate
this with aria-labeledby.
Yucca
From: Birkir R. Gunnarsson
Date: Wed, Sep 03 2014 12:50PM
Subject: Re: ARIA controls
← Previous message | Next message →
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 ADDRESS 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.
From: Mallory van Achterberg
Date: Wed, Sep 03 2014 2:35PM
Subject: Re: ARIA controls
← Previous message | Next message →
On Wed, Sep 03, 2014 at 06:21:48PM +0000, Stanzel, Susan - FSA, Kansas City, MO wrote:
> ...If for example you use the label for and the ID correctly as I have done previously why would I need the labeledby statement?
>
labelledby will override any actual label you may already have.
But if you want to "label" something with text of another element,
like a dialog div with the text of a heading (this may no longer be
necessary) or similar setup can be a good use for labelledby.
In Birkir's example labelledby would be complimentary to the
aria-controls of the other element (the spec seems to say using
both would be redundant but Marco Zehe points out that with both,
some readers will both announce names correctly and do different
behaviour).
Since I used to get labelledby confused with describedby in the
beginning:
Help text and error text would be good examples of using describedby.
describedby doens't override the label.
(where Javascript or the server adds the describedby attribute
after an error is detected)
<label for="foo">Foo: </label>
<input type="text" name="foo" id="foo" aria-describedby="error1">
<p id="error1">Your foo text is missing a bar!</p>
_mallory
From: Joey G.
Date: Thu, Sep 04 2014 1:43PM
Subject: Re: ARIA controls
← Previous message | No next message
As for your example, no need to put ARIA as you already have a form with a
proper label. It is already accessible.