WYSIWYG controls are not accessible


Location: 06 Discussion - Add Post

Severity: 6

Description: The Toolbar for the Post textarea is implemented as a toolbar with ARIA role="toolbar", however the keyboard interaction does not correspond to that of a toolbar. When screen reader users hear toolbar, they will expect to interact with it as a toolbar with one tab stop and arrow keys to navigate through the buttons within the toolbar.

Pattern: None

Auditor Note: Developers should implement custom controls with the default keyboard interaction that corresponds to the role chosen. This will help assistive technology users interact with the controls properly. Follow the authoring practice for a toolbar: https://www.w3.org/TR/wai-aria-practices/#toolbar
In addition, provide a label for the toolbar to make it more intuitive for screen reader users. Since you don't have an onscreen label, you can use aria-label within the div with the toolbar role.

Internal Note: We either need to fork this WYSIWYG editor and fix it, or find a new WYSIWYG editor for this control. Talk to Ari. I think she had found an accessible React WYSIWYG editor.

Steps to Reproduce


Current Behavior


Expected Behavior


Reason for Variance


Release Notes


User Impact Summary



Sofiya Semenova
December 6, 2017, 7:53 PM

Further work for creating tests and fixing eslint violations are in 1919 and 1920, respectively.

Greg Martin
November 22, 2017, 6:56 PM

The proposed react WYSIWYG editor (https://draftjs.org/) is excellent, but the infrastructure push to get it integrated within the backbone/underscore construction is too heavy a lift for the time allotted.

This is a straight a11y fix for the current editor.

Your pinned fields
Click on the next to a field label to start pinning.


Sofiya Semenova


Mark Sadecki