cben/mathdown

Accessibility

Opened this issue · 4 comments

cben commented
  • Keyboard access to everything. Notably there is no current way to tab out of the editor! accesskey works, not sure how to make it discoverable.
    • Use HTML5 <nav> etc. to convey site structure.

The most central question is whether CodeMirror content is even visible to screen readers?
Even if yes, and even if it's is conveniently editable, it probably wouldn't hurt to serve initial content over HTTP to people/spiders without javascript, and to allow fallback to textarea/form submission (#7).

  • Make sure HTTP body uses real structure e.g. <h1> and not just visual styling like <span class="heading-1">.
    • Specifically, use real <a> (or at least <span href=...>) links! Important both for accessibility and link juice.
  • Investigate also using real <h1> etc. within CodeMirror (via renderLine hook, with CSS overrides like .CodeMirror .h1 { display-style: inline}?).
    These is a harder problem that CM flattens logically nested structure like # H1 *span* H1 into adjacent spans. Probably acceptable(?).
  • Long term: investigate a textarea adapter to Firepad. Would allow switching to textarea (which is also desirable for spell checking) without losing real-time sync. However, I'm afraid that replacing textarea content on incomping changes might be extremely distracting with screen readers.

Another part is math.

  • IIUC, MathJax is well accessible, as long as user can access its right-click menu.
  • Use MathML (with SVG fallback?) in HTTP content.

There are surely other aspects...

Testing tools: http://www.wat-c.org/

cben commented

Discussion of CM accessibility for FireFox devtools integration:
https://bugzilla.mozilla.org/show_bug.cgi?id=816756
Mostly discusses RTL issues, some mention of screen readers but I didn't quite understand CM's status.
Before CM landed FireFox used Orion which got most accessibility from using contentEditable.

Fork with CM accessibility investigation:
https://bgrins.github.io/codemirror-accessible/

How to do accessible textarea option:
https://github.com/jsbin/jsbin/issues/936 (sorry github, I don't want to spam that issue)

cben commented

http://ux.stackexchange.com/q/39868/47564 advice:

  • Provide indication Tab is captured
  • Only capture once you start typing
  • Use the ARIA-recommended Ctrl-M to toggle CodeMirror focus (I'd also use Esc, at least as long as I don't support Vim bindings).
cben commented

Acesskey "standards" and discussion whether they're good or harmful: http://www.standardaccesskeys.com/SAK2014/, http://www.hobo-web.co.uk/uk-gov-access-keys/
but I'm thinking (H)elp and (N)ew would do the job better for now.