Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typeahead: suggested options not conveyed to screen readers #1945

Closed
hvinh opened this issue Nov 7, 2017 · 4 comments
Closed

Typeahead: suggested options not conveyed to screen readers #1945

hvinh opened this issue Nov 7, 2017 · 4 comments

Comments

@hvinh
Copy link

hvinh commented Nov 7, 2017

Bug description:

Accessibility issue
As raised during an accessibility audit, when using an autocomplete feature, the list of suggested options should be conveyed to screen readers users.
The same issue is observed with the ng-bootstrap typeahead widget.
After typing a letter and options appear, this information is currently not conveyed to screen reader users, who can not know that options are available.
Same issue is occurring when no option is found.
The recommendation is to add a hidden sentence for screen readers like "2 options are available, please use up and down arrow keys to navigate"/"No results available" that will be read out after typing a letter.
An aria live region could be used to achieve this (role="status" and aria-live="polite").

Tested with NVDA/Firefox and JAWS/IE

Link to minimally-working plunker that reproduces the issue:

https://ng-bootstrap.github.io/#/components/typeahead/examples

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: angular 4.4.6

ng-bootstrap: 1.0.0-beta.5

Bootstrap: 4.0.0-beta.2

@changLiuUNSW
Copy link
Contributor

changLiuUNSW commented Nov 21, 2017

I have tested typeahead and it works perfect with JAW18 and IE edge.
Please note that different version of browsers and screen readers may have different behaviour for some aria attibutes, say the accessibility behaviour for Jaws 18 + IE 11 and Jaws18 + IE wedge are different.
You can verify this by testing Google search input with different browsers and different screen readers. I believe you will find differences

@hvinh
Copy link
Author

hvinh commented Nov 21, 2017

Hello,
The options can indeed be selected with a screen reader.
The problem is more that when the options appear after typing, there is no warning for the screen reader user, who therefore is not aware that options are available.

@changLiuUNSW
Copy link
Contributor

changLiuUNSW commented Nov 21, 2017

Did you tested with JAW18 on IE edge? Also did you test the aceesibility of Google search ?

@hvinh
Copy link
Author

hvinh commented Nov 21, 2017

I tested but the version of the screen reader makes no difference as this behavior is not implemented.
Surprisingly it is not even implemented on the Google search.

@pkozlowski-opensource pkozlowski-opensource added this to the 2.1.0 milestone Apr 13, 2018
ymeine added a commit to ymeine/ng-bootstrap that referenced this issue Apr 27, 2018
@maxokorokov maxokorokov modified the milestones: 2.1.0, 2.0.0 Apr 28, 2018
maxokorokov pushed a commit that referenced this issue Apr 28, 2018
Typeahead now announces the number of available results like 'no results available' or '3 results available' via the aria-live region

Closes #2197
Fixes #1945
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants