Question 44661 in Html Question posted in
Some basic documentation can be found here.

Two-way ARIA with for and aria-describedby on labels and inputs – Html

A typical input/label pair:

<label for="Foo">Hello</label>
<input id="Foo" type="text" ... />

The for denotes that the label is associated with a particular input.

I’ve seen it done this way:

<label for="Foo" id="FooLabel">Hello</label>
<input id="Foo" aria-describedby="FooLabel" type="text" ... />

The aria-describedby denotes that the input is associated with a particular label. So there is two-way association.

Is that redundant, or it somehow helpful?

Tags:

2

Answers


  1. 0

    It’s totally useless.

    It’s useless to make the association between a field and its label in both direction via the for attribute on the label and aria-labelledby attribute on the input.

    Since the first rule of ARIA is to not use it if you can do without it, the for attribute on the label is preferred.
    The aria-label and aria-labelledby attributes should be used for the cases when it’s impossible to use a simple traditional label.

    Now, aria-description and aria-describedby isn’t exactly the same as aria-label and aria-labelledby.
    While the screen reader will in any case read the label, the description will generally be read only on demand, and should be used to give additional indications on what to enter in the field. Typically, it could be precisions like the date format, the requrements for a password, etc.

    In your example, the description is completely useless since it refers to the label again. So when the description is invoked, the screen reader will repeat the label without any additional precision.

    Login or Signup to reply.
  2. 0

    Interactive elements, such as an <input>, have both an accessible name and an accessible description. How the name/description is computed is defined in Accessible Name and Description Computation 1.1. It essentially uses a precedence list at what parts of the element are used to generate the name or description. If you happen to specify multiple sources for a name or description, for example, an aria-label and a <label> element, then the precedence list shows you which one will be honored (aria-label in this case, step 2C, compared to a <label>, step 2D).

    When you navigate to an interactive element, most screen readers will announce:

    • the accessible name of the element,
    • the role of the element (such as a button or link or text input),
    • the value or state of the element (if applicable),
    • and the description of the element.

    So in your example case, you have both an accessible name (<label>) and an accessible description (aria-describedby) and both will be announced. Since the text for both is the same, you’ll hear duplicate text:

    "Hello, edit, Hello"

    The first "Hello" is the label (or accessible name) and the second "Hello" is the description.

    Now, many screen readers apply heuristics and if the accessible name and accessible description are the same text, then it won’t announce the description. But some screen readers announce both.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search