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 4:57AM

You can combine a table with aria-labelledby.
See section 5 (5th h2 heading) of
http://mars.dequecloud.com/demo/form-markup.htm
For visually impaired users it is good practice to keep the label
close to the form fieled (because else it floats off the screen in
large magnification)


On 1/10/17, 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/>;
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.