Some inspiration can also be found at http://legofortheblind.com/ (the author of this blog is also a musician and has created a rhythmic notation system with legos; we have some ideas for how to add pitch as well)

During GCI, a student researched this topic and came up with the following results:

Accessibility.zip

The TODO items are as follows:
Implementation

• Perhaps look into https://github.com/CurriculumAssociates/createjs-accessibility ? It’s a library for making Create.js elements parsable by screen reader/assistive technologies
• Rewrite with actual HTML elements instead of canvas draws

Recommended design features

• Add feature for students to customize color theme

• Have a button under advanced settings which opens a modal view

• Dropdown with saved color profiles

• Defaults are normal, inverted color/high contrast

• Modal view

• Have color selectors for each element e.g. navbar, background, block categories

• Store profiles in localStorage as js object(simple one-way key->pair map)

• (very crude) mockup of modal that appears on click: (see attachment for picture)

• Add samples of a voice singing “do, re, mi…” and so on to pie menus

• Customize for octaves and accidentals

• Rewrite rendering system in more screen-reader friendly format

• React maybe? Much nicer state handling + forces modularity compared to the weird vanilla js / html stuff we have going on right now. Also smart re-rendering.

• Use a CreateJS accessibility library https://github.com/CurriculumAssociates/createjs-accessibility

• Could also port from CreateJS rendering to native HTML elements. Things like moving blocks would be done via manually editing DOM.

• Would have to rewrite rendering system and updates (reimplement createjs.Tween and update handling)

• Replace everything that uses createJS objects with HTML/SVG e.g. sphere objects, CreateJS.Text objects, etc etc

• Take care to preserve all functionality that createJS provides e.g. touchscreen support

• Advantages: More lightweight than including React/some other library, don’t have to rewrite other things

• Canvas is inherently inaccessible, so other than using an accessibility library we must port/rewrite to an extent.

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility

Hi! My colleague and I have been working on implementing the color selectors for different elements (currently the nav bar) and were wondering how we could override the materialize css class properly in order to make these changes?