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 Mar 22nd, 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

This is all super amazing and helpful, thank you.
I can confirm that I can now see modules as alt text. This is helpful when I'm looking at other people's racks, too. Thank you!

Maybe I was looking at the dom weird, but I was suggesting that the container divs have the roles of table, row and cell. This would make it navigable by table. Right now, the current table is below all the graphics; presumably the graphic could be in each cell. This makes it like a grid.

re: the row combobox, when I add a module (with the add icon in the search results), Ican't control where or which row it goes into. And because the mover isn't accessible (I can't just focus on the last module in the row), I can't easily just move everything far right so the next items would be added in the row below.

Thanks again. This is amazing to see; I really appreciate all your work!
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,

re: the row combobox, when I add a module (with the add icon in the search results), Ican't control where or which row it goes into. And because the mover isn't accessible (I can't just focus on the last module in the row), I can't easily just move everything far right so the next items would be added in the row below.

-- eroe

This might be a good time to revisit an idea I brought up a while ago.

...position of pasted module
currently the pasted module is pasted on the next free space on the very top left.
it would be very useful when you track a click event and place it exactly there after pasting.
this would be especially helpful when rearranging a large rack from scratch with 2 browser windows.
-- modular01

Since a single row can often have multiple separate empty spaces, maybe adding modules could be made much more accessible if there was a way to specify not just the target row, but the exact empty slot you want to place it in (as long as the slot is wide enough).

I don't have a concrete idea on how to implement this technically right now, but perhaps this is a useful angle to consider while working out a solution together.