WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using labels or table headers on nested editable elements inside data cells?

for

From: Birkir R. Gunnarsson
Date: Jan 10, 2017 7:22AM

You're always welcome.


On 1/10/17, Brandon Keith Biggs < <EMAIL REMOVED> > wrote:
> Hello,
> Thank you for this! I will use aria-labeledby from now on!
> Thanks,
>
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>
> On Tue, Jan 10, 2017 at 5:29 AM, Birkir R. Gunnarsson <
> <EMAIL REMOVED> > wrote:
>
>> Hi
>> Table association is not a valid source of a form field's accessible
>> name, per the accessible name calculation algorithm.
>> NVDA decides to be smart and guess it, and it guesses it correctly,
>> but it is not reliable enough to pass WCAG 4.1.2.
>> You can fix this by:
>> 1. Adding unique id attributes to the th cells.
>> 2. Referncing those ids using aria-labelledby from the <input> elements:
>>
>> <table>
>> <theader>
>> <tr>
>> <th id="name1">name</th>
>> <th id="age1">age</th>
>> </tr>
>> </theader>
>> <tbody>
>> <tr>
>> <td><input type="text"> aria-labelledby="name1"</td>
>> <td><input type="number" aria-labelledby="age1"></td>
>> </tr>
>>
>> <tr>
>> <td><input type="text" aria-labelledby="name1"></td>
>> <td><input type="age" aria-labelledby="age1"></td>
>> </tr>
>> </tbody>
>> </table>
>> If the table has a common group label, you can even associate it by
>> making the table into a group and using aria-labelledby to assign a
>> common name to it.
>> <h2 id="teamInfo">Please enter the names and ages of people in your
>> team</h2>
>>
>> <table role="group" aria-labelledby="teamInfo">
>> <theader>
>> <tr>
>> <th id="name1">name</th>
>> <th id="age1">age</th>
>> </tr>
>> </theader>
>> <tbody>
>> <tr>
>> <td><input type="text"> aria-labelledby="name1"</td>
>> <td><input type="number" aria-labelledby="age1"></td>
>> </tr>
>>
>> <tr>
>> <td><input type="text" aria-labelledby="name1"></td>
>> <td><input type="age" aria-labelledby="age1"></td>
>> </tr>
>> </tbody>
>>
>>
>>
>>
>> On 1/10/17, JP Jamous < <EMAIL REMOVED> > wrote:
>> > Brandon,
>> >
>> > I agree with Birkir on this one. ARIA will override HTML as far as
>> > screen
>> > readers are concerned.
>> >
>> >
>> >
>> > -----Original Message-----
>> > From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> Behalf
>> > Of Brandon Keith Biggs
>> > Sent: Tuesday, January 10, 2017 7:10 AM
>> > To: WebAIM Discussion List < <EMAIL REMOVED> >
>> > Subject: Re: [WebAIM] Using labels or table headers on nested editable
>> > elements inside data cells?
>> >
>> > Hello,
>> > I didn't explain what I meant well.
>> > These are not layout tables, they are data tables. Here is an example of
>> a
>> > table that looks awesome to a screen reader, but does not pass WCAG:
>> >
>> > <table>
>> > <theader>
>> > <tr>
>> > <th>name</th>
>> > <th>age</th>
>> > </tr>
>> > </theader>
>> > <tbody>
>> > <tr>
>> > <td><input type="text"></td>
>> > <td><input type="number"></td>
>> > </tr>
>> >
>> > <tr>
>> > <td><input type="text"></td>
>> > <td><input type="age"></td>
>> > </tr>
>> > </tbody>
>> > </table>
>> >
>> >
>> > In order to make it pass WCAG, one needs to add labels to each edit box
>> > which would then make the title of the edit box read twice, reducing the
>> > user experience for me as the screen reader user.
>> >
>> >
>> > <table>
>> > <theader>
>> > <tr>
>> > <th>name</th>
>> > <th>age</th>
>> > </tr>
>> > </theader>
>> > <tbody>
>> > <tr>
>> > <td><label for="n1">Name</label><input id="n1" type="text"></td>
>> <td><label
>> > for="a1">Age</label><input id="a1" type="number"></td> </tr>
>> >
>> > <tr>
>> > <td><label for="n2">Name</label><input id="n2" type="text"></td>
>> <td><label
>> > for="a2">Age</label><input id="a2" type="age"></td> </tr> </tbody>
>> </table>
>> >
>> > Thanks,
>> >
>> >
>> > Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>> >
>> > On Tue, Jan 10, 2017 at 1:17 AM, JP Jamous < <EMAIL REMOVED> > wrote:
>> >
>> >> Brandon,
>> >>
>> >> I understand why you like liquid tables. I used to love them because
>> >> you know the browser will adjust everything automatically and no need
>> >> to be concerned with CSS or cross-browser compatibility. However, I do
>> >> not recommend you use table headings in layout tables. Use table
>> >> headings only in data tables.
>> >>
>> >> So you can construct your table without the TH and assign a label to
>> >> each form element. You would pass WCAG, "Label all form elements", and
>> >> ensure proper readability with screen readers.
>> >>
>> >> It's that simple. Layout tables should never contain table headings.
>> >> Just remember that. Problem solved.
>> >>
>> >> -----Original Message-----
>> >> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> >> Behalf Of Brandon Keith Biggs
>> >> Sent: Tuesday, January 10, 2017 2:47 AM
>> >> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> >> Subject: [WebAIM] Using labels or table headers on nested editable
>> >> elements inside data cells?
>> >>
>> >> Hello,
>> >> I am wondering what should be done in this situation.
>> >> If one has a table that is properly using the <th> tags at the top,
>> >> then all cells below will inherit the heading. This means edit boxes
>> >> and whatnot don't need any label because the header already is the
>> label.
>> >> This is how I mostly program tables because it is the easiest and NVDA
>> >> likes it the most. But it fails accessibility tests because the edit
>> >> boxes don't have a label.
>> >>
>> >> If one adds a label to the field then NVDA announces the title of the
>> >> field twice and the edit fields don't pass because they are not unique.
>> >> (This functionality is not just NVDA either).
>> >>
>> >> So what should one do in this situation? For me as an NVDA user, I
>> >> really like edit boxes without labels if tables have their headers
>> >> correct. But the WCAG guidelines don't agree with me.
>> >> What should be done?
>> >> Thanks,
>> >>
>> >> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>> >> >> >> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >>
>> >> >> >> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >>
>> > >> > >> archives at
>> > http://webaim.org/discussion/archives
>> > >> >
>> > >> > >> > >> > >> >
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.