WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: JP Jamous
Date: Jan 10, 2017 2:17AM

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/>;