E-mail List Archives
Thread: a11y form use case question
Number of posts in this thread: 5 (In chronological order)
From: Schalk Neethling
Date: Tue, Oct 22 2013 7:31AM
Subject: a11y form use case question
No previous message | Next message →
Hey there all,
I am curious about an a11y use case regarding forms.
Here is the use case:
~ I have a bunch of form elements that are not initially, visually and
functionally, part of the larger form (although they do exist in the
HTML/DOM) but, is 'activated' on an as needed basis.
Do I simply set these to display:none or should I rather hide them only
visually? Because the fields should not be part of the form until they
are activated, I am leaning towards display:none as I also do not want
these fields to be part of the tab order.
Any thoughts or suggestions? Thanks!
--
Kind Regards
Schalk Neethling
Mozilla
From: Jared Smith
Date: Tue, Oct 22 2013 7:59AM
Subject: Re: a11y form use case question
← Previous message | Next message →
Schalk Neethling wrote:
> Do I simply set these to display:none or should I rather hide them only
> visually?
Yes, use display:none for content that you do not want to be viewed,
navigable, or read by a screen reader.
The other concern might be when/how you make the additional form
content visible (e.g., remove display:none). If the new form fields
are revealed with an onblur event from the previous form control, it's
possible that the keyboard focus will have moved beyond the newly
revealed form content. This can cause confusion and can cause the new
form fields to be missed by a screen reader user. Be sure to test, and
if necessary, you can use javascript focus to set focus to the
appropriate field.
Jared
From: Schalk Neethling
Date: Tue, Oct 22 2013 8:15AM
Subject: Re: a11y form use case question
← Previous message | Next message →
Thanks for the feedback Jared. So these fields will be shown when a
checkbox is checked. So, I will move focus to the new field as well as
potentially marking the fieldset that contain these fields as an aria
live region.
On 22/10/2013 15:59, Jared Smith wrote:
> Schalk Neethling wrote:
>
>> Do I simply set these to display:none or should I rather hide them only
>> visually?
>
> Yes, use display:none for content that you do not want to be viewed,
> navigable, or read by a screen reader.
>
> The other concern might be when/how you make the additional form
> content visible (e.g., remove display:none). If the new form fields
> are revealed with an onblur event from the previous form control, it's
> possible that the keyboard focus will have moved beyond the newly
> revealed form content. This can cause confusion and can cause the new
> form fields to be missed by a screen reader user. Be sure to test, and
> if necessary, you can use javascript focus to set focus to the
> appropriate field.
>
> Jared
> > > >
--
Kind Regards
Schalk Neethling
Lead Front-End Engineer
Mozilla
From: Jared Smith
Date: Tue, Oct 22 2013 8:18AM
Subject: Re: a11y form use case question
← Previous message | Next message →
Schalk Neethling wrote:
> So these fields will be shown when a
> checkbox is checked. So, I will move focus to the new field as well as
> potentially marking the fieldset that contain these fields as an aria
> live region.
If the content is revealed when a checkbox is checked, there is no
need to set focus to the new content, assuming the new fields are
after the checkbox location. The user can simply navigate to the new
content using typical interactions (e.g. Tab key).
I can't think of a situation where the live region would be necessary or useful.
Jared
From: Schalk Neethling
Date: Tue, Oct 22 2013 8:38AM
Subject: Re: a11y form use case question
← Previous message | No next message
So, the form field will not immediately follow the checkbox. It is
something like:
[fieldset]
[x] field1 [] label [] label
[] label [x] field5 [] label
field1 [ --------- ]
field5 [ --------- ]
[/fieldset]
Of course the labels will be meaningful ;)
On 22/10/2013 16:18, Jared Smith wrote:
> Schalk Neethling wrote:
>> So these fields will be shown when a
>> checkbox is checked. So, I will move focus to the new field as well as
>> potentially marking the fieldset that contain these fields as an aria
>> live region.
>
> If the content is revealed when a checkbox is checked, there is no
> need to set focus to the new content, assuming the new fields are
> after the checkbox location. The user can simply navigate to the new
> content using typical interactions (e.g. Tab key).
>
> I can't think of a situation where the live region would be necessary or useful.
>
> Jared
> > > >
--
Kind Regards
Schalk Neethling
Lead Front-End Engineer
Mozilla