Accessibility Improvements for screen reader users

[Flameborn]

Hello,

Parts of the Dotsmesh UI are inaccessible to screen readers, such as NVDA under Windows, or VoiceOver under MacOS and iOS, possibly to Orca under Linux as well.

Generally, the problem is that standard controls, such as checkboxes or buttons are hidden via CSS (display: none), and a div tag is used instead to style the controls. The problem with this approach is that screen readers do not receive control or state information, i.e. controls styled this way are inaccessible.

A few controls like this are:

• The auto-update checkbox for the installer
• The install button, which just shows as clickable, rather than as a button

It is strongly recommended to use standard HTML 5 controls, but if this is not possible, ARIA can be used to mimics standard behavior. See here.

Another issue is that controls are sometimes not labelled, which completely hides them from screen readers. For example:

• The image selector when you can name your profile
• The Home icon on the main page, after signing in.
• The controls to generate a contact key via the contacts tab

Proper textual labels should be used to convey what each control is called.

When uploading images, a field should be provided to add image descriptions. This is very important for blind accessibility, as images will be shown as image, without conveying what the image contains. When uploading an image, it is the uploader's responsibility to give a meaningful description to images, however, without this feature, this is currently not possible.

The various sections of the page are shown in a separate frame, however, it is not possible to close these frames. As a result, clicking on a section will result in spawning multiple frames. Since there could be multiple frames, they should be labelled, otherwise identifying which frame does what could be quite tedious. To a screen reader, frames are usually numbered without a tittle, so when multiple frames are shown, they'd be usually displayed as:

• Frame 0
• Frame 1
• Frame 2
• ETC.

Further testing indicates that dropdowns seem to be styled as well, which makes screen readers not detect the selected item, nor provide a way to select an item. This can be observed when selecting a language, for example, the dropdown shows up as a regular paragraph.

[ivopetkov]

Love your feedback. I hope we make these updates soon. It will be awesome if you help us implement them.

[Flameborn]

I would be happy to help in any way I can.

I am unfortunately not well-versed in CSS or UI design, but I'll do what I can.

I am, however, hosting an instance, and can test via multiple screen readers.

Would it be easier to switch to an already accessible UI framework, such as bootstrap?

[ivopetkov]

There are a lot of benefits going the vanilla HTML, JS, and CSS way, and I think we can easily make the needed changes to make the app accessible to screen readers.

I'll be glad to help you with the technical stuff, so we can build a high-quality experience. Let me know what you need.

[Flameborn]

I see.

This page describes what is needed for a checkbox, i.e. for every page control marked up as a checkbox, but in reality it's something else, e.g. a div, a span, or other element.

Here's a page for buttons. The tabIndex rule here is still valid, as currently the clickable elements of Dotmesh cannot be tabbed to via the keyboard. This applies to all elements marked up as a button or as a clickable element via CSS.

For unlabelled elements (for example the home icon), aria-label or aria-labelledby could be used. These attributes do not put anything visually on-screen, however, they convey a meaningful name to a screen reader.

For image descriptions, there should be a text box when uploading an image. This value could be used as alt="value".

I am not sure about the frames. A title could be easily defined, though I am not sure whether they accept an ARIA label attribute, to explain which frame shows which section of the page. I also did not notice a way to close these frames, which could be a problem if there are 20 of them open at the same time, for example if a user clicks on a navigation icon, and, being unaware that the page already opened a frame with the content, clicks again and again, since seemingly nothing has changed. ARIA alerts could be used for example to inform the user that a new frame is visible, though to be honest, I think it would make a lot more sense to just have one section open at a time, at least to me.

Dropdowns are going to be tricky. I've never seen a perfect implementation, but here's a listbox and a custom dropdown implementation.

I am sure that there will be more to come, but these are the major issues that I could find at a first glance.

I strongly believe in privacy and federated approaches, and Dotsmesh seems really promising, even in this state!

[ivopetkov]

Just pushed an update that fixes most of the accessibility issues. I'll be happy if you could check it out at dev.dotsmesh.com

Sadly, the frames are giving me a hard time. I'm looking for a way to "hide" them from the screen reader, but keep them in the DOM. This is needed when there is an open modal window. In this case, I want to prevent access to the parent window and the main navigation. Do you have any suggestion about disabling ARIA and tabindex with JavaScript temporarily?

[Flameborn]

Thanks so much for your great work! I am already seeing a lot of improvements even on the login page.

I’m wondering, is there a reason why you are using frames? In particular, is it because you’d like to show multiple sections of the page at the same time, e.g. notifications and profiles, etc?

If so, would this be easier with, say, a few div elements instead? They could be easily marked up via ARIA as a region, and I think visually you could also show/hide them, depending on your needs.

Regarding disabling ARIA and tab indexes temporarily, I think you can use the aria-hidden attribute. This way, screen readers won’t see the marked-up element, unless the attribute is cleared. Tab indexes might work still, so you might have to set tabindex to 0 temporarily.

On 2020. Aug 22., at 11:46, Ivo Petkov notifications@github.com wrote:

Just pushed an update that fixes most of the accessibility issues. I'll be happy if you could check it out at dev.dotsmesh.com https://dev.dotsmesh.com/ Sadly, the frames are giving me a hard time. I'm looking for a way to "hide" them from the screen reader, but keep them in the DOM. This is needed when there is an open modal window. In this case, I want to prevent access to the parent window and the main navigation. Do you have any suggestion about disabling ARIA and tabindex with JavaScript temporarily?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/dotsmesh/dotsmesh-web-app/issues/1#issuecomment-678620318, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHLD4ASA74Z3MKI372CEOLSB6HYNANCNFSM4P4ZC5OA.

[pitermach]

Thanks for the improvements.

I think there's nothing wrong with the controls being frames. For making them invisible to screen readers, what @Flameborn said would be enough. You can just set the aria-hidden attribute to true on the frames that should be hidden, and clear it on the one that's actually visible.

[ivopetkov]

The 'aria-hidden' attribute is not enough because there are focusable elements inside, that you can reach using the Tab key. I think I found a solution though: https://web.dev/aria-hidden-focus/

Edit: @Flameborn, I saw your comment after I posted this. I agree that the tabindex update should get the job done. Will try it.

[Flameborn]

I hope that this won't be complicated as the project grows. This is sadly one huge disadvantage of custom controls, if you'd like to provide equal access for everyone.

But I think it should work as well.

[ivopetkov]

It works! :) You can check it out at https://dev.dotsmesh.com/

[Flameborn]

I’m checking it out now with a private profile, and it seems to be working. VoiceOver under MacOS still recognizes the frame when tabbing, but I think that’s the best we can do at the moment.

Currently, none of the frames are shown, even if I click on a button, e.g. Settings, not sure if this is intended.

On 2020. Aug 23., at 20:54, Ivo Petkov notifications@github.com wrote:

It works! :) You can check it out at https://dev.dotsmesh.com/ https://dev.dotsmesh.com/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dotsmesh/dotsmesh-web-app/issues/1#issuecomment-678810735, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHLD4GLBCCE7AZDXEWZJBLSCFQVDANCNFSM4P4ZC5OA.

[ivopetkov]

Can you give me more information about the frames visibility issue. I've tested on couple of devices and found no problems.

[Flameborn]

As an example, I opened https://http://dev.dotsmesh.com https://http//dev.dotsmesh.com. It landed me on the settings page.

If I tab around, I see all the buttons. When the Settings button is focused, I press tab. VoiceOver remains silent. I press tab again, VoiceOver announces Frame 0. Then, 2 more silent items, and I land on the show/hide sidebar button. This is via Safari 13.1.2.

I’ll have to see what’s going on under Windows, but I have a feeling that ARIA-hidden is not set to false when the frame should be displayed on-screen. The silent controls are likely the ones in the Settings frame, but they can be tabbed to.

On 2020. Aug 24., at 18:24, Ivo Petkov notifications@github.com wrote:

Can you give me more information about the frames visibility issue. I've tested on couple of devices and found no problems.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dotsmesh/dotsmesh-web-app/issues/1#issuecomment-679230200, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHLD4FVSAOMS7MF7VZRFKTSCKH3LANCNFSM4P4ZC5OA.

[ivopetkov]

There is kinda similar behavior in Firefox on Windows 10. I'll check it out.

[Flameborn]

Any news on this? ☺️

Regarding the installer, I've just sent in a PR that fixes the issues I encountered when using the keyboard and a screen reader. https://github.com/dotsmesh/dotsmesh-installer-php/pull/1

[ivopetkov]

I've still have not debugged it.

Thank you for the PR. Some help is highly appreciated :)