Widget is not accessible

[toolness]

Spent some time interacting with the widget in VoiceOver and noticed a few things:

• It'd help to add a title attribute to the iframe. VoiceOver just reports the frame as "frame 1", "frame 2" etc otherwise.
• It might help to set a more helpful <title> on the iframe document than "p5.js-widget", but I'm not sure.
• The CodeMirror widget is not accessible by default on desktop platforms, but manually setting the inputStyle option when creating a CodeMirror instance hugely improves this. The main problem is that older browsers need to use the non-accessible default to work well for sighted users, but there are a variety of ways to potentially work around this.

[toolness]

Here's a page that contains two codemirror widgets, one which sets inputStyle: "contenteditable" and the other which sets inputStyle: "textarea":

http://jsbin.com/qopaxex/edit?html,output

Hopefully folks interested in accessibility can use that to see the difference between the two when used with screen-readers. I'm finding that NVDA reads the accessible one fairly well, and fails horribly on the inaccessible one. Haven't tried yet with VoiceOver or anything else.

[toolness]

It seems, unfortunately, that most screen readers don't read the "accessible" one very well. 😞

So another alternative may be to offer a button that's only perceivable by screen reader users which lets them opt-in to an accessible editor--it'd simply replace the codemirror widget with a standard <textarea>.

Here's an example:

http://pode.hksr.us/toolness/codemirror-fallback-example