Hi all,
I am a totally blind user, relying on a screen reader.
I'm building my first eurorack setup and would really love to create a modulargrid version so that I can share it out with others.
This is sort of usable, but it's a bit tough. I'm curious if there's a chance that I could help work on this to make it accessible (I'm fluent with python/php/javascript) or if people here are open to suggestions.
Here are my ideas just starting:

• add a role of h2 to all the module titles in search results; this will make it faster to view.
• When adding modules, it would be really helpful if there was a "row" combobox that was bounded from 1 to max rows, so if I click add and I'm on row 2, I can add it to row 2 (right now, I can only make one horribly long row)
• Can you add the module name to the alt text of a module? This would make it easy to view. Maybe even (hp) at the end so you know how many hp the module is?
• The following won't change the appearance but will make this navigable by table:
  • The enclosing container is a div with id of restraint. Add role="table" to this.
  • The rows are a div with class grid-row. Add role="row" to this.
  • for cells, add role="cell".
• A switch in the module build to make modules focusable. This would add tabindex="0" to the module images. Then you can focus on it and use the keyboard commands.
• Some way to select a slot (if I have module A and B and move B to the right, I might want to add a blank panel here.
• Where you have icons (like on the "add" links, for example, consider adding an aria-label like aria-label="add", which will announce the link as what it is. Right now they read as questionmarks.

These would make this much more usable.
Thanks,

EDITED Sunday March 22, 07:16

All great input. I am looking into it and will check back later.

I did some changes today however I am not sure if I did it right

• add a role of h2 to all the module titles in search results; this will make it faster to view.

module title h3 tags are now h2 tags

• When adding modules, it would be really helpful if there was a "row" combobox that was bounded from 1 to max rows, so if I click add and I'm on row 2, I can add it to row 2 (right now, I can only make one horribly long row)

I don't quite understand this request

• Can you add the module name to the alt text of a module? This would make it easy to view. Maybe even (hp) at the end so you know how many hp the module is?

modules in the planner now have module name and width in the alt

• The following won't change the appearance but will make this navigable by table:
  • The enclosing container is a div with id of restraint. Add role="table" to this.
  • The rows are a div with class grid-row. Add role="row" to this.
  • for cells, add role="cell".

I did all this but I am not sure if that is right and working. The #restrain is just the grid for the modules where they "snap in", the modules self are in div#modules which are positioned absolute on top.

• A switch in the module build to make modules focusable. This would add tabindex="0" to the module images. Then you can focus on it and use the keyboard commands.
• Some way to select a slot (if I have module A and B and move B to the right, I might want to add a blank panel here.

I have to look deeper in this.

• Where you have icons (like on the "add" links, for example, consider adding an aria-label like aria-label="add", which will announce the link as what it is. Right now they read as questionmarks.

I changed that on the module browser.

These would make this much more usable.
Thanks,

-- eroe

Check back what is improved and what is not, best, Knut