Accessibility features on md-select #5220
Labels
Accessibility
This issue is related to accessibility (a11y)
P2
The issue is important to a large percentage of users, with a workaround
Bug, feature request, or proposal:
upon focusing on md-select with value already selected, the selected value is not read by screen readers. (tested using NVDA on IE and Chrome)
What is the expected behavior?
The selected item should be read upon focusing on the md-select
What is the current behavior?
The placeholder is read, followed by "list" on NVDA. On Apple VoiceOver, the results are similar. Instead of reading the selection, VoiceOver reads "no selection" even when an item is selected.
What are the steps to reproduce?
http://plnkr.co/edit/Fco0OOHNfmp1sXdp5vu3?p=preview
NVDA is available for free here: https://www.nvaccess.org/download/
What is the use-case or motivation for changing an existing behavior?
To provide an equal level of accessibility as native select elements.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
This should be browser agnostic for the most part, but various screen readers will likely read the element different.
Is there anything else we should know?
The easiest way to resolve this issue is probably to add the selected item to the aria-label that currently exists on the md-select tab. It already has the field label... adding the selected item should satisfy the critera. Example (based on the above plunk) aria-label="Favorite Food" changes to aria-label="Favorite Food - Tacos Selected"
The text was updated successfully, but these errors were encountered: