WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Navigating listbox with NVDA

for

From: Birkir R. Gunnarsson
Date: Sep 24, 2017 11:44AM

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 REMOVED> < <EMAIL 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?
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Sean Keegan
> Sent: Sunday, 24 September 2017 7:33 AM
> To: <EMAIL REMOVED>
> Subject: [WebAIM] Navigating listbox with NVDA
>
> 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
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.