webui : improve accessibility for visually impaired people

[ngxson]

Fix #13531

NOTE: we don't aim to be WCAG compliant because we're currently lack of time & efforts to do that. However, what we can do is to make the UI usable with a screen reader

I used MacOS VoiceOver to test this, still not very happy about it because I don't know if it works well on all browsers.

At least on Firefox, I can select every button now (using tab) and their labels are being read correctly.

On safari, it just tells that there is a button without a label, which is quite annoying. Also, safari skip entirely the "upload file" button next to the "send message" button

Also, maybe because I don't know how to use a screen reader, but toast messages don't seem to be picked up (even though they use correct aria-live ; the toast notification function is provided by react-hot-toast package) - A simple test case is to click on the "send" button without entering any message, it should read an error "Please enter a message"

@domasofan can you check if this is now usable?

[isaac-mcfadyen]

toast messages don't seem to be picked up (even though they use correct aria-live ; the toast notification function is provided by react-hot-toast package)

Likely related Issue on the react-hot-toast GitHub: timolins/react-hot-toast#335

[domasofan]

Will try when some binaries are available. Using Firefox/Edge with NVDA on Windows.
Or can i sideload that somehow?

[ngxson]

@domasofan unfortunately we cannot build binary from PR on our CI.

one way to test this is to run frontend part locally, while using a prebuilt server for API

to get the frontend up in dev mode, install nodejs and run:

cd tools/server/webui
npm i
npm run dev

[domasofan]

Just had a look at the ui.
Looks pretty well from here using Firefox and NVDA on Windows.
The Settings and Themes buttons seem to have also the word settings and themes as text near them.
So basically it seems that the words seem also to be just somewhere in the page itself.
I know that sounds a little bit confusing.

How will inserting images from the clipboard work? will there be a button for that or are just pasting it into the page?

[ngxson]

Thanks for testing. It seems like some buttons has both tooltip and aria-label which makes it being read twice, even though I explicitly disable the tooltip. Tbh I'm not experienced enough to handle the tooltip, so if someone knows please comment. For now, I'll simply remove the aria-label

For the image, you can Control+C an image from your file system, then Control+V while you're focusing on the input text area. The second option to upload an image is via the "Upload file" button. But I'm not even sure if it's currently focus-able or not, some browsers just skip the button entirely.

Can you check if the "Upload button" is there? The layout of the input area is:

• Input text: "Type a message (Shift+Enter to add a new line)"
• Upload button
• Send button

[domasofan]

no problem. this can be resolved later as well.

yes the upload button is there and working.

[ngxson]

@domasofan I tried to fix some labels being read twice as you reported, it works with Firefox + VoiceOver in my case. Could you give it a try?

I also added the "Skip to main content" in the sidebar, right above the "Conversations" header.

I'm also thinking about making it easier to navigate when you have a lot of conversations in the list, maybe a search bar, will do that in the future. Let me know if you have other ideas.

[ngxson]

And also, I think the Settings dialog is not very accessible for the moment. Upon clicking it, I have to skip through a lot of things on the main layout just to get to the Settings dialog. Please let me know if this is a problem for you.

[domasofan]

shouldn't be normally. but i will have a look at it and report back in a new issue.