WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Navigating listbox with NVDA

for

From: Sean Keegan
Date: Sep 24, 2017 2:26PM

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