Toolbar elements not accessible to screen readers

[Ksan8]

Any app that uses Quill will fail accessibility checks (such as the axe browser extension) due to the toolbar not being accessible to screen readers. This is a critical accessibility issue.

The issues Axe finds are:

• ARIA commands must have an accessible name
• Buttons must have discernible text

Providing a minimal, complete and verifiable example will further increase your chances that someone can help.

Steps for Reproduction

1. Visit any webpage or app that uses the Quill editor (with at least one dropdown and a button), or download quill-minimal-example and follow the instructions to start a dev server
2. Install the axe browser extension if not already installed
3. Open DevTools and click on the axe tab
4. Choose "Scan all of my page" after ensuring that all content is within view
5. Notice the issues listed above appear in the axe results

Expected behavior:
All toolbar dropdowns and buttons should have aria-label attributes, which would allow them to be discernible to screen readers.

Actual behavior:
Currently, an element (such as a dropdown or picker) with .ql-picker-label have an aria-controls attribute, but no aria-label. They also have no title attribute, or other text that is visible to screen readers. All other buttons within the toolbar lack aria-label or title attributes as well.

Platforms:

• Brave version 1.21.76 and Chrome version 89.0.4389.90
• MacOS Big Sur version 11.2.3

Version:

• Quill version 1.3.7
• ngx-quill version 13.2.0

[clairefields15]

I can work on this, having the same issue using this editor at work and seems like a simple fix.

[jobara]

It looks like for the buttons you might just need to add the format as an aria-label to the addButton method. You might also need the value for things like lists. That was just for a quick look though, I'm not sure what's needed for the select boxes and other things.

For those looking for a temporary workaround, it may be possible to make a custom toolbar that included the aria-labels. See: https://quilljs.com/docs/modules/toolbar/

[clairefields15]

@jobara unfortunately the temporary workaround does not work, check out this code sandbox using a screenreader. It looks like quill just looks for matching ql-foo containers and then inserts it's own markup (sans aria-labels) into those containers. I'm about to make a PR which adds aria labels to the toolbar

[hchang21]

@clairefields15 Any updates on this issue? I'm using v1.3.7, and the only part of the toolbar that reads with a screen reader is the option to set a heading level. Everything else still reads as blank buttons.

[samuelClo]

@clairefields15 Any updates on this issue? I'm using v1.3.7, and the only part of the toolbar that reads with a screen reader is the option to set a heading level. Everything else still reads as blank buttons.

You can make your own toolbar html and add aria label.

But it will be good to have a native implementation of basic accessibility.

[hchang21]

Thanks for the tip

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide 🙏