Skip to content

Accessibility features on md-select #5220

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

Closed
tandyc opened this issue Jun 19, 2017 · 4 comments
Closed

Accessibility features on md-select #5220

tandyc opened this issue Jun 19, 2017 · 4 comments
Assignees
Labels
Accessibility This issue is related to accessibility (a11y) P2 The issue is important to a large percentage of users, with a workaround

Comments

@tandyc
Copy link

tandyc commented Jun 19, 2017

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

  • Select an item in the md-select
  • Using a screen reader (I'm using NVDA), focus on the md-select using the keyboard (tab key)
  • Observe that what is read is the placeholder followed by "list". The selected option is not read.

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"

@jelbourn jelbourn added Accessibility This issue is related to accessibility (a11y) P2 The issue is important to a large percentage of users, with a workaround labels Jun 20, 2017
@M-a-c
Copy link
Contributor

M-a-c commented Dec 7, 2017

@josephperrott
@crisbeto
Any update on this ticket?

@frkfir
Copy link

frkfir commented Mar 12, 2018

Any update about this issue?
Thanks!

@jelbourn
Copy link
Member

Tracking via #11083

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Development

No branches or pull requests

5 participants