E-mail List Archives
Thread: Tabs and focus
Number of posts in this thread: 7 (In chronological order)
From: Joseph Sherman
Date: Thu, Aug 25 2016 10:57AM
Subject: Tabs and focus
No previous message | Next message →
Question: When using tabs like five items in a horizontal row each with some text content, is it better to jump focus to the content when the user expands or activates the tab or have the user have to go through the other tabs to get to content?
Also, the specs (https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel) say that only the active tab should be in the tab order and users should use arrows to move through tabs. Is this another area when the specs are ahead of user expectations?
Thanks.
Joseph
From: Paul J. Adam
Date: Thu, Aug 25 2016 11:49AM
Subject: Re: Tabs and focus
← Previous message | Next message →
I wrote a blog post on this somewhat recently, http://www.deque.com/blog/a11y-support-series-part-1-aria-tab-panel-accessibility/ <http://www.deque.com/blog/a11y-support-series-part-1-aria-tab-panel-accessibility/>;
In my demo that deviates from the authoring practices I have all the tabs available in the tab order or users can activate the arrow keys to move between tabs.
I don't recommend jumping their focus down to the tab panel because they may want to activate a different tab or read all the tabs before actually moving focus into it.
Paul J. Adam
Accessibility Evangelist
www.deque.com
> On Aug 25, 2016, at 11:57 AM, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
>
> Question: When using tabs like five items in a horizontal row each with some text content, is it better to jump focus to the content when the user expands or activates the tab or have the user have to go through the other tabs to get to content?
>
> Also, the specs (https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel) say that only the active tab should be in the tab order and users should use arrows to move through tabs. Is this another area when the specs are ahead of user expectations?
>
> Thanks.
>
> Joseph
>
> > > >
From: Joseph Sherman
Date: Thu, Aug 25 2016 1:00PM
Subject: Re: Tabs and focus
← Previous message | Next message →
Paul J Adam wrote:
>In my demo that deviates from the authoring practices I have all the tabs
> available in the tab order or users can activate the arrow keys to move
> between tabs.
I looked at the demo using NVDA. Once I'm in the Tabs it goes to forms mode and the arrow key selects the next tab. In order to read the tab panel text I have to manually exit forms mode and arrow down. Is this expected behavior for screen reader users? Also note that the Tab key changes the focus but not the tab panel content, while the arrow keys do both.
>I don't recommend jumping their focus down to the tab panel because they may want to activate a different tab or read all the tabs before actually moving focus into it.
I didn't mean to jump focus on tab focus, but whether it makes sense to jump focus to content onclick.
Thanks.
Joseph
>
> > On Aug 25, 2016, at 11:57 AM, Joseph Sherman
> < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > Question: When using tabs like five items in a horizontal row each with
> some text content, is it better to jump focus to the content when the user
> expands or activates the tab or have the user have to go through the other
> tabs to get to content?
> >
> > Also, the specs (https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel)
> say that only the active tab should be in the tab order and users should use
> arrows to move through tabs. Is this another area when the specs are ahead
> of user expectations?
> >
> > Thanks.
> >
> > Joseph
> >
> > > > > > archives at http://webaim.org/discussion/archives
> > >
> > > http://webaim.org/discussion/archives
>
From: Birkir R. Gunnarsson
Date: Thu, Aug 25 2016 2:47PM
Subject: Re: Tabs and focus
← Previous message | Next message →
Me and a few other blind users did a couple of blogs on tabs:
https://medium.com/@LeonieWatson/danger-testing-accessibility-with-real-people-4515f72db648#.7c2g85xu3
describes the user experience and
https://hackpoets.wordpress.com/2016/05/10/from-html-to-aria-tabs-a-travelog/
talks about the coding and implementation.
We stick to the strictest attern of tabs, which I still think is the
best way to do them.
But sometimes making the tabpanel element focusable (with
tabindex="0") would make sense (it would get screen readers out of
forms mode), and I think when you have 2 or 3 tabs in a tablist, that
keeping individual tabs focusable is ok as longas the currently
selected one is indicated with aria-selected="true".
On 8/25/16, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
> Paul J Adam wrote:
>>In my demo that deviates from the authoring practices I have all the tabs
>> available in the tab order or users can activate the arrow keys to move
>> between tabs.
>
> I looked at the demo using NVDA. Once I'm in the Tabs it goes to forms mode
> and the arrow key selects the next tab. In order to read the tab panel text
> I have to manually exit forms mode and arrow down. Is this expected behavior
> for screen reader users? Also note that the Tab key changes the focus but
> not the tab panel content, while the arrow keys do both.
>
>>I don't recommend jumping their focus down to the tab panel because they
>> may want to activate a different tab or read all the tabs before actually
>> moving focus into it.
>
> I didn't mean to jump focus on tab focus, but whether it makes sense to jump
> focus to content onclick.
>
> Thanks.
>
> Joseph
>
>>
>> > On Aug 25, 2016, at 11:57 AM, Joseph Sherman
>> < = EMAIL ADDRESS REMOVED = > wrote:
>> >
>> > Question: When using tabs like five items in a horizontal row each with
>> some text content, is it better to jump focus to the content when the
>> user
>> expands or activates the tab or have the user have to go through the
>> other
>> tabs to get to content?
>> >
>> > Also, the specs
>> > (https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel)
>> say that only the active tab should be in the tab order and users should
>> use
>> arrows to move through tabs. Is this another area when the specs are
>> ahead
>> of user expectations?
>> >
>> > Thanks.
>> >
>> > Joseph
>> >
>> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >>
>> >> >> at
>> http://webaim.org/discussion/archives
>> > > > > >
--
Work hard. Have fun. Make history.
From: Paul J. Adam
Date: Thu, Aug 25 2016 4:12PM
Subject: Re: Tabs and focus
← Previous message | Next message →
That's expected behavior for NVDA. VoiceOver and TalkBack don't have that issue with tabs or dialogs.
Yes, pressing right/left arrow keys will actually activate the tabs whereas tabbing to the tabs requires to the user to press spacebar to activate.
No I still don't recommend jumping focus after they click the tabs. I usually only recommend focus management for things like modal dialogs, hamburger menus, and maybe form error validation.
Paul J. Adam
Accessibility Evangelist
www.deque.com
> On Aug 25, 2016, at 2:00 PM, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
>
> Paul J Adam wrote:
>> In my demo that deviates from the authoring practices I have all the tabs
>> available in the tab order or users can activate the arrow keys to move
>> between tabs.
>
> I looked at the demo using NVDA. Once I'm in the Tabs it goes to forms mode and the arrow key selects the next tab. In order to read the tab panel text I have to manually exit forms mode and arrow down. Is this expected behavior for screen reader users? Also note that the Tab key changes the focus but not the tab panel content, while the arrow keys do both.
>
>> I don't recommend jumping their focus down to the tab panel because they may want to activate a different tab or read all the tabs before actually moving focus into it.
>
> I didn't mean to jump focus on tab focus, but whether it makes sense to jump focus to content onclick.
>
> Thanks.
>
> Joseph
>
>>
>>> On Aug 25, 2016, at 11:57 AM, Joseph Sherman
>> < = EMAIL ADDRESS REMOVED = > wrote:
>>>
>>> Question: When using tabs like five items in a horizontal row each with
>> some text content, is it better to jump focus to the content when the user
>> expands or activates the tab or have the user have to go through the other
>> tabs to get to content?
>>>
>>> Also, the specs (https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel)
>> say that only the active tab should be in the tab order and users should use
>> arrows to move through tabs. Is this another area when the specs are ahead
>> of user expectations?
>>>
>>> Thanks.
>>>
>>> Joseph
>>>
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>
>> >> >> http://webaim.org/discussion/archives <http://webaim.org/discussion/archives>;
>> > > > >
From: _mallory
Date: Sun, Aug 28 2016 4:46AM
Subject: Re: Tabs and focus
← Previous message | Next message →
On Thu, Aug 25, 2016 at 04:47:47PM -0400, Birkir R. Gunnarsson wrote:
> But sometimes making the tabpanel element focusable (with
> tabindex="0") would make sense (it would get screen readers out of
> forms mode), and I think when you have 2 or 3 tabs in a tablist, that
> keeping individual tabs focusable is ok as longas the currently
> selected one is indicated with aria-selected="true".
Having the panels focusable also helps those of us using keyboard and
we use arrow keys to scroll down. If we can focus (out of the tabs)
to the panel, our arrow keys are returned to us and we can scroll the
page again. This is super-duper-mega-important for those of us who
don't have ginormous cinema-style screens some developers seem to think
everyone has.
Of course if there's a first item in the panel who is normally focusable
then leave it.
_mallory
>
>
>
> On 8/25/16, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
> > Paul J Adam wrote:
> >>In my demo that deviates from the authoring practices I have all the tabs
> >> available in the tab order or users can activate the arrow keys to move
> >> between tabs.
> >
> > I looked at the demo using NVDA. Once I'm in the Tabs it goes to forms mode
> > and the arrow key selects the next tab. In order to read the tab panel text
> > I have to manually exit forms mode and arrow down. Is this expected behavior
> > for screen reader users? Also note that the Tab key changes the focus but
> > not the tab panel content, while the arrow keys do both.
> >
> >>I don't recommend jumping their focus down to the tab panel because they
> >> may want to activate a different tab or read all the tabs before actually
> >> moving focus into it.
> >
> > I didn't mean to jump focus on tab focus, but whether it makes sense to jump
> > focus to content onclick.
> >
> > Thanks.
> >
> > Joseph
> >
> >>
> >> > On Aug 25, 2016, at 11:57 AM, Joseph Sherman
> >> < = EMAIL ADDRESS REMOVED = > wrote:
> >> >
> >> > Question: When using tabs like five items in a horizontal row each with
> >> some text content, is it better to jump focus to the content when the
> >> user
> >> expands or activates the tab or have the user have to go through the
> >> other
> >> tabs to get to content?
> >> >
> >> > Also, the specs
> >> > (https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel)
> >> say that only the active tab should be in the tab order and users should
> >> use
> >> arrows to move through tabs. Is this another area when the specs are
> >> ahead
> >> of user expectations?
> >> >
> >> > Thanks.
> >> >
> >> > Joseph
> >> >
> >> > > >> > > >> > archives at http://webaim.org/discussion/archives
> >> > > >>
> >> > >> > >> at
> >> http://webaim.org/discussion/archives
> >> > > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > >
From: Birkir R. Gunnarsson
Date: Sun, Aug 28 2016 7:15PM
Subject: Re: Tabs and focus
← Previous message | No next message
Good call!
On 8/28/16, _mallory < = EMAIL ADDRESS REMOVED = > wrote:
> On Thu, Aug 25, 2016 at 04:47:47PM -0400, Birkir R. Gunnarsson wrote:
>> But sometimes making the tabpanel element focusable (with
>> tabindex="0") would make sense (it would get screen readers out of
>> forms mode), and I think when you have 2 or 3 tabs in a tablist, that
>> keeping individual tabs focusable is ok as longas the currently
>> selected one is indicated with aria-selected="true".
>
> Having the panels focusable also helps those of us using keyboard and
> we use arrow keys to scroll down. If we can focus (out of the tabs)
> to the panel, our arrow keys are returned to us and we can scroll the
> page again. This is super-duper-mega-important for those of us who
> don't have ginormous cinema-style screens some developers seem to think
> everyone has.
>
> Of course if there's a first item in the panel who is normally focusable
> then leave it.
>
> _mallory
>>
>>
>>
>> On 8/25/16, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
>> > Paul J Adam wrote:
>> >>In my demo that deviates from the authoring practices I have all the
>> >> tabs
>> >> available in the tab order or users can activate the arrow keys to move
>> >> between tabs.
>> >
>> > I looked at the demo using NVDA. Once I'm in the Tabs it goes to forms
>> > mode
>> > and the arrow key selects the next tab. In order to read the tab panel
>> > text
>> > I have to manually exit forms mode and arrow down. Is this expected
>> > behavior
>> > for screen reader users? Also note that the Tab key changes the focus
>> > but
>> > not the tab panel content, while the arrow keys do both.
>> >
>> >>I don't recommend jumping their focus down to the tab panel because they
>> >> may want to activate a different tab or read all the tabs before
>> >> actually
>> >> moving focus into it.
>> >
>> > I didn't mean to jump focus on tab focus, but whether it makes sense to
>> > jump
>> > focus to content onclick.
>> >
>> > Thanks.
>> >
>> > Joseph
>> >
>> >>
>> >> > On Aug 25, 2016, at 11:57 AM, Joseph Sherman
>> >> < = EMAIL ADDRESS REMOVED = > wrote:
>> >> >
>> >> > Question: When using tabs like five items in a horizontal row each
>> >> > with
>> >> some text content, is it better to jump focus to the content when the
>> >> user
>> >> expands or activates the tab or have the user have to go through the
>> >> other
>> >> tabs to get to content?
>> >> >
>> >> > Also, the specs
>> >> > (https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel)
>> >> say that only the active tab should be in the tab order and users
>> >> should
>> >> use
>> >> arrows to move through tabs. Is this another area when the specs are
>> >> ahead
>> >> of user expectations?
>> >> >
>> >> > Thanks.
>> >> >
>> >> > Joseph
>> >> >
>> >> > >> >> > >> >> > archives at http://webaim.org/discussion/archives
>> >> > >> >>
>> >> >> >> >> >> archives
>> >> at
>> >> http://webaim.org/discussion/archives
>> >> >> > >> > >> > >> > >> >
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> >> > > > > >
--
Work hard. Have fun. Make history.