Hello!
We have been developing and testing with some accessibility features in the new p5 web editor. If you are a screenreader user interested in creative coding, we have made it so you can now create accessible visualizations and sound pieces, here’s how!
- Chrome or Firefox and NVDA
- Internet Explorer 11 and Jaws (currently this is down in IE)
- Safari (10.0.1) and Voiceover (works uptil OS Yosemite - does not work in El Captain and Sierra)
In the web editor you will find several standard UI elements and some additional accessibility features.
To type in code, enter into the editor field. To run your code, select the “play with text output” button. Your OS/screenreader should then have focus on the output of your code!
By default, you will have a text description of any visual content in your sketch. However, you can change the outputs produced by changing the accessibility preferences.
The accessibility preferences for visual outputs are found by selecting the “Preferences” Button. Locate the heading “Accessible Text-based Canvas” and select either “Plain-text”, “Table-text” or “Sound” outputs (note that sound is useful for interpreting direction and speed of moving elements within your sketch)
-
Plain Text Output - This describes the visual content present in the canvas in list form. Each element can be selected so as to get more details
-
Table Text Output - Here the visual content in the canvas is laid out in the form of a table based on where each element is - the elements can be selected so as to get more details.
-
Sound Output - This mode explains the movement of the objects present in the canvas. Top to Down movement is represented by a decrease in frequency and left to right by panning the stereo output.
Landmarks of the development environment include:
- Main Navigation (play, stop, filename change and preferences buttons)
- User
- File Navigation (add file button, collapsible file navigation menu and links to all files)
- Code Editor (Contains the code editor along with lint messages)
- Code Output (Contains the Visual canvas along with textual description of what is present in the canvas. Available when there is an output- when you add code and press play)
- Console Region (Contains messages sent to the console during runtime and option to collapse the console)
- Preferences ( available when you open preferences. Contains options to adjust font size and indentation
Shortcuts :
In the editor, under "editor options", there is a list of keyboard shortcuts available (which are also listed below).
- Shift + Tab = Tidy (Clean up the code format)
- Command + S = Save
- Command + [ = Indent Code Left
- Command + ] = Indent Code Right
- Command + / = Comment Line
- Command + Enter = Start Sketch
- Command + Shift + Enter = Stop Sketch
- Command + Shift + 1 = Toggle Text-based Canvas
- Command + Shift + 2 = Turn Off Text-based Canvas
When you make a mistake in your code, our IDE will tell you where and what mistake you have made (to the best of our ability). Error reporting is done in two parts. There is the console region and the lint messages within the editor region.
- Console Region - this is used to communicate errors and messages during runtime (i.e - after hitting the play button )
- Lint Region - this is used to communicate possible errors and warnings in the code while the code is being edited. If there are any lint messages, you will hear a beep indicating that messages are available. For instance, We have included a feature that you can turn on which will alert you to an error with a beeping sound (When hear a beep, then bring focus to error message).
If you have problems, suggestions, or feedback please post them here. Your feedback will help us to continue to improve the system. ckv214(at)nyu(dot)edu https://github.com/MathuraMG/p5-interceptor/issues