E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 15 (In chronological order)

From: Brian Lovely
Date: Thu, Nov 14 2019 10:46AM
Subject: Instructions inside forms
No previous message | Next message →

A non-semantic container of instructions that don't relate to any
individual input are hard to discover because the screen reader has
switched into forms mode. I saw a technique where the element is provided
with a role of document and tabindex of zero. It didn't work too well when
I tested it without the tabindex, but to me this breaks the "semantics" of
only actionable elements being in the focus order.

Does anyone have any suggestions about making instructions in a form more
discoverable?

--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Colin Osterhout
Date: Thu, Nov 14 2019 10:49AM
Subject: Re: Instructions inside forms
← Previous message | Next message →

Would the "aria-describedby" attribute
<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute>
be appropriate here?

Colin

On Thu, Nov 14, 2019 at 8:46 AM Brian Lovely via WebAIM-Forum <
= EMAIL ADDRESS REMOVED = > wrote:

> A non-semantic container of instructions that don't relate to any
> individual input are hard to discover because the screen reader has
> switched into forms mode. I saw a technique where the element is provided
> with a role of document and tabindex of zero. It didn't work too well when
> I tested it without the tabindex, but to me this breaks the "semantics" of
> only actionable elements being in the focus order.
>
> Does anyone have any suggestions about making instructions in a form more
> discoverable?
>
> --
> *Brian Lovely*
> Capital One Digital Accessibility
> 804.389.1064
>
> >
>
>
> The information contained in this e-mail is confidential and/or
> proprietary to Capital One and/or its affiliates and may only be used
> solely in performance of work or services for Capital One. The information
> transmitted herewith is intended only for use by the individual or entity
> to which it is addressed. If the reader of this message is not the intended
> recipient, you are hereby notified that any review, retransmission,
> dissemination, distribution, copying or other use of, or taking of any
> action in reliance upon this information is strictly prohibited. If you
> have received this communication in error, please contact the sender and
> delete the material from your computer.
>
>
>
> > > > >


--
Colin Osterhout
Website Coordinator, University of Alaska Southeast
= EMAIL ADDRESS REMOVED =
907-796-6576

For fastest response for your web needs, please email
= EMAIL ADDRESS REMOVED = .

<http://uas.alaska.edu/>;
[image: Like UAS on Facebook] <https://facebook.com/UASALASKA>
[image: Follow along with UAS on Instagram]
<https://www.instagram.com/uasoutheast/>
[image: Follow UAS on Twitter] <https://twitter.com/uasoutheast>

From: Brian Lovely
Date: Thu, Nov 14 2019 11:09AM
Subject: Re: [External Sender] Instructions inside forms
← Previous message | Next message →

I don't think so, since there's nothing to put the attribute on. The
instructions are for the form, not for any specific input, and the form
element itself only triggers forms mode, it doesn't announce.

The document role seemed promising at first when I was reading about it on
the Mozilla Web Docs site, but I'm not sure what I think.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role


On Thu, Nov 14, 2019 at 12:50 PM Colin Osterhout < = EMAIL ADDRESS REMOVED = >
wrote:

> Would the "aria-describedby" attribute
> <https://urldefense.com/v3/__https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MAogqSfXuQ$>
> be appropriate here?
>
> Colin
>
> On Thu, Nov 14, 2019 at 8:46 AM Brian Lovely via WebAIM-Forum <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> A non-semantic container of instructions that don't relate to any
>> individual input are hard to discover because the screen reader has
>> switched into forms mode. I saw a technique where the element is provided
>> with a role of document and tabindex of zero. It didn't work too well when
>> I tested it without the tabindex, but to me this breaks the "semantics" of
>> only actionable elements being in the focus order.
>>
>> Does anyone have any suggestions about making instructions in a form more
>> discoverable?
>>
>> --
>> *Brian Lovely*
>> Capital One Digital Accessibility
>> 804.389.1064
>>
>> >>
>>
>>
>> The information contained in this e-mail is confidential and/or
>> proprietary to Capital One and/or its affiliates and may only be used
>> solely in performance of work or services for Capital One. The information
>> transmitted herewith is intended only for use by the individual or entity
>> to which it is addressed. If the reader of this message is not the intended
>> recipient, you are hereby notified that any review, retransmission,
>> dissemination, distribution, copying or other use of, or taking of any
>> action in reliance upon this information is strictly prohibited. If you
>> have received this communication in error, please contact the sender and
>> delete the material from your computer.
>>
>>
>>
>> >> >> <https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MAqMt0B9mA$>
>> >> <https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MArpDf8YLQ$>
>> >>
>
>
> --
> Colin Osterhout
> Website Coordinator, University of Alaska Southeast
> = EMAIL ADDRESS REMOVED =
> 907-796-6576
>
> For fastest response for your web needs, please email
> = EMAIL ADDRESS REMOVED = .
>
>
> <https://urldefense.com/v3/__http://uas.alaska.edu/__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MApCBnsBPQ$>
> [image: Like UAS on Facebook]
> <https://urldefense.com/v3/__https://facebook.com/UASALASKA__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MAq_4pUvtw$>
> [image: Follow along with UAS on Instagram]
> <https://urldefense.com/v3/__https://www.instagram.com/uasoutheast/__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MAoe1KIx0Q$>
> [image: Follow UAS on Twitter]
> <https://urldefense.com/v3/__https://twitter.com/uasoutheast__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MAql9gjWrQ$>
>


--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Tyler Shepard
Date: Thu, Nov 14 2019 2:49PM
Subject: Re: [External Sender] Instructions inside forms
← Previous message | Next message →

So you are looking for something that says this is a form please fill out all fields marked with  * that kind of thing?

On Nov 14, 2019 10:09 AM, Brian Lovely via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
>
> I don't think so, since there's nothing to put the attribute on. The
> instructions are for the form, not for any specific input, and the form
> element itself only triggers forms mode, it doesn't announce.
>
> The document role seemed promising at first when I was reading about it on
> the Mozilla Web Docs site, but I'm not sure what I think.
>
> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role
>
>
> On Thu, Nov 14, 2019 at 12:50 PM Colin Osterhout < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > Would the "aria-describedby" attribute
> > <https://urldefense.com/v3/__https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MAogqSfXuQ$>
> > be appropriate here?
> >
> > Colin
> >
> > On Thu, Nov 14, 2019 at 8:46 AM Brian Lovely via WebAIM-Forum <
> > = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> A non-semantic container of instructions that don't relate to any
> >> individual input are hard to discover because the screen reader has
> >> switched into forms mode. I saw a technique where the element is provided
> >> with a role of document and tabindex of zero. It didn't work too well when
> >> I tested it without the tabindex, but to me this breaks the "semantics" of
> >> only actionable elements being in the focus order.
> >>
> >> Does anyone have any suggestions about making instructions in a form more
> >> discoverable?
> >>
> >> --
> >> *Brian Lovely*
> >> Capital One Digital Accessibility
> >> 804.389.1064
> >>
> >> > >>
> >>
> >>
> >> The information contained in this e-mail is confidential and/or
> >> proprietary to Capital One and/or its affiliates and may only be used
> >> solely in performance of work or services for Capital One. The information
> >> transmitted herewith is intended only for use by the individual or entity
> >> to which it is addressed. If the reader of this message is not the intended
> >> recipient, you are hereby notified that any review, retransmission,
> >> dissemination, distribution, copying or other use of, or taking of any
> >> action in reliance upon this information is strictly prohibited. If you
> >> have received this communication in error, please contact the sender and
> >> delete the material from your computer.
> >>
> >>
> >>
> >> > >> > >> <https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MAqMt0B9mA$>
> >> > >> <https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MArpDf8YLQ$>
> >> > >>
> >
> >
> > --
> > Colin Osterhout
> > Website Coordinator, University of Alaska Southeast
> > = EMAIL ADDRESS REMOVED =
> > 907-796-6576
> >
> > For fastest response for your web needs, please email
> > = EMAIL ADDRESS REMOVED = .
> >
> >
> > <https://urldefense.com/v3/__http://uas.alaska.edu/__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MApCBnsBPQ$>
> > [image: Like UAS on Facebook]
> > <https://urldefense.com/v3/__https://facebook.com/UASALASKA__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MAq_4pUvtw$>
> > [image: Follow along with UAS on Instagram]
> > <https://urldefense.com/v3/__https://www.instagram.com/uasoutheast/__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MAoe1KIx0Q$>
> > [image: Follow UAS on Twitter]
> > <https://urldefense.com/v3/__https://twitter.com/uasoutheast__;!0Ns9_1dOjwg!ISNDynGrm24eNY8SOsiJ9cQwiA8yD6H6_fAbw_onwrmYHQMHxsYq10RkQiA_MAql9gjWrQ$>
> >
>
>
> --
> *Brian Lovely*
> Capital One Digital Accessibility
> 804.389.1064
>
> >
>
>
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
>
>
>
> > > >

From: Patrick H. Lauke
Date: Thu, Nov 14 2019 5:35PM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | Next message →

Until the users reach the first form control, they won't be in forms
mode (if they're just navigating the page normally with reading
keys/virtual cursor, rather than jumping directly to the first form
field). So generally, there shouldn't be a need to specifically tie any
instructions to the form in the first place.

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

From: glen walker
Date: Thu, Nov 14 2019 7:34PM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | Next message →

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.

From: Birkir R. Gunnarsson
Date: Fri, Nov 15 2019 5:48AM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | Next message →

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 ADDRESS 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.

From: Sailesh Panchang
Date: Fri, Nov 15 2019 7:36AM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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

From: Brian Lovely
Date: Fri, Nov 15 2019 7:39AM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | Next message →

Yeah, the instructions are more about the form itself, rather than anything
that can be tied to a specific input, or arguably converted into individual
error message (like a "must not be blank" type of error). These
instructions are more along the lines of "you must complete this form by XX
date" or "Depending on your answers, we will do X or Y" or something like
that.

That's what's so tricky about this. The info is important, but relates to
the form as a whole, so it's less obvious how to make it discoverable.
...unless the Mozilla-suggested role="document" technique is solid.

On Fri, Nov 15, 2019 at 7:48 AM Birkir R. Gunnarsson <
= EMAIL ADDRESS 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 ADDRESS 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.
> > > > > https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!PwqzZulE9BGFOYqhR9cN1X6hLL0cH7Bf_i2mHgpEZcGqxwUA1ceqUZOfrQUhAGPCmKXZRg$
> > List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!PwqzZulE9BGFOYqhR9cN1X6hLL0cH7Bf_i2mHgpEZcGqxwUA1ceqUZOfrQUhAGPIB_T02A$
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!PwqzZulE9BGFOYqhR9cN1X6hLL0cH7Bf_i2mHgpEZcGqxwUA1ceqUZOfrQUhAGPCmKXZRg$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!PwqzZulE9BGFOYqhR9cN1X6hLL0cH7Bf_i2mHgpEZcGqxwUA1ceqUZOfrQUhAGPIB_T02A$
> >


--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Patrick H. Lauke
Date: Fri, Nov 15 2019 9:48AM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | Next message →

On 15/11/2019 14:39, Brian Lovely via WebAIM-Forum wrote:
[...]
> That's what's so tricky about this. The info is important, but relates to
> the form as a whole, so it's less obvious how to make it discoverable.

As said, it's discoverable when screen reader users navigate/read
through the page before getting to the form. SR users don't just jump
straight to whatever first form field is on a page, generally (I get the
feeling that there's perhaps an underlying assumption here that it needs
to be focusable as otherwise SR users will never discover something,
which is not the case).

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

From: Brian Lovely
Date: Fri, Nov 15 2019 10:06AM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | Next message →

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.

On Fri, Nov 15, 2019 at 11:48 AM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:

> On 15/11/2019 14:39, Brian Lovely via WebAIM-Forum wrote:
> [...]
> > That's what's so tricky about this. The info is important, but relates to
> > the form as a whole, so it's less obvious how to make it discoverable.
>
> As said, it's discoverable when screen reader users navigate/read
> through the page before getting to the form. SR users don't just jump
> straight to whatever first form field is on a page, generally (I get the
> feeling that there's perhaps an underlying assumption here that it needs
> to be focusable as otherwise SR users will never discover something,
> which is not the case).
>
> P
> --
> Patrick H. Lauke
>
>
> https://urldefense.com/v3/__http://www.splintered.co.uk__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk1UiRxlCA$
> |
> https://urldefense.com/v3/__https://github.com/patrickhlauke__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk1G1YnAew$
>
> https://urldefense.com/v3/__http://flickr.com/photos/redux/__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk1wrR-scA$
> |
> https://urldefense.com/v3/__http://redux.deviantart.com__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk1Bm0LG_w$
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk1Ghwy32g$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk35FNa6ew$
> >


--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Brian Lovely
Date: Fri, Nov 15 2019 10:07AM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | Next message →

...and perhaps I should have added that these instructions then get skipped
when the screen reader switches into forms mode.

On Fri, Nov 15, 2019 at 12:06 PM Brian Lovely < = EMAIL ADDRESS REMOVED = >
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.
>
> On Fri, Nov 15, 2019 at 11:48 AM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> On 15/11/2019 14:39, Brian Lovely via WebAIM-Forum wrote:
>> [...]
>> > That's what's so tricky about this. The info is important, but relates
>> to
>> > the form as a whole, so it's less obvious how to make it discoverable.
>>
>> As said, it's discoverable when screen reader users navigate/read
>> through the page before getting to the form. SR users don't just jump
>> straight to whatever first form field is on a page, generally (I get the
>> feeling that there's perhaps an underlying assumption here that it needs
>> to be focusable as otherwise SR users will never discover something,
>> which is not the case).
>>
>> P
>> --
>> Patrick H. Lauke
>>
>>
>> https://urldefense.com/v3/__http://www.splintered.co.uk__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk1UiRxlCA$
>> |
>> https://urldefense.com/v3/__https://github.com/patrickhlauke__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk1G1YnAew$
>>
>> https://urldefense.com/v3/__http://flickr.com/photos/redux/__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk1wrR-scA$
>> |
>> https://urldefense.com/v3/__http://redux.deviantart.com__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk1Bm0LG_w$
>> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>> >> >> https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk1Ghwy32g$
>> List archives at
>> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!NvNp7RQTwVUt27V7CljGV8vENllzZ-jb9Z3k6z6_dzK89NqtCFhSrbVIuPU_Mk35FNa6ew$
>> >>
>
>
> --
> *Brian Lovely*
> Capital One Digital Accessibility
> 804.389.1064
>


--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Patrick H. Lauke
Date: Fri, Nov 15 2019 10:09AM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Fri, Nov 15 2019 10:23AM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | Next message →

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 ADDRESS 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.

From: Brian Lovely
Date: Fri, Nov 15 2019 10:30AM
Subject: Re: [External Sender]Instructions inside forms
← Previous message | No next message

Thanks all, that's very useful.

On Fri, Nov 15, 2019 at 12:23 PM Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> 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 ADDRESS 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
> >
> >
> https://urldefense.com/v3/__http://www.splintered.co.uk__;!0Ns9_1dOjwg!PIo0iZUbijVzO4ukCE2kHuN6dmxtU_VXibL6Drp19-W5HH7Ak3yqhg1FF_l3P2k-605-cA$
> |
> https://urldefense.com/v3/__https://github.com/patrickhlauke__;!0Ns9_1dOjwg!PIo0iZUbijVzO4ukCE2kHuN6dmxtU_VXibL6Drp19-W5HH7Ak3yqhg1FF_l3P2lR85cTRg$
> >
> https://urldefense.com/v3/__http://flickr.com/photos/redux/__;!0Ns9_1dOjwg!PIo0iZUbijVzO4ukCE2kHuN6dmxtU_VXibL6Drp19-W5HH7Ak3yqhg1FF_l3P2lyqma79A$
> |
> https://urldefense.com/v3/__http://redux.deviantart.com__;!0Ns9_1dOjwg!PIo0iZUbijVzO4ukCE2kHuN6dmxtU_VXibL6Drp19-W5HH7Ak3yqhg1FF_l3P2kd7UJTUA$
> > twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > > https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!PIo0iZUbijVzO4ukCE2kHuN6dmxtU_VXibL6Drp19-W5HH7Ak3yqhg1FF_l3P2ntfoWgrg$
> > List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!PIo0iZUbijVzO4ukCE2kHuN6dmxtU_VXibL6Drp19-W5HH7Ak3yqhg1FF_l3P2kQkAV2rQ$
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!PIo0iZUbijVzO4ukCE2kHuN6dmxtU_VXibL6Drp19-W5HH7Ak3yqhg1FF_l3P2ntfoWgrg$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!PIo0iZUbijVzO4ukCE2kHuN6dmxtU_VXibL6Drp19-W5HH7Ak3yqhg1FF_l3P2kQkAV2rQ$
> >


--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.