aria-label and aria-labelledby

[grayghostvisuals]

Came across these two ARIA attributes which confused me a bit especially the documentation explaining them. I've noticed in bootstrap that they use the attributes on their modals and wanted to bring to light exactly why we use them and their meaning.

Hoping that before I write the article I can spark some convo with thoughts and ideas and then incorporate them.

This is the doc link I have so far…
http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-label

[nattarnoff]

I ran into that while working on a recent project.

My take was that if the label element is there, the aria-labelledby should go on the form element to connect the two in a reverse manner of the for attribute:

<input type="radio" name="one" id="one" aria-labelledby="one-label" />
<label for="one" id="one-label">One</label>

If there isn't a label (why aren't you putting labels on your form elements?????), then you use aria-label on another HTML element (fieldset, H2, P, etc) to help describe the form element:

<fieldset>
  <h2 aria-label="one">Question</h2>
   <input type="text" name="one" id="one" />
</fieldset>

In my mind, the best example where this makes sense isn't where there isn't a label, but rather is on radio/checkbox groups:

<fieldset>
  <legend aria-label="radio">Question for radio buttons</legend>
    <div id="radio">
      <input type="radio" name="one" id="one" /><label for="one">One</label>
      <input type="radio" name="two" id="one" /><label for="two">Two</label>
   </div>
</fieldset>

I'm happy to be wrong though and get clarity on this.

[davatron5000]

So the way I understand it...

1. An old school label + input with proper for attributes is the best scenario.
2. aria-label is an inline attribute that functions much like a title attribute, but with better "meaning". However, don't be redundant, if that bit of text is nearby...
3. Use aria-labelledby for remote labeling. If you had a label-less input (Umm... Google's Search box?) that could be labelled further down the page by an h1 with the content of "Search"

[keithwyland]

Not sure if this article is written yet, but thought I'd comment on a recent use case I came across for aria-labelledby.

In the case of form fields that are within a legitimate tabular data table, visually the table column and row headings (<th>) indicate the "label" of the field, but these apparently do absolutely nothing for screen readers. When they are tabbing through the inputs, headings don't get read out.

Thus, a visible label is visually redundant, and labelledby can be used as such:

<table>
  <tr>
    <th>&nbsp;</th>
    <th id="scen1">Scenario 1</th>
    <th id="scen2">Scenario 2</th>
  </tr>
  <tr>
    <th id="name">Name</th>
    <td><input type="text" aria-labelledby="scen1 name"></td>
    <td><input type="text" aria-labelledby="scen2 name"></td>
  </tr>
</table>

Codepen showing the various solutions that were given to me when exploring this particular case.
http://codepen.io/keithwyland/details/JeLuz

[davatron5000]

This looks like it would be a great article and addition to the pattern library that Dennis and I are building in a branch!

—
Sent from Mailbox for iPhone

On Mon, Oct 21, 2013 at 9:06 AM, keithwyland [email protected]
wrote:

Not sure if this article is written yet, but thought I'd comment on a recent use case I came across for aria-labelledby.
In the case of form fields that are within a legitimate tabular data table, visually the table column and row headings (<th>) indicate the "label" of the field, but these apparently do absolutely nothing for screen readers. When they are tabbing through the inputs, headings don't get read out.
Thus, a visible label is visually redundant, and labelledby can be used as such:

<table>
  <tr>
    <th>&nbsp;</th>
    <th id="scen1">Scenario 1</th>
    <th id="scen2">Scenario 2</th>
  </tr>
  <tr>
    <th id="name">Name</th>
    <td><input type="text" aria-labelledby="scen1 name"></td>
    <td><input type="text" aria-labelledby="scen2 name"></td>
  </tr>
</table>

Codepen showing the various solutions that were given to me when exploring this particular case.

http://codepen.io/keithwyland/details/JeLuz

Reply to this email directly or view it on GitHub:
#199 (comment)

[ghost]

Greetings. I am interested in contributing. Can anyone tell me where I can
find a comprehensive list of articles that need to be written?

Best,
Thaddeus

On Tue, Oct 22, 2013 at 9:13 PM, Dave Rupert [email protected]:

This looks like it would be a great article and addition to the pattern
library that Dennis and I are building in a branch!

—
Sent from Mailbox for iPhone

On Mon, Oct 21, 2013 at 9:06 AM, keithwyland [email protected]
wrote:

Not sure if this article is written yet, but thought I'd comment on a
recent use case I came across for aria-labelledby.
In the case of form fields that are within a legitimate tabular data
table, visually the table column and row headings (<th>) indicate the
"label" of the field, but these apparently do absolutely nothing for screen
readers. When they are tabbing through the inputs, headings don't get read
out.
Thus, a visible label is visually redundant, and labelledby can be used
as such:

<table>
<tr>
<th>&nbsp;</th>
<th id="scen1">Scenario 1</th>
<th id="scen2">Scenario 2</th>
</tr>
<tr>
<th id="name">Name</th>
<td><input type="text" aria-labelledby="scen1 name"></td>
<td><input type="text" aria-labelledby="scen2 name"></td>
</tr>
</table>

Codepen showing the various solutions that were given to me when
exploring this particular case.

http://codepen.io/keithwyland/details/JeLuz

Reply to this email directly or view it on GitHub:

#199 (comment)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/199#issuecomment-26879633
.

[grayghostvisuals]

@jthaddeus Article ideas and requests can be found here #12, but also make sure to check the issue tracker as well for articles already started.

[grayghostvisuals]

@keithwyland Here's the branch Dave is referencing https://github.com/a11yproject/a11yproject.com/tree/feature/patterns Feel free to give it a spin.

[keithwyland]

@grayghostvisuals @davatron5000 Cool! I'll take a look when I've got some spare time. Thanks!

[svinkle]

This issue has become "stale" — @grayghostvisuals, feel free to open a new issue if you'd like to continue.