WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: complex form questions

for

From: Moore,Michael (Accessibility) (HHSC)
Date: Jun 16, 2016 11:55AM

Hi Joseph

1) Is there any actual difference between using FOR and ID to associate labels vs using label element is as a container for both the form control and the label text? Any different behavior in various browser and AT, or mobile devices?

To the best of my knowledge both methods work equally well - but since they are using tables to lay out the form if the form field and the label are in different table cells implicit labeling, wrapping the field in the label, will result in invalid html markup.

2) They currently have the form laid out in a bunch of table columns and rows. I know best practice is to use CSS for layout. Is adding role="presentation" to the layout tables sufficient?

As long as there are not any table headers cells it is not even necessary to use the presentation role although without it some user settings in the screen reader may reveal the existence of the table.

a. Also they are using <td height="20px" width="100px"> Is this ok, as I usually recommend using relative rather than absolute units.

This could be a problem for someone who increases the text size.

3) What is the best way to code a search criteria with multiple fields like: Start Time (select from: equals, greater than, less than, between) and then the Time field?

I would use aria-labelledby to associate both the "Start Time" and "select from" labels with the "select from" field and then use aria-labelledby again to associate the time field with the Start Time label. Others may prefer a different implementation.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)