Audio accessibility in Miro: a hackathon story in 3 acts

By Stefano Baldan

A hackathon project explores how Miro can be more inclusive to non-sighted and low-vision users by incorporating sonification to help them get the most out of Miro boards.

Act 1: The beginning of my accessibility journey

Hello everyone! My name is Stefano, I work as a frontend engineer at Miro, and I’ve got a confession to make: I’m an impostor! That’s true, I’m really not that into frontend development, and of all things I’m most definitely not an engineer.​

I started my career and education in Computer Science at the University of Milan, also known as “Statale.” I was enrolled in a course called “Scienze e Tecnologie della Comunicazione Musicale” (Sciences and Technologies of Musical Communication, in Italian), so most of my lectures were on Digital Signal Processing and Sound and Music Computing. Contrary to what happened at the “Politecnico,” the Engineering faculty of the same city, we were proud of calling ourselves computer scientists — not engineers. We thought of ourselves as wizards of the algorithms, able to cast computational spells using just pen and paper, and then validate them way before feeding them into our machines.​

So, how does somebody like me fit into frontend engineering at Miro? One of the things I love the most about this company is that it’s made of incredibly diverse talents. Everyone of us has something unique to offer, and is constantly offered the opportunity to make an impact following their own interests and using their own superpowers.​

In my case, working a lot with digital sound helped me realize how much I took for granted my ability to use my other senses, especially vision. But what if sound was the only way to perceive my surroundings, instead of one of the possible options? This question was my first step onto the long path that, many years and jobs later, would ultimately lead me to join the Accessibility team at Miro.​

Act 2: The challenge of meeting all users’ needs

My colleagues and I embarked on an incredibly exciting, complex, and challenging mission: to make our online innovation workspace accessible to everyone. I personally can’t think of something more visual than a Miro board, can you? One of the hard problems we have to solve is how to communicate all of that visual information to people who are unable to see it.​

One solution is to enable screen readers to announce collaboration events on Miro. Many non-sighted people already use screen readers to read text on elements that they are focused on, which works well for individual work. But if we were to use a screen reader to announce all collaboration events on a board, it would sound like a meeting room where everyone reads their notes aloud all at the same time. That would be impractical and overwhelming.

Another, more practical solution, is to build what’s called sonification. In other words, associating informative sounds to every event that happens on the board: newly created or deleted content, edited elements, collaborators joining or leaving a board, and so on. Is this the right solution, though? Such a project would involve a lot of work, take up a lot of time, and might not give the desired results. What if the sounds are not informative enough? What if they end up being too loud or distracting?

Act 3: The Miro hackathon process

The Miro hackathons gave us the perfect framework to quickly get a hands-on answer to all of these questions, with the added value of having a lot of fun in the process! They are organized at least once a year, and transform the whole company into a giant think tank where people collaborate across teams, functions, and hubs. Many of the most loved and used features that are now part of Miro actually started as small, yet bold and ambitious projects during past hackathons.

The last one took place this last February. For three days we were not only allowed, but also actively encouraged to experiment with whatever crazy ideas we had in mind.

The first step was the ideation phase. I paired with Kai — an amazing designer on our team — and we bounced ideas off each other (on a Miro board — that goes without saying!). The first wild ideas and random thoughts quickly took shape, and transformed into something that could resemble the scope of a project. We iterated several times over the first draft and progressively refined it, making sure that the goals we set for ourselves could be realistically achievable within the very limited time frame of the three-day hackathon. This is what we came up with:​

• The goal is to extend the perception of collaboration on a Miro board through the use of sound.
• Non-sighted users will be made aware of board collaboration by hearing events on the board, instead of seeing them.
• Sighted users will also benefit from the sonification, which will allow them to hear collaboration events happening outside of their viewport.
• Miro will play a very short, iconic sound every time one of the following events happens on the board:
  – A new widget is created
  – An existing widget is deleted
  – A collaborator enters or exits the user’s viewport
• Sounds will be spatialized on a 2D plane, according to their relative position and distance with respect to the user’s viewport.​

With these constraints in mind, we formulated a two-minute pitch that had to be presented to the whole company before additional members could be recruited for our hackathon team. This was a key aspect of the hackathon: a completely new team was created around every project, to give everyone the opportunity to work with people they wouldn’t otherwise meet in their day-to-day work. Our project was noticed by software engineers Ana and Ruben, and Cat, a technical support engineer. With this team of five diverse talents, we were ready to plunge head first into the challenge!​

Day 1: Kick-off meeting and expert support

The first day started with a short kick-off meeting. We fleshed out the details of our initial plan, and enriched it with contributions and feedback from all the team members. We then assigned ourselves tasks, and decided to work in parallel on separate issues in order to accomplish as much as possible with the little time we had:

• As an experienced React engineer, Ana took care of adding entries to the Settings menu to toggle sounds on and off.
• Ruben joined Miro just the month before, and wanted to challenge himself on the core parts of the product by building the communication layer that would transform board events into commands for the sound engine.
• I took the opportunity to go back to my digital signal processing roots, using the Web Audio APIs to build the spatialized sound sample player.​

Throughout the hackathon we could count on a helpful support team made of experts in several areas of the product. Questions and answers were publicly posted on a dedicated Slack channel so that everybody could read and learn. Creating project-specific teams not only allowed us to have unusual collaboration with different people, but also forced us to work on previously unexplored bits and pieces of our codebase, so the help we received was truly invaluable. The hackathon learnings about the way our product and other teams work still has a concrete impact in my daily work.​

By the end of the first day, the different pieces of the puzzle were done.

Day 2: A prototype and pre-pitch presentation

We decided to start the second day of the hackathon with a remote group programming session, to put the puzzle pieces together into a first working prototype. The excitement was great when, right before lunch, our boards produced the first sounds!

We worked together on our little baby for the rest of the day, until the time of the pre-pitch presentations in the late afternoon. We recorded a two-minute video showing the progress and submitted it to the jury that would choose 16 projects (out of around 50) for the final presentation on the last day. We closed our laptops, crossed our fingers, and hoped for the best in the morning after.​

Day 3: Final presentation and takeaways

The third and last day started with good news: our project made it to the final pitches!

After a quick group call in the morning, Cat started working on the final presentation. In the afternoon, Kai and I recorded a demo video and rehearsed the presentation. At the final presentation, all attendees could see the efforts of our amazing team and hear a sonified Miro board — a feature that less than 72 hours before wasn’t even in the plans!

Here’s a demo:

The other 15 projects were nothing short of awesome, and it was just incredible to see how much our amazing people are able to drive innovation when given the time and opportunity. The final event included prizes and mentions for the best project in several categories. We didn’t win any, but being able to deliver already felt like a huge accomplishment, and bringing sound to Miro boards was most definitely a little personal dream come true.​

Overall, the hackathon was a terrific experience. I had the chance to work on a dream project, with a team of incredibly nice and talented people, and actually make big things happen in almost no time. I’m really looking forward to participating in the next one, and who knows? Maybe we’ll see many of this year’s projects implemented as production-ready features in the months to come!

In the meantime, there’s so much you can do to facilitate more inclusive meetings. Check out our new e-book that details how to make it easier to engage with people with disabilities or access needs. Get your own free copy of 10 Principles for Inclusive Collaboration (PDF).

Also, are you interested in joining the Miro team? Check out our open positions.