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

List block and screen readers: greatly inconsistent behavior #5983

afercia opened this Issue Apr 4, 2018 · 3 comments


None yet
3 participants

afercia commented Apr 4, 2018

Seems contenteditable on a list element doesn't make screen readers so happy.

I've prepared a quick codepen, and I'd greatly appreciate some help and testing:

VoiceOver: announces the list but doesn't announce the list items content. It just reads out "group with 2 items editable":

screen shot 2018-04-04 at 19 40 31

NVDA: doesn't read the list item content in forms mode.

Contrary to what I thought, see #4074, seems the only way to address this issue is to reset the list semantics and use a role="textbox" for the list. In #4074 we've explicitly excluded lists and tables to get a role="textbox".

Instead, using a role="textbox" should, more or less, provide the same experience users get with the classic editor. More testing and research is definitely necessary.


This comment has been minimized.

aardrian commented Jun 14, 2018

Per our WCEU chat (and assuming I understand the problem well enough), I made a fork of the pen to put role=textbox on the final list: (debug view: for SR testing).

The final list on the page will at least announce the text in each bullet (NVDA), though it will not announce the count. If we have to choose between hearing the text or hearing the count, I vote for hearing the text.

@afercia afercia self-assigned this Jun 20, 2018


This comment has been minimized.


afercia commented Jun 21, 2018

Adding back the role=textbox is a quick fix, see below: it gets applied on the <ul> element though, which is a bit against what ARIA recommends, as we're overriding a native role. Pretending no one sees that 🙂I'd agree it's the best option we have.

screen shot 2018-06-21 at 12 40 30

There's one more block editable area where Gutenberg doesn't use the role=textbox and it's the Table block 😱It's rendered with a contenteditable <table> element. Unsure what to do with the table, @aardian any idea? Worth nothing the Table block has several accessibility quirks still to address.


This comment has been minimized.


afercia commented Jun 21, 2018

Will split the table thing in a separate issue, if needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment