Toolbar button labels not read by screen readers

[Kataract]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

CKEditor 5 Builds

📋 Steps to reproduce

1. With a screen reader active, enter the text area and hit alt+f10 to get in to the toolbar
2. Use the arrow keys to navigate toolbar options

✅ Expected result

Screen readers should announce what each button does (bold, italic, link, etc)

❎ Actual result

Screen reader only announces "button"

📃 Other details that might be useful

The .ck-button__label class uses display: none; which hides the label from assistive technologies. Changing to display: block; and using another way of hiding the label visually re-surfaces this for AT, and the labels get read out again.

Link on different ways to hide text visually but still have it "visible" to AT: https://webaim.org/techniques/css/invisiblecontent/#techniques

[Reinmar]

cc @oleq

[oleq]

I created a general issue for accessibility but to bootstrap the huge task in the spirit of progressive enhancement I also proposed a simple PR which makes the buttons in the toolbar a little bit more a11y–friendly. Could you check it out, @Kataract?

[Kataract]

@oleq I apparently turned off my notifications and didn't see this until now, sorry 🙃

That should take care of it - thanks!

[marjon4]

This issue seems to persist while using VoiceOver on Chrome/Mac. Screen reader doesn't read the toolbar option label, only the element type (button).

[AbdullahZubair]

I'm just building a website with Drupal, where I'm using CK editor 5. and same happening with me. most of the buttons are without lable. only "button".