angular
bug(mat-option): JAWS 2023 does not announce a checked option as selected in a multiple selection mat-select
Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
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.
- 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:
- Start JAWS in a Windows machine.
- Go to https://material.angular.io/components/select/overview#select-multiple
- Select the multiple selection dropdown.
- Navigate through the options using the arrow keys.
- Select a few options.
- 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
- Angular: 15.2.9
- CDK/Material: 15.2.9
- Browser(s): Chrome 119.0.6045.199
- Operating System: Windows 10 Enterprise
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
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.
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