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)

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Joseph Sherman
Sent: Thursday, June 16, 2016 11:49 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: [WebAIM] complex form questions

Hello all. I've been given a search application to check for accessibility. I am well versed in website audits but not quite as familiar with this type of complex interactive form. As usual it's after it's been built, making life more difficult.

Anyway, the form allows students to search across 25 institutions for classes that meet any variety of criteria. I can't link to it as it's only available on internal network (I can provide code snippets if anyone really wants to help out). A few questions:


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?

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?

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

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?

Thanks in advance for any suggestions.


Joseph