search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.5k stars 260 forks source link

[ui5-select][a11y] can't use Screen Reader on ui5-select #3662

Open Psidium opened 3 years ago

Psidium commented 3 years ago

Bug Description

ui5-select is not usable with a screen reader, it opens the options but you can't focus on the options to actually select them nor nothing, you can also open multiple ui5-selects at the same time this way.

Expected Behavior

I expected the select to be announced as a "menu" and then I would be sent to the selected option, where I could press up or down to navigate the menu to the option I want.

Steps to Reproduce

Open https://sap.github.io/ui5-webcomponents/playground/components/Select/

Log Output / Stack Trace / Screenshots

https://user-images.githubusercontent.com/2848323/129414940-a22f7fde-0e35-441a-8c2f-1ea8c2ef0ca5.mp4

Context

Priority

Stakeholder Info (if applicable)

unazko commented 3 years ago

Hello @Psidium,

Which software is used as a screen reader in the attached video file? I couldn't reproduce the issue. Do you know if the issue is reproducible on windows machine as well?

Best Regards, Boyan Rakilovski

unazko commented 3 years ago

Hello @SAP/ui5-webcomponents-topic-p,

Unfortunately I couldn't reproduce the showcased in the video issue as I use windows machine. Could you please test on macOS if there is such issue with ui5-select component?

Best Regards, Boyan Rakilovski

Psidium commented 3 years ago

I was using macOS' VoiceOver, unfortunately I don't know how to use JAWS to test this on Windows.

dobrinyonkov commented 3 years ago

Hello @Psidium,

I just tested the url with my VoiceOver with default settings and navigation works much better. From your video, it looks that you are browsing in Quick Nav mode, probably.

By default, Quick Nav should be OFF and DOM or Group mode should be ON but I can't say for sure without looking at your setup.

Could you please try and switch modes following this chapter of the VoiceOver docs and retest again: https://www.apple.com/voiceover/info/guide/_1134.html

In short: You can bring the Commands menu, by pressing the VO-H-H and then type "DOM" and make sure that it is toggled on and then type "Quick Nav" and make sure it is toggled off. I'm sure there are quicker shortcuts but thats what I found. "VO" is the voicer hot key - "Control-Option".

Kind Regards, Dobrin

Psidium commented 3 years ago

I still cannot make the element announce via voiceover, I also tried via the VoiceOver on the iPhone and no luck there, you can give me call via the SAP internal systems and I can show you what I'm doing

Psidium commented 3 years ago

I had a call with @dobrinyonkov, where we could find exactly how to reproduce what I'm referring to. If I open https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html and go to the example there I'm able to use "control + option + space" to open the select options, and then I can use "control + option + right" and "control + option + left" to navigate between the options.

When I open https://sap.github.io/ui5-webcomponents/playground/components/Select/ the behavior is different: when I go to the ui5-select file, I can hear that I'm on a combox and I can press "control + option + space" to open it, but when I do it then nothing happens, nothing is announced. If I press "control + option + right" and "control + option + left" the cursor will jump out of the current select, leaving the user completely lost. But if "quick nav mode" is off and "web navigation dom" mode is on then I can use the up and down arrows to select the option as a workaround. There could be at least some guide here telling the users that they should use the up or down arrow instead of using the voiceover functionalities.

It seems this is a limitation of the ShadowRoot and the next aria spec will fix this, so maybe we have to set issue as blocked until the aria team release a new version? idk

dobrinyonkov commented 2 years ago

This issue is caused by the fact that we are not using aria-activedescendant to change the selected value.

We are aware of this issue and other issues, related to setting relationships between accessible elements via IDrefs. Setting IDRef relationships are currently not possible due to the nature of the custom elements and their shadow DOM. The issue is present not only for UI5 Web Components, but for every framework creating custom elements and using shadow DOM. This is a gap in the accessibility support and there is a working draft for a new AOM (Accessibility Object Model), which addresses this issue and many more and aim a better, JS based accessibility support for all web element.

You can check the working draft here https://github.com/WICG/aom and the w3c specification here https://wicg.github.io/aom/spec/ (again draft). What is more, you can check out there explainer and see that https://wicg.github.io/aom/demos/#12 Issue 2 references the use case you mentioned and is one of the main issues, which lead to creating the AOM. In future, when this becomes complete and has support for all main browsers, we will have the possibility to adapt the components and make sufficient enhancements in the accessibility support, but until them we do not have any possibility to set there kind of relationships.

Users can still change the values using the arrow keys. We will further discuss if adding a tutor message to use the arrow keys is feasible and I will update the status of the issue here.

Thanks for understanding!