WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible form field hint text

for

From: Birkir R. Gunnarsson
Date: Jun 24, 2013 7:15AM

Hi

aria-describedby is definitely your friend in this type of situation.
You can associate the hint text with the input field using
aria-descirbedby, and most, if not all, screen readers will read it
automatically when that field receives focus (well, older versions of
the major screen readers still will not do this, just keep that in
mind).
You could create a tabindex on the helptext so a user tabbing through
the form will actually read it, though you have to manipulate the
tabindex to come before the edit field,, as an alternative (or along
with thte aria-descirbedby), but it might confuse some users since
they associated tabable item with an actionable item.
Finally you could splice the description into the label for the input
field, for instance, by hiding it off-screen with css but then adding
it with a span with class invissible to the form label. That way the
text is read out to screen reader users, but it does not create any
additional visual distractions.
(remember to hide text you must position it off-screen,
vissibility:hidden or display:none hides text for everyone, including
screen readers).
Most screen reader users do get out of tabbing/forms mode when
exploring and filling in forms, and look around the field with arrow
keys if something is not clear.
hth
-B

On 6/24/13, Denise < <EMAIL REMOVED> > 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
> * no association between the help text and the form input
> * 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?
> * should we just have one help text for the month/year combined.
>
> Thanks in advance for your help
>
>
> > > >