VoiceOver speaks line numbers #6578
Comments
|
Please take a look at the version 6 rewrite, which has been designed with screen readers in mind. The experience with version 5.x is probably never going to be great, but if you have a patch that improves this (I think the code currently misguidedly uses role=presentation for line numbers, and aria-hidden would be a better approach. |
This was referenced Apr 9, 2021
marijnh
pushed a commit
that referenced
this issue
Apr 12, 2021
Sets aria-hidden=true on .CodeMirror-gutter-wrapper elements Fixes #6578
aomarks
added a commit
to google/playground-elements
that referenced
this issue
Apr 12, 2021
Don't immediately enter edit mode when focusing the editor with Tab, because otherwise we're a Tab trap, because Tabs insert literal tabs. Instead, show a prompt to "Press Enter to start editing". Clicking into editable region with mouse works like before. Pressing Escape re-focuses the editor, allowing Tab to be used to focus next again. Switch to CodeMirror's contenteditable input style. This makes it behave like a normal content editable region, so it's much better for screen readers (see https://codemirror.net/doc/manual.html#option_inputStyle -- it's the new default in CodeMirror 6 for this reason). Mark line numbers with aria-hidden so that they don't get read aloud by screen readers (see codemirror/codemirror5#6578).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have CodeMirror configured with
inputStyle="contenteditable"and displaying line numbers and code folding. On the Mac, when using VoiceOver in Chrome, the contents of the gutter (line number and disclosure) is voiced by the screenreader, which confuses users. This happens when the entire page is being read, or when there is a multiline selection inside of the editing area.FWIW, I do not have this problem in Chrome when using the NVDA screen reader on Windows.
As a workaround, I'm hiding the gutter area from screen readers by setting
aria-hidden="true"on.CodeMirror-gutter-wrapperelements, but that feels like a hack.The text was updated successfully, but these errors were encountered: