Use a role="textbox"
for all the Editable elements
#3412
Labels
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
Milestone
The "editable" blocks use an element with
contenteditable
. Depending on the cases, this element can be a paragraph, a heading, a div, a figcaption...Screen readers need to understand an element is an "editable text" element to correctly interact with it. Not surprisingly, browsers expose different information to assistive technologies and in turn assistive technologies have their own quirks.
TL:DR some browser / screen readers combinations don't work well without an explicitly set ARIA role. For example, JAWS 17 with Firefox on Windows doesn't understand a Gutenberg paragraph block is editable and doesn't automatically switch to "forms mode". Users can manually switch to forms mode when they need, and that can be done pressing Enter. However, pressing Enter in Gutenberg creates a new block so this won't work.
The result is the complete inability to switch to forms mode, so it's impossible to enter content.
A standard way to let screen readers understand an element has a semantics of editable text is using a
role="textbox"
.Inputs and textareas don't need any role, since they already have the required semantics.
Multi-line elements should use
role="textbox"
andaria-multiline="true
.Single-line elements should use just
role="textbox"
.To illustrate how browsers differ in exposing information through the accessibility API, see the screenshot below (using the Accessibility Viewer, a tool to explore a11y infos):
Without role
Firefox exposes a Gutenberg editable paragraph like a paragraph (also notice the weird ARIA role img)
IE 11 exposes it as "editable text", this explains why JAWS works nicely with IE and switches to forms mode:
With role=textbox
Firefox:
IE 11:
both browsers expose now a correct, consistent, information.
The text was updated successfully, but these errors were encountered: