webui : improve accessibility for visually impaired people#13551
Conversation
Likely related Issue on the |
|
Will try when some binaries are available. Using Firefox/Edge with NVDA on Windows. |
|
@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 |
|
Just had a look at the ui. How will inserting images from the clipboard work? will there be a button for that or are just pasting it into the page? |
|
Thanks for testing. It seems like some buttons has both tooltip and 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:
|
|
no problem. this can be resolved later as well. yes the upload button is there and working. |
|
@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. |
|
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. |
|
shouldn't be normally. but i will have a look at it and report back in a new issue. |
…13551) * webui : improve accessibility for visually impaired people * add a11y for extra contents * fix some labels being read twice * add skip to main content
…13551) * webui : improve accessibility for visually impaired people * add a11y for extra contents * fix some labels being read twice * add skip to main content
…13551) * webui : improve accessibility for visually impaired people * add a11y for extra contents * fix some labels being read twice * add skip to main content
…13551) * webui : improve accessibility for visually impaired people * add a11y for extra contents * fix some labels being read twice * add skip to main content
…13551) * webui : improve accessibility for visually impaired people * add a11y for extra contents * fix some labels being read twice * add skip to main content
…13551) * webui : improve accessibility for visually impaired people * add a11y for extra contents * fix some labels being read twice * add skip to main content
…13551) * webui : improve accessibility for visually impaired people * add a11y for extra contents * fix some labels being read twice * add skip to main content
…13551) * webui : improve accessibility for visually impaired people * add a11y for extra contents * fix some labels being read twice * add skip to main content
…13551) * webui : improve accessibility for visually impaired people * add a11y for extra contents * fix some labels being read twice * add skip to main content
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 byreact-hot-toastpackage) - 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?