WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: complex form questions

for

From: _mallory
Date: Jun 16, 2016 1:39PM

On Thu, Jun 16, 2016 at 04:48:51PM +0000, Joseph Sherman wrote:
> 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?
>
Dragon 13 doesn't seem to let users say the label name to focus on
the input when the label just wraps the input. This doesn't make it
100% inaccessible, users can say TAB to get from the previous input,
but it's annoying.
There was earlier on the WebAIM mailing list someone having issues
on iOS, but I don't remember if that was a verified bug, if it was
Safari, or VO.

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

I prefer relative units myself, but you can check if the 20px ends up
getting overridden anyway-- play with (using the browser devtools)
adding more/longer text, texts that wrap and don't wrap, browser
magnification, and try setting your OS application font settings
larger (as well as in the browser settings, these basically change
the default 100% font size from "16px" on most OSes to something
larger). If you can't break stuff doing all this then while it's
still not great, it probably will be okay.
>
> 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 like a fieldset using the legend to hold the question so each
indivual input can have its own dedicated label.

If graphic design meets browser legend styling in a dark alley
then there's an option of using a p or span or something with
an id, and aria-labelledby-ing those inputs to it.

Just some ideas, I'm not saying they are the best.

cheers,
_mallory