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