E-mail List Archives
Re: One of these <select> dropdowns is required, but not all
From: Birkir R. Gunnarsson
Date: May 4, 2017 8:13AM
- Next message: Tomlins Diane: "e-magazine - accessibility"
- Previous message: Jonathan Avila: "Re: Query on Text resizing (1.4.4)"
- Next message in Thread: Henry, Michael (IntelliDyne): "Re: One of these
- Previous message in Thread: Henry, Michael (IntelliDyne): "Re: One of these
- View all messages in this Thread
Hey Mike
Re the "required" work around. A screen reader will announce all form
fields with the required attribute as "required".
Once removed, they will stop doing so.
Once the user selects an option from any of the dropdowns in the
section, they will stop hearing "required" on the other fields.
That change does not, in my opinion, constitute a major change of
context, which would require an explicit warning per WCAG 3.2.1/3.2.2
(3.2.2 applies in this case but the definition is the same).
There are two ways to interact with webpages in screen readers, browse
mode and forms mode.
In browse mode you see all text, and you can navigate using arrow keys
or by headings etc. In forms mode the screen reader only announces
things that are either focusable or connected to a focusable element
(such as a label, an element connected using aria-describedby, or a
legend for a fieldset).
Google Leonie Wattsons screen reader modes article (too lazy to find
it myself but it will show up with these terms).
A screen reader user can easily switch between the two modes at any
time (except when role="application" is used, and it should be avoided
in nearly all situations anyway).
Thus, a screen reader user will most likely locate the heading that
mraks the start of a form, or even a section of aform, in browse mode.
If they want to quickly fill in a form, they often use the tab key
(equivalent to forms mode), but if they get confused they will browse
around the form field and look for instructions.
The trick is to place instructions in a predictable location (such as
at the top of the form, or after a heading).
Do not make all information focusable, or ensure user will hear all of
it when tabbing through a form. Screen reader users are used to
digging around a bit, and connecting all form info with focusable
elements can make tem hard to impossible to navigate.
It is a fine balance, and a bit of an art, so don't stress over it.
Make sure absolutely essential info (such as the format of form
field) is associated with focusable elements. Info such as "all field
are required" should be placed at the top of the form, or in a text at
the beginning of that section of the form (especially if the section
starts with a heading.
Good questions.
Cheers
-B
On 5/4/17, Henry, Michael (IntelliDyne) < <EMAIL REMOVED> > wrote:
> Thanks, Birkir.
>
> Yes, there is a message for sighted users that at least one selection is
> required (along with giant "or" blocks in between each <select>). I'll
> repeat that in the sr-only <legend>, making it clear.
>
> In your scenario of marking all as required (via HTML attr) and removing
> with JS, how would you inform the non-sighted user that there was a change?
> Seems a little hairy to me.
> Partially-unrelated question: My understanding was that as people tab
> through a form, they skip non-label instructional text. Is that true? For
> instance, they'd not see the "or" blocks.
>
> (Sorry. I'm very new to this stuff. Trying to learn on the run!)
>
>
> thanks,
>
> Mike
>
> > From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of
> Birkir R. Gunnarsson < <EMAIL REMOVED> >
> Sent: Wednesday, May 3, 2017 2:35 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] One of these <select> dropdowns is required, but not
> all
>
> In my experience aria-required does not work on fieldsets (it does
> work on role="radiogroup"), but it's been awhile since I tested.
> Do you give sighted users any indication that they have to select from
> at least one of the dropdowns?
>
> If so, and if you do it in a legend for a fieldset or just in
> instructional test on the form, I'd say that's sufficient.
> Another thing you could do is to use the HTML required attribute on
> all <select> elements in the section, and have JavaScript remove it
> once user has selected from one of them.
> It iss a bit of a hack, and you'd have to test it, but it has the
> advantage that you are giving all users info and realtime feedback.
>
>
> WebAIM: Web Accessibility E-mail List
> Archives<http://webaim.org/discussion/archives>
> webaim.org
> © 2017 WebAIM. Center for Persons with Disabilities Utah State University
> 6807 Old Main Hill Logan, UT 84322-6807 435.797.7024
>
>
>
> > > > > >
--
Work hard. Have fun. Make history.
- Next message: Tomlins Diane: "e-magazine - accessibility"
- Previous message: Jonathan Avila: "Re: Query on Text resizing (1.4.4)"
- Next message in Thread: Henry, Michael (IntelliDyne): "Re: One of these
- Previous message in Thread: Henry, Michael (IntelliDyne): "Re: One of these
- View all messages in this Thread