E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Joseph Sherman
Date: Thu, Jun 16 2016 10:48AM
Subject: complex form questions
No previous message | Next message →

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

From: Moore,Michael (Accessibility) (HHSC)
Date: Thu, Jun 16 2016 11:55AM
Subject: Re: complex form questions
← Previous message | Next message →

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)

From: _mallory
Date: Thu, Jun 16 2016 1:39PM
Subject: Re: complex form questions
← Previous message | Next message →

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

From: KP
Date: Thu, Jun 16 2016 2:28PM
Subject: Re: complex form questions
← Previous message | Next message →

Ref the height/width. What happens when you use the larger text option in IE ir magnify the page?

Sent from my iPhone

> On 17/06/2016, at 4:48 AM, Joseph Sherman < = EMAIL ADDRESS REMOVED = > 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?
>
> 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
>
> > > >

From: Joseph Sherman
Date: Thu, Jun 16 2016 2:45PM
Subject: Re: complex form questions
← Previous message | Next message →

Changing font size in IE does nothing, perhaps due to using absolute font sizing? Regular zoom works fine in IE . Is that sufficient?
In Firefox zooming text-only or regular zoom works ok.


Joseph

From: Guy Hickling
Date: Thu, Jun 16 2016 5:50PM
Subject: Re: complex form questions
← Previous message | Next message →

Joseph,

For your second question, normally, setting both height and width of a
text container in px units is a definite no-no for accessibility.
Text-only zoom, in any browser that allows it, for instance Firefox,
is a very useful tool for people with poor sight because they can
increase the text size but still keep the whole page within the window
without having to scroll horizontally to read long lines of text, or
other content. (IE11 no longer allows text-only zoom, IE10 did.) The
WCAG specifies allowing upto 200% without corrupting content, but some
users will go as high as their browser will allow.

Unfortunately what happens is that, as the user increases the text
size, the container can only remain the same size if it's dimensions
are in pixels. This means text overflows outside it's container,
overwriting whatever's to the right or below it. This is seen
regularly on all too many sites, where one lot of text overwriting
another lot makes both texts unreadable. (The problem also occurs with
responsive media queries if the media breakpoints are in px units.)

You can set one dimension, usually the width, in px units, but the
other should not be restricted so the box can expand along with the
text, and other items on the screen must also be able to move down to
make way for the expansion, so they mustn't be positioned with px
units either.

If you can zoom to 200% on a particular screen and get away with it
without overwriting anything, perhaps because there is enough empty
space in your containers for the text to expand into, you're lucky,
but this isn't normally the case.

Regards,
Guy Hickling

From: Graham Armfield
Date: Sun, Jun 19 2016 10:54AM
Subject: Re: complex form questions
← Previous message | No next message

​
On Fri, Jun 17, 2016 at 12:50 AM, Guy Hickling < = EMAIL ADDRESS REMOVED = >
wrote:

> (IE11 no longer allows text-only zoom, IE10 did.)


​I'm running IE 11.0.9600 on a Windows 8.1 (64 bit) machine and text-only
zoom is still an option - View > Text Size.

Regards
Graham Armfield

coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>

​