E-mail List Archives
Thread: Navigating listbox with NVDA
Number of posts in this thread: 6 (In chronological order)
From: Sean Keegan
Date: Sat, Sep 23 2017 3:32PM
Subject: Navigating listbox with NVDA
No previous message | Next message →
Hello all,
I have a button element that expands an unordered list of options. This
list is encompassed with a parent <ul> element with tabindex=0 and
role=listbox. The list of options is hidden until the user presses the
button.
Right now, when the button element is activated, the unordered list of
options opens and focus is set to one of the options (it is a list of
countries). A subsequent tab key takes the user out of the list and into
the next form input.
A problem we are encountering is with NVDA+Firefox in that NVDA remains in
browse mode when the unordered list of options opens. Attempting to
navigate with the arrow keys continues moving the user through the page,
not the list. The user must manually invoke NVDA's focus mode in order to
navigate the list.
Is this expected behavior with NVDA in that focus mode must be manually set
to navigate a listbox region of options after being opened?
Running current versions of NVDA and Firefox.
Thanks in advance,
Sean
From: Reinhard Stebner
Date: Sat, Sep 23 2017 4:09PM
Subject: Re: Navigating listbox with NVDA
← Previous message | Next message →
Would it be possible for you to send a sample to test? I would like to see this behavior you are talking about.
From: mhysnm1964
Date: Sat, Sep 23 2017 10:21PM
Subject: Re: Navigating listbox with NVDA
← Previous message | Next message →
Sean, likewise I would like to see a sample code of this UI, so I can test it. What happens if you use Jaws or Voice-Over?
From: Birkir R. Gunnarsson
Date: Sun, Sep 24 2017 11:44AM
Subject: Re: Navigating listbox with NVDA
← Previous message | Next message →
Are you following the ARIA 1.1 authoring practices pattern for listbox?
https://www.w3.org/TR/wai-aria-practices-1.1/
(the <ul> must have role listbox, each <li> has to have a role of
option, assuming there is no active element inside it, you have to
Script the behavior for the arrow keys to navigate between options,
and make sure that focus lands on the first one when user focuses it
witth the keyboard). How do you open the listbox? Is ther a separate
button that, when clicked, opens the listbox and places focus inside
it?
Maybe the menu button pattern would work better (essentially the same
amount of work, just slightly different roles).
NVDA should switch into application mode when focus lands inside an
element with role of listbox, but then you are responsible for all
keyboard navigation and activation inside it, the roles alone do not
give you that functionality.
Which always brings up the classic question, would it be possible to
just use a <select> element instead (I know they are difficult to
style so that is probably why you are not using it)?
On 9/24/17, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = > wrote:
> Sean, likewise I would like to see a sample code of this UI, so I can test
> it. What happens if you use Jaws or Voice-Over?
>
>
From: Sean Keegan
Date: Sun, Sep 24 2017 2:26PM
Subject: Re: Navigating listbox with NVDA
← Previous message | Next message →
Thanks all for the responses. I will see about getting a version up on
CodePen or something.
> Are you following the ARIA 1.1 authoring practices pattern for listbox?
Yes, following these authoring practices. All navigation for arrow keys is
scripted. A button opens the listbox and focus is placed into the listbox
region on the option that had been selected previously (it is a list of
countries and phone prefixes).
JAWS+IE and VoiceOver+Safari both work fine with the current version.
NVDA+Firefox will work, but the user must manually invoke focus mode in
order for the arrow keys to navigate the list. NVDA remains in browse mode
even after activating the button and focus being set into the listbox
region. I had thought NVDA was supposed to switch modes automatically when
focus was placed into a listbox, but was not sure. Thanks for that
clarification.
The only difference I have identified is that the devs chose to create the
listbox with multiple <div> elements with role=listbox and role=option. It
is not ul or li elements with prescribed roles as defined in the ARIA
authoring practices. I have requested a change to ul and li elements to see
if there is a change in behavior.
> Which always brings up the classic question, would it be possible to
> just use a <select> element instead
This is a fork of a jQuery plugin for formatting international telephone
numbers (https://intl-tel-input.com/). The original version had the desired
functionality, but accessibility was no so great. We addressed most
accessibility issues, except ran into the hiccup with NVDA. So, a
combination of styling and functionality is driving this widget.
I will see if I can get a working demo made public.
Thanks again,
Sean
From: Birkir R. Gunnarsson
Date: Sun, Sep 24 2017 2:32PM
Subject: Re: Navigating listbox with NVDA
← Previous message | No next message
Hi
It is quite possible the NVDA is not coded to automatically invoke
application mode when inside an element with role="listbox". Since
listbox is an interactive widget role NVDA should do this.
I recommend filing an issue on NVDA's GitHub page. The best thing
about NvDA is that the developers read and respond to issues, and do
their best to fix issues quickly.
This is particularly good if you can get a publically available
version of this widget out there.
Since ARIA roles override any native syntax it should not matter
whether the base element is a <ul> or >li> or <div> or <span>, so you
shouldn't have to worry about it (but you can try to change it to see
if anything happens, just don't expect it to).
On 9/24/17, Sean Keegan < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks all for the responses. I will see about getting a version up on
> CodePen or something.
>
>> Are you following the ARIA 1.1 authoring practices pattern for listbox?
>
> Yes, following these authoring practices. All navigation for arrow keys is
> scripted. A button opens the listbox and focus is placed into the listbox
> region on the option that had been selected previously (it is a list of
> countries and phone prefixes).
>
> JAWS+IE and VoiceOver+Safari both work fine with the current version.
> NVDA+Firefox will work, but the user must manually invoke focus mode in
> order for the arrow keys to navigate the list. NVDA remains in browse mode
> even after activating the button and focus being set into the listbox
> region. I had thought NVDA was supposed to switch modes automatically when
> focus was placed into a listbox, but was not sure. Thanks for that
> clarification.
>
> The only difference I have identified is that the devs chose to create the
> listbox with multiple <div> elements with role=listbox and role=option. It
> is not ul or li elements with prescribed roles as defined in the ARIA
> authoring practices. I have requested a change to ul and li elements to see
> if there is a change in behavior.
>
>> Which always brings up the classic question, would it be possible to
>> just use a <select> element instead
>
> This is a fork of a jQuery plugin for formatting international telephone
> numbers (https://intl-tel-input.com/). The original version had the desired
> functionality, but accessibility was no so great. We addressed most
> accessibility issues, except ran into the hiccup with NVDA. So, a
> combination of styling and functionality is driving this widget.
>
> I will see if I can get a working demo made public.
>
> Thanks again,
> Sean
> > > > >
--
Work hard. Have fun. Make history.