Review scrollable listbox example

[mcking65]

The scrollable listbox example
developed for issue #123 is ready for task force review.

Reviews Requested as of October 6, 2017

While the practices task force encourages feedback from anyone in the web and accessibility engineering communities, peer review is requested from the following task force members:

• Review by Ann (@annabbott)
• Review by James (@jnurthen)
• Review by Siri (@shirsha)

[annabbott]

In the Keyboard Support table, only "Down Arrow" has a bullet. Suggest removing that bullet.

[shirsha]

Tested in FF browser with NVDA screen reader:

• In the read only mode when screen reader encounter the listbox, screen reader announces the box as list instead of listbox even though there is role of listbox.
• As there is tabindex of "0" on the box, screen reader announces it as clickable, when the user selects enter, he/she can navigate through the list using up / down arrow. But user is not aware that they can make a selection here, it reads as a normal list items in an unordered list.
  Suggest to add aria-describedby to convey the information regarding the ability to select an item in the list. This will help the screen reader user if he/she navigates directly to the box by tabbing to it .

Tested in IE using JAWS:

• JAWS announces it as listbox but screen reader user is unable to navigate through the list. The only way the user can navigate through the list in the read only mode it to select tab (instead of selecting enter to switch to forms mode) and then use up/down arrow .
  JAWS does not read that it is clickable when it encounters the box.

[mcking65]

Siri, thank you for the review and testing!

@shirsha commented:

Tested in FF browser with NVDA screen reader:

In the read only mode when screen reader encounter the listbox, screen reader announces the box as list instead of listbox even though there is role of listbox.
As there is tabindex of "0" on the box, screen reader announces it as clickable, when the user selects enter, he/she can navigate through the list using up / down arrow. But user is not aware that they can make a selection here, it reads as a normal list items in an unordered list.

This is an NVDA design decision. They do not have to use the exact name of the role. They provide information to their users on how to use list widgets. And, if they like, they can also provide dynamic instructions. Web page authors should not provide instructions unless the design does something outside normal patterns that the screen reader cannot derive from the semantics provided by the ARIA.

Tested in IE using JAWS:

• JAWS announces it as listbox but screen reader user is unable to navigate through the list. The only way the user can navigate through the list in the read only mode it to select tab (instead of selecting enter to switch to forms mode) and then use up/down arrow .
• JAWS does not read that it is clickable when it encounters the box.

This is definitely a JAWS bug ... it is pretty bad because JAWS does not set focus correctly when pressing enter when the vc is active. In other browsers, it would be a browser bug, but in IE, JAWS doesn't rely on MSAA for these functions.

NVDA has a pretty bad IE bug here too as it does not recognize aria-selected of true in the listbox; it reads the selected item as not selected.

[mcking65]

Task force review of this example is now complete. Closing.