WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 5 (In chronological order)

From: Alex Hall
Date: Tue, May 31 2016 6:03AM
Subject: Slightly OT: understanding screen reader interaction with Jquery select elements
No previous message | Next message →

Hi list,
This is slightly off topic, possibly, but if anyone will know, it will be
people here. 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. 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? Do they collapse on their own when they
blur? 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.

--
Alex Hall
Automatic Distributors, IT department
= EMAIL ADDRESS REMOVED =

From: Chaals McCathie Nevile
Date: Tue, May 31 2016 8:31AM
Subject: Re: Slightly OT: understanding screen reader interaction with Jquery select elements
← Previous message | Next message →

On Tue, 31 May 2016 14:03:17 +0200, Alex Hall < = EMAIL ADDRESS 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 ADDRESS REMOVED = - - - Find more at http://yandex.com

From: Lucy Greco
Date: Tue, May 31 2016 12:32PM
Subject: Re: Slightly OT: understanding screen reader interaction with Jquery select elements
← Previous message | Next message →

hello: Alex this is a vary good question and i think you should join the
mailing list at
https://groups.google.com/forum/#!forum/blind-bats
if you are doing much more coding whith these kind of problems we are a
group of line people trying to talk thru the ways to do this kind of work
more consistently. please think about joining our group Lucy

Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces


On Tue, May 31, 2016 at 5:03 AM, Alex Hall < = EMAIL ADDRESS REMOVED = > wrote:

> Hi list,
> This is slightly off topic, possibly, but if anyone will know, it will be
> people here. 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. 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? Do they collapse on their own when they
> blur? 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.
>
> --
> Alex Hall
> Automatic Distributors, IT department
> = EMAIL ADDRESS REMOVED =
> > > > >

From: Bryan Garaventa
Date: Mon, Jun 06 2016 12:12AM
Subject: Re: Slightly OT: understanding screen reader interaction with Jquery select elements
← Previous message | Next message →

Hi,
Unfortunately there is no tool in NVDA that allows this type of detection, but if you have the ability to use JAWS however, then yes this is possible.

E.G You can use BX to access the Accessibility Tree to examine the dimensions of the rendered objects there, plus much else besides.

If you have no idea what the Accessibility Tree is, or why this is important, you can get a quick overview by reading the PDF in the GitHub download at
https://github.com/accdc/csun-2015

So the simplest way for a totally blind person to view the Accessibility Tree, is to use a JAWS script called BX, which is a developer toolkit written by Doug Lee.

The installer for this can be downloaded at
http://www.dlee.org/bx/
(Which should be installed while JAWS is running)

The BX User's Guide is available at
http://www.dlee.org/bx/bxman.htm

So, to make this work, first download and install BX.

Then, BX can be activated using the standard Home Row command in JAWS (Windows+Insert+NumPadMinus), or by pressing Insert+Space twice.

Now you can view the Accessibility Tree using JAWS. This works within web pages or outside of them within any native software control. Also this works within web controls using IE, Firefox, and Chrome.

1. Start BX.

2. Press the Apostrophe key (') to open the list of available maps.

3. Press M to open the MSAA Map, or U to open the UIA Map. (Some of the below keystrokes may vary depending on which map is being used)

4. Press Control+F to move BX to the object that has focus, or Control+P to move BX to the object at the current cursor location.

5. Now you can examine the various MSAA or UIA properties that determine accessibility, such as the following:
Press R to hear the object Role.
Press N to hear the object Name.
Press S to hear the object State.
Press D to hear the object Description.
Press V to hear the object Value.
Press L or Shift+L to hear the object dimensions.
And so on. Just press Tab and Shift+Tab to review additional options within each map.

It would be great if NVDA provided something similar, but this is a lot to ask, since I believe Doug has been working on this project for over ten years now.

All the best,
Bryan




Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Alex Hall
Sent: Tuesday, May 31, 2016 5:03 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Slightly OT: understanding screen reader interaction with Jquery select elements

Hi list,
This is slightly off topic, possibly, but if anyone will know, it will be people here. 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. 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? Do they collapse on their own when they blur? 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.

--
Alex Hall
Automatic Distributors, IT department
= EMAIL ADDRESS REMOVED =

From: Alex Hall
Date: Mon, Jun 06 2016 5:17AM
Subject: Re: Slightly OT: understanding screen reader interaction with Jquery select elements
← Previous message | No next message

For the record, NVDA has something that sounds similar, though possibly not as extensive. Move focus to the control in question and hit NVDA-f1. This opens the log viewer with a dump of all the details about the currently focused control--roles, name, ID, UIA information, and more. Plus, it's in a standard text control, so you can easily copy parts to the clipboard if necessary. Again, I've not used the script described below so can't make a full comparison, but this option sounds similar.
> On Jun 6, 2016, at 02:12, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi,
> Unfortunately there is no tool in NVDA that allows this type of detection, but if you have the ability to use JAWS however, then yes this is possible.
>
> E.G You can use BX to access the Accessibility Tree to examine the dimensions of the rendered objects there, plus much else besides.
>
> If you have no idea what the Accessibility Tree is, or why this is important, you can get a quick overview by reading the PDF in the GitHub download at
> https://github.com/accdc/csun-2015
>
> So the simplest way for a totally blind person to view the Accessibility Tree, is to use a JAWS script called BX, which is a developer toolkit written by Doug Lee.
>
> The installer for this can be downloaded at
> http://www.dlee.org/bx/
> (Which should be installed while JAWS is running)
>
> The BX User's Guide is available at
> http://www.dlee.org/bx/bxman.htm
>
> So, to make this work, first download and install BX.
>
> Then, BX can be activated using the standard Home Row command in JAWS (Windows+Insert+NumPadMinus), or by pressing Insert+Space twice.
>
> Now you can view the Accessibility Tree using JAWS. This works within web pages or outside of them within any native software control. Also this works within web controls using IE, Firefox, and Chrome.
>
> 1. Start BX.
>
> 2. Press the Apostrophe key (') to open the list of available maps.
>
> 3. Press M to open the MSAA Map, or U to open the UIA Map. (Some of the below keystrokes may vary depending on which map is being used)
>
> 4. Press Control+F to move BX to the object that has focus, or Control+P to move BX to the object at the current cursor location.
>
> 5. Now you can examine the various MSAA or UIA properties that determine accessibility, such as the following:
> Press R to hear the object Role.
> Press N to hear the object Name.
> Press S to hear the object State.
> Press D to hear the object Description.
> Press V to hear the object Value.
> Press L or Shift+L to hear the object dimensions.
> And so on. Just press Tab and Shift+Tab to review additional options within each map.
>
> It would be great if NVDA provided something similar, but this is a lot to ask, since I believe Doug has been working on this project for over ten years now.
>
> All the best,
> Bryan
>
>
>
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Alex Hall
> Sent: Tuesday, May 31, 2016 5:03 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] Slightly OT: understanding screen reader interaction with Jquery select elements
>
> Hi list,
> This is slightly off topic, possibly, but if anyone will know, it will be people here. 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. 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? Do they collapse on their own when they blur? 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.
>
> --
> Alex Hall
> Automatic Distributors, IT department
> = EMAIL ADDRESS REMOVED =
> > > > > > >