WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender]Instructions inside forms

for

From: Sailesh Panchang
Date: Nov 15, 2019 7:36AM

For longer / complex forms which might also be presented in separate
sections on one page in a single form element, the form sections may
have headings too.
Like most sighted users, screen reader users too would review the
form first before beginning to fill it out.
Now there could be instructions specific to each section too.
In such cases, users might have to switch in and out of forms mode.
The headings and instructions need not be tab-navigable here.
The aria-labelledby / aria-describedby are all good suggestions that
should be used in the appropriate situation.

Thanks,
Sailesh


On 11/15/19, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
> 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.
> > > > >


--
Sailesh Panchang
Principal Accessibility Consultant
Deque Systems Inc
381 Elden Street, Suite 2000, Herndon, VA 20170
Mobile: 571-344-1765