WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender]Instructions inside forms

for

From: Birkir R. Gunnarsson
Date: Nov 15, 2019 5:48AM

1. Put general instructions related to the form as a whole at the top
of the form (before the first form field)
2. Use aria-describedby to tie instructions specific to a form field
(such as instructions on the input format) to that form field (if
possible give users some flexibility on entering things like dates and
phone numbers by autoformatting the input).

This should be sufficient for most regular forms.


On 11/14/19, glen walker < <EMAIL REMOVED> > wrote:
> You can still use aria-labelledby (or aria-describedby) on the <form>
> itself. The following works ok on firefox and chrome with nvda and jaws.
>
> <div id="instructions">
> <p>alpha</p>
> <p>beta</p>
> </div>
>
> <form aria-labelledby="instructions">
> <label>name<input></label>
> <label>address<input></label>
> </form>
>
> When I tab into the form, before the "name" input is read, the instructions
> are read. If my focus were after the form and I navigated backwards, the
> instructions are again read when I enter the form before the "address"
> input is read.
> > > > >


--
Work hard. Have fun. Make history.