search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.72k forks source link

bug(mat-option): JAWS 2023 does not announce a checked option as selected in a multiple selection mat-select #28214

Open walberglez opened 9 months ago

walberglez commented 9 months ago

Is this a regression?

The previous version in which this bug was not present was

No response

Description

The screen reader JAWS version 2023 does not announce a checked option as selected in a multiple selection mat-select. It does announce unchecked options as selected.

I tried other Windows screen readers, NVDA does not announce it either but Narrator does. So it could be a screen reader implementation issue.

Also, this issue has been discussed before: https://github.com/angular/components/issues/21949 and it was considered to be working as expected. But I want to bring this up again because I consider that the mat-option component is not following the WAI ARIA Listbox pattern completely, please see Note 1 in this section https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#roles_states_properties.

  1. Some factors to consider when choosing whether to indicate selection with aria-selected or aria-checked are: Some design systems use aria-selected for single-select widgets and aria-checked for multi-select widgets. In the absence of factors that would make an alternative convention more appropriate, this is a recommended convention.

Mat Option uses aria-select for both single and multiple selection. Based on this recommendation, it should use aria-selected for single selection and aria-checked for multiple selection.

Reproduction

Steps to reproduce:

  1. Start JAWS in a Windows machine.
  2. Go to https://material.angular.io/components/select/overview#select-multiple
  3. Select the multiple selection dropdown.
  4. Navigate through the options using the arrow keys.
  5. Select a few options.
  6. Navigate through selected and unselected options and check how the screen reader announces them.

Expected Behavior

I expect screen readers to announce if an option is selected or unselected.

Actual Behavior

JAWS only announces the status of an unselected option.

Environment

zarend commented 9 months ago

Hello,

Thank you for reporting this. JAWS is one of our supported screen readers.

JAWS only announces the status of an unselected option.

This just seems to be how JAWS works.

I see that WAI ARIA guide gives aria-checked as an option. That's a good guide, but I don't know of any accessibility requirement that says screen readers need to announces both selected and unselected options.

I don't see enough of a case for changing it to aria-checked at this time :). Currently, we are looking to make a11y improvements by fixing WCAG violations and removing unnecessary live regions.

Do you have a WCAG criteria or some other criteria to support this? OR do you have an issue report from screen reader user or user that relies on ASsistive Technology? That could help convince us on this.

Best Regards,

Zach

walberglez commented 9 months ago

Hi Zach, thank you for your quick response.

The application I am working on just went through a 508 conformance testing session and this issue was reported as not in compliance with the WCAG 2.0 SC 1.3.1: https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html

I hope it helps.

Thank you.

zarend commented 9 months ago

Hello,

Thank you for reporting this, and please report any other WCAG compliance issues by filing a bug report.

I see that WAI ARIA says aira-checked or aira-selected are okay, but aria-checked is more conventional for multiple selection.

I'm trying to understand in more detail what WCAG is saying about this. Do you know why this fails criteria for WCAG 2.0 SC 1.3.1? 1.3.1 is a bit of a lengthy one.

Best Regards,

Zach

jeffreinhart commented 4 weeks ago

Considering this from a perspective of just trying to interact with this component as a visually impaired user, the functionality is simply lacking, WCAG or not.

To understand what an NVDA user would experience, try this:

  1. Go to https://material.angular.io/components/select/overview.
  2. Activate NVDA.
  3. Tab to the Toppings input under H3 for Multiple selection.
  4. Press ENTER on the input to expand.
  5. Arrow through the list and press ENTER on list items.

The only announcements I get are the value and list position (e.g. “extra cheese 1 of 6”) and “selected” when pressing ENTER on an item that is not selected. As I arrow through the list, I don’t know what is or is not selected and when I press ENTER on an item that is selected, I get no notice that anything happened.

Behavior that would be useful and is not currently present:

Using 16.2.0.