Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use a role="textbox" for all the Editable elements #3412

Closed
afercia opened this issue Nov 9, 2017 · 3 comments · Fixed by #4074
Closed

Use a role="textbox" for all the Editable elements #3412

afercia opened this issue Nov 9, 2017 · 3 comments · Fixed by #4074
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).
Milestone

Comments

@afercia
Copy link
Contributor

afercia commented Nov 9, 2017

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" and aria-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)

screenshot 114

IE 11 exposes it as "editable text", this explains why JAWS works nicely with IE and switches to forms mode:

screenshot 115

With role=textbox

Firefox:

screenshot 116

IE 11:

screenshot 117

both browsers expose now a correct, consistent, information.

@afercia afercia added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Nov 9, 2017
@darrencoutts118
Copy link

+1 this is definitely something that should be added in. Need to be as accessible as possible

@aduth
Copy link
Member

aduth commented Dec 18, 2017

Could this be considered a TinyMCE issue? cc @androb

@androb
Copy link
Contributor

androb commented Dec 19, 2017

@aduth mentioned this issue internally and it appears TimG is on it

@afercia afercia added this to the Merge Proposal milestone Mar 19, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants