WebAIM - Web Accessibility In Mind

E-mail List Archives

WCAG 2.0 1.4.4 relating to form elements

for

From: Patrick H. Lauke
Date: Dec 21, 2017 6:24PM

On 21/12/2017 20:10, Angela French wrote:
> Hello,
> I'm curious: is there a way to dynamically change the size of form elements based on the zoom level a person is using in their browser? Is there even a way to programmatically assess what zoom a person is using.
>
> This questions is based on an app we just had evaluated for accessibility that received a ding (WCAG 2.0 1.4.4) because a particularly long value in a drop down choice was truncated in the form field (not all viewable) after the select was made. The browser DOES make the drop down list wide enough to view the selection list when the drop down list is opened. This feels more like a usability issue to me and not an accessibility issue per se - something I imagine 200+ zoom level users probably frequently encounter.

Is there a chance that two or more values in the select are long and
have the same text at the start / only get distinguished later on in the
text, and that the select (when closed again) is ambiguous for users,
who are then not able to determine what value was in fact selected? Or
even when it's just one value, is it clear enough for somebody who comes
across the closed select with that particular value selected what it
actually is, without having to open it to see the full width select
dropdown? If so, this does feel like it's at least in part an
accessibility issue...

Any way the select itself can be made wider? Alternatively, some
JavaScript that writes out the selected value in full somewhere nearby?
Or, depending on the number of options, turns it into a set of radio
buttons instead?

For what it's worth, you can't detect zoom level, but you can run
JS-based media queries to work out what the viewport width is (which
changes based not only on browser window size, but also based on zoom
level), as well as checking for default font size (a bit more
laboriously, admittedly).

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke