WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA controls

for

From: Mallory van Achterberg
Date: Sep 3, 2014 2:35PM

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