WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible form field hint text

for

From: Patrick H. Lauke
Date: Jun 24, 2013 7:25AM

On 24/06/2013 13:38, Denise wrote:
> Hi, I am trying to make my form more accessible and could really use
> some advice, and guidance as to best practice.
>
> Currently we have some hint/help text that is displayed (using
> Javascript to set the style to block) when the input gets focus. The
> help text is in a div after the input field.
>
> In some cases there are two input fields next to each other e.g. for
> a date but both sets of hints are after both inputs, i.e. input
> month, input year, help text month, help text year. This means that
> the help text month can't be read by the screen reader using the
> keyboard as the focus goes to the year input.
>
> My main concerns: * reliance on Javascript

I'd say have it so it's shown by default, and on page load (if JS is
present) hide it and hook in the show/hide functionality. Or just have
it always visible.

> * no association between the help text and the form input

I'd suggest using aria-describedby to include additional label info to a
field, e.g.

<label for="foo">Primary label</label>
<input type="text" id="foo" name="bar" aria-describedby="foo-additional">
<div id="foo-additional">Secondary label/instructions</div>

This should work in all current screenreaders. Note though that IE8
doesn't seem to support this ARIA attribute. It also doesn't support
multiple IDs on aria-labelledby, so that approach can't be used either.
In worst case, use a technique that accessibly hides content via CSS,
and add that info to the primary label itself, e.g.

<label for="foo">Primary label<span class="hidden-accessible"> -
secondary label/instructions</label>
<input type="text" id="foo" name="bar">

> * screen reader not being able to read out help text for first of
> multiple input when using keyboard due to positioning in html * does
> a screen reader user expect to switch between focus mode to text
> reading mode after each input?

Ideally, no. Once a user is in forms mode, they should get all relevant
info while being in that mode through correct association of the form
controls with any labels and instructions.


--
Patrick H. Lauke