Rich text editor not possible to use properly with VoiceOver (Screen reader) and difficult with NVDA

[AndreasJacobsen]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

Umbraco Heartcore

Bug summary

Umbraco Heartcore (and by extension Umbraco CMS) has a range of accessibility issues, this git issue focuses on what I see as most pressing now; the rich text editor.

Currently the TinyMCE editor is used as the rich text editor, despite some efforts by TinyMCE to become more accessible it still is far from being good enough. The biggest problem for us now is accessing the toolbar.

We have a blind employee, work with many blind people and keep our doors open for further blind employees. It turns out that they are at least as good workers as non-blind people, what's holding them back is the digital tools workplaces use.

When screen reader testing the rich text editor with VoiceOver we were presented with a message asking us to use alt-F9 or alt-F10 to access the toolbar.

Our first problem was that Mac's don't have an alt key so we found an external keyboard with an alt-key. Even with the external keyboard we were unable to reach the menu. The menu is also impossible to reach using sequential navigation and tab-navigation.

With a Windows-machine (Norwegian keymap) we were able to reach the menu with NVDA (Screen reader) using the Alt Gr key instead of the Alt key, but none of us have this key on our keyboards. Using Windows via Parallels on a Mac resulted in the menu being impossible to reach again, even with an Alt Gr-key.

The result is our blind employee cannot write anything but pure text in the text editor as he (and many other blind users) is a Mac and iPhone users. Ideally he'd prefer working on his iPhone with a bluetooth keyboard, screen size does not matter when you are blind.

The editor also has other isses, like how the aria-label for buttons for some reason is in a

instead of in the button, making the announcement of button labels less robust. All the buttons also have role='presentation' making them effectively div-elements.

This constitutes a breach of WCAG 2.1.1 and WCAG 1.3.1

Specifics

No response

Steps to reproduce

Open rich text editor with a screen reader
Try to navigate to toolbar

Expected result / actual result

A keyboard accessible toolbar without the need for weird shortcuts that don't work on a Mac, like this one https://www.w3.org/WAI/ARIA/apg/example-index/toolbar/toolbar.html
The buttons are even real buttons in that one!

[Zeegaan]

Hey @AndreasJacobsen, I tested this out on both a Mac and windows and I could access the toolbar with alt + f10 (options + f10 for mac).
The F9 keybind however, did not work on either, and I'm not entirely sure what the menu is, I thought both keybinds were just to access to toolbar 😅
What menu-keybind is supposed to open? 🤔

[AndreasJacobsen]

Not sure what F9 is supposed to open. Weird (and good) that it works for you!
On a Mac with Norwegian layout I have to use the Alt-Gr key, same with my collogues Windows laptop. There may be some hacky ways around this like autohotkey/karabiner for us.

The standard Mac keyboard does not have an alt or Alt-Gr key, any ideas for non-hacky ways to access the toolbar? 🤔

[Zeegaan]

Hmm, I think we should remove mention of it then! I'll double-check with the front-end team before doing that though 🤣
And yea, the "options" button should be the Mac equivalent of the alt key 🤔

[AndreasJacobsen]

Using the options-key on mac sounds like a great idea! I got alt-F10 working in Parallels with Norwegian layout so we may just have weird computers.
I did notice that the key combination doesn't work on my home computer, see I'm a gamer and have Nvidia-software installed. Nvidia software reserves the alt-F10 combination for ShadowPlay-stuff. This can be fixed via the Nvidia app, but allot of people run Nvidia software and it can be good to know. Not that I expect Umbraco to bow to Nvidia-key bindings in any way.

[Zeegaan]

@AndreasJacobsen Ah yea not sure what we can do about that 😅 I will pass this on to the front-end team along with the aforementioned removal of the alt + f9 mentions 😁