Joy Phases - Beta 0.4

Introducing the Accessibility Update! This update makes a lot of improvements for using Joy Phases with a keyboard or screen reader. This tool should be easy to use for everyone!

Features

• Arrow keys can be used to move inside the sequencer
• Pressing Tab when focusing the sequencer move focus to the element after it (or before if Shift is pressed)
• Every buttons and input have now unique labels
• When navigating with keyboards, focused elements are clearly emphasized

Fixes

• On Chrome, audio context is resumed on play (see this update)
• Scale inputs are identified with unique names

I must admit, I didn't find a lot of time to work on this project last week. But I'm glad I could address all its accessibility issues. As basic this tool is, it has some tricky aspects. Like the hundred of buttons that compose the sequencer! Navigating them with only tab was a true burden. Using the arrow keys makes it so much more intuitive! Although there are still the sections buttons below that are a bit fastidious to navigate through. I just don't have any solution for them, except making sure they have all unique labels (screen readers allow to navigate through buttons and input elements by their labels, so it is extremely important to ensure that they are all named clearly and differently).

For the focus style, I used again a js library called what-input that detects if the user is using their mouse or their keyboard, and put an attribute on the body element. Very useful for styling, since a user using a mouse doesn't need to be reminded that they clicked on a button, but it is essential for a user interacting with a keyboard to see immediately what is currently focused. The focus styling isn't very pretty, but that's not the point: above all, it must be obvious to see. Although I must say that's the first time I use box-shadow for that purpose, and I'm happy with the result. It stays consistent with the design, do not rely on colors, and most importantly do not change the elements size (as a border would have).

Now if everything works well, next update should be the last! Just a little additional feedback for the user, more icons, and tiny features… And it should be ready for release! See you then.