WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Slightly OT: understanding screen reader interaction with Jquery select elements

for

From: Chaals McCathie Nevile
Date: May 31, 2016 8:31AM

On Tue, 31 May 2016 14:03:17 +0200, Alex Hall < <EMAIL REMOVED> > wrote:

> Hi list,
> This is slightly off topic,

Not really

> I was told last week by a sighted person that the two select
> lists in my form don't close when you click outside of them (likely
> explaining why onChange never fires).

> What I'm wondering, though, is how I could ever have known that.

Hmm. Without asking a sighted friend, it might indeed be tricky :(

> I use NVDA, and it seems to interact with select lists just fine;
> it reads the options as I arrow, and reads the selected option when
> I tab over it again. I never knew there was a problem.
> In fact, the collapsed list is a visual blank, but NVDA reads an option
> for me, so I didn't know that was a problem either.
>
> Visually, how do these things usually work? Do users click them, click
> the option, and click outside of them?

The normal thing with an HTML select is that you click on it, and the list
opens up, and then you click on something in the list and it closes again
with that thing selected.

The list might well show a visual blank, for example because there is a
blank default option, with a label element associating a label.

> Do they collapse on their own when they blur?

In general yes - if you don't want to change the selection, you click
outside the list and it collapses and keeps whatever was already selected.

> It seems that Jquery messes with the normal setup for these, so I'll
> have to re-create it, but I don't know exactly what to re-create.

> Thanks for any explanations, and I hope this has made sense.

If what I answered makes sense, then yes…

cheers

--
Charles McCathie Nevile - web standards - CTO Office, Yandex
<EMAIL REMOVED> - - - Find more at http://yandex.com