Axe-con 2023: a talk by Miro

Introduction

This year I signed up for Deque’s axe-con (an accessibility conference), and I have to say it is delivering! I am catching up with all of the sessions and they are amazing. I just watched the recording of the talk by Miro’s Phil Strain and Stefano Baldan “Our approach to accessibility at Miro, a real-time collaboration platform”. This call made me even more excited about accessibility, it was really great. Here, I’ll share some of the insights that I got from it!

Background

Visual collaboration tools are often considered inaccessible by default because of their spatial nature. Miro is actively playing a role in changing this view. User interfaces used to be based on linear concepts, when they relied on command line, which is straightforward to navigate. Spatial graphical user interfaces such as modern desktops and smartphones changed and disrupted the linear model, and posed concerns for accessibility.

However, smartphones and desktops were made accessible through voice control, keyboard interaction and more innovations. Miro believes that this shows that spatial collaboration tools have the potential to become accessible products that can bring value to all users.

When Miro ran a WCAG accessibility audit, they found over 300 accessibility problems (WCAG’s principles state that web content must be perceivable, operable, understandable and robust). As of today, Miro managed to fix over 95% of those issues.

W3C also developed Collaboration Tools Accessibility User Requirements, which should be integrated to the WCAG checklist for products like Miro. Miro believes that it’s much better to have an embedded accessibility practice rather than to keep auditing and fixing issues through a waterfall-like approach. At Miro, they created non-functional requirements that PMs need to take into account while developing new features.

Miro’s approach

User research and collaboration with and inclusion of people with disabilities right from the start of a project help drive forward projects that provide amazing user experience to everyone and it leads to building products that have empathy as a funding characteristic.

Some of the challenges that the accessibility team at Miro is facing are: keyboard accessibility, assistive technology, and more things that go beyond these two pillars, which people often mistake for the only two concerns in accessibility.

Keyboard navigation

Keyboard navigation is a fundamental aspect of accessibility. This is inclusive for people who need to use a different way to navigate content than a pointing device. Miro is based on the HTML canvas, which means that everything is rendered as pixels on the screen, which impedes the browser from recognising objects and retrieve semantic information. This results in the need to re create everything that the browser would usually do by-default in terms of keyboard navigation.

Navigation can be linear or hierarchical. To navigate complex pages, the hierarchical model is better performing, allowing to use containers as anchor points. In the Miro board, objects can be placed in a free-from way, which makes it necessary to leverage the spatial relationships between objects. To do so, it is necessary to turn a 2D space into a linear one.

One of the main problem that they faced when trying to linearise the 2D space was the ordering of elements that can be placed randomly on the board. Who among us puts their sticky notes at exactly the same horizontal level? Exactly, nobody. However, they needed to find a solution to be able to navigate with a keyboard through elements in a way that made sense. Based on user feedback, which showed that people would like to see navigation happening following the natural reading order, the team decided to consider two objects to be aligned if they have overlapping coordinates. This approach allows to order elements that are slightly misaligned on the board.

When it comes to spatial navigation, which is concerned with looking for objects nearby in a specific direction, to define the distance among objects. The way we generally consider distance (the shortest path between two points) does not take direction into account, which, as we just said, is fundamental to be able to determine the order of the elements on the screen.

The team solved the problem by weighing the traditional Euclidean distance by the angle that the two objects form with one another. This means that, the wider the angle is, the further away the second object will appear to the system.

Hierarchical navigation is another issue that the Miro team faced because they can’t rely on “traditional” HTML hierarchical elements such as titles. However, they do have container objects (frames), which they used to provide hierarchy for navigation. Frames would be considered as a single object and act as a focus trap. This is an element that needs to be entered to navigate through the subelements, that traps the focus inside and that requires an explicit user action to go back to a higher level of hierarchy. A more common example of focus traps are dropdown menus.

Assistive technology

Keyboard accessibility makes widgets more operable (WCAG principle 2), but objects need to be made more perceivable for people living with low or no vision.

Miro is currently focusing on screen readers to allow users perceive information about objects, actions they perform and collaboration events.

The approach that the team experienced was to create a hidden DOM that turns the board into standard web content, where the screen reader pulls information from the shadow HTML object that was created for every canvas object and then takes care of creating the messages that are outputted to the user. This approach didn’t work for several reasons, but the main one was that it couldn’t capture collaboration, as it heavily relied on focus.

The team tried out a Live region approach, where they created a single HTML element that the screen reader would observe to see changes. This allowed to consider collaborators actions. This approach requires the product to push information to the screen reader, instead of it pulling it automatically, which is a disadvantage. However, the Miro team thought that this approach was still better because it allowed to account for the collaboration happening on the platform.

The “more things”

Keyboard navigation and assistive technologies are fundamental and chore aspects of accessibility. However, they are not the only ones that need to be taken into account to ensure the creation of an inclusive product.

The Miro team included other aspects to their accessibility effort such as:

• Reduce motion: this allows users to turn off animations that happen on the board
• Color names: their color picker shows a tooltip when hovering on a color explaining what color it is
• Command palette: a quickly accessible dropdown menu with the main actions that can be performed on the board
• Canvas background color: can be customised to increase contrast with the objects on the board

Takeaway insights from Miro

At Miro, they believe that a tool is not enough to make collaboration accessible. For this reason, they performed user research to investigate how to foster inclusive meetings as a practice. The collected four categories of recommendations:

• Before the session: have clear objectives, understand needs, accommodate for hybrid meetings, design boards considering accessibility, and communicate efficiently before the session
• During the session: ensure inclusive and adaptive facilitation and collaboration (captions, accessible content,…)
• After the session: ensure that you provide accessible materials and ask for feedback
• At any stage: recognise, be open and intentional and share the value of inclusivity; don’t assume needs and preferences and remember preferences (with consent)

At this link, you can find their guide “10 Principles for Inclusive Collaboration”: https://miro.com/10-principles-for-inclusive-collaboration/

Final thoughts

I was really excited to see big tech companies like Miro, whose service is a visual collaboration tool, see making their product accessible to everyone not just as a challenge but also as an opportunity, kudos to professionals like this 🙌