WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Navigating listbox with NVDA

for

From: Birkir R. Gunnarsson
Date: Sep 24, 2017 2:32PM

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 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.