WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Brandon Keith Biggs
Date: Jan 10, 2017 6:51AM

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.
> > > > >