E-mail List Archives
Re: [External Sender]Instructions inside forms
From: Birkir R. Gunnarsson
Date: Nov 15, 2019 10:23AM
- Next message: Brian Lovely: "Re: [External Sender]Instructions inside forms"
- Previous message: Patrick H. Lauke: "Re: [External Sender]Instructions inside forms"
- Next message in Thread: Brian Lovely: "Re: [External Sender]Instructions inside forms"
- Previous message in Thread: Patrick H. Lauke: "Re: [External Sender]Instructions inside forms"
- View all messages in this Thread
Patrick is correct (it happens quite often that he is).
The form> elemet does not trigger a particular screen reader behavior,
such as switching to forms mode, those behaviors are tied to
individual form controls (e.g. radio buttons or text inputs trigger
forms mode / application mode in screen readers).
The document rol doesn't do anything other than forcing browse mode
when encountered with a screen reader and should really only be used
in combination with the application role that forces forms/application
mode (and the use cases for such a combo are rare outside of a highly
scripted interactive interface like a spreadsheet).
I think the solution is a lot less complicated:
Makesure the instructions are at the top of the form, before the
interactive elements.
Start the form (or the instruction section within the form) with a
heading with text such as "important information".
That's all you need to do.
If you really need to make sure the user has read the instructions,
put a checkbox at the end of the form with a label such as, "I agree I
have read the instructions".
You can use aria-describedby on that checkbox to the element with the
important instructions.
<form>
<h3>Important information</h3>
<p Id="x">You must specify the seat selection before your flight to
guarantee your seat selection. Selecting your seat after the flight is
pretty useless anyway.</p>
...the form
....
<label for="readIt">I have read the instructions at the top of the form</label>
<input id="readIt" type="checkbox" aria-describedby="x">
<button>Submit reservation</button>
</form>
On 11/15/19, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
> On 15/11/2019 17:06, Brian Lovely via WebAIM-Forum wrote:
>> These things are generally put inside the open and close form tags (in my
>> experience), which is where my whole discoverability dilemma comes from.
>> If
>> they were simple text nodes in a non-semantic container outside the form
>> I
>> wouldn't have a problem.
>
> Not explicitly checked all combinations of browser/AT, but screen
> readers (from memory) don't switch into forms mode when they first enter
> a <form>, but upon entering the first form control, so don't quite see
> this as a problem?
>
> 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
> > > > >
--
Work hard. Have fun. Make history.
- Next message: Brian Lovely: "Re: [External Sender]Instructions inside forms"
- Previous message: Patrick H. Lauke: "Re: [External Sender]Instructions inside forms"
- Next message in Thread: Brian Lovely: "Re: [External Sender]Instructions inside forms"
- Previous message in Thread: Patrick H. Lauke: "Re: [External Sender]Instructions inside forms"
- View all messages in this Thread