Accessibility case study: Microsoft Wayfinding

We were recently tasked to create a Wayfinding XP for the Microsoft booth at the Mobile World Congress 2022. The scope of the Wayfinding was to browse and locate who was demoing what at the Microsoft booth.

Designing for basic accessibility usually includes positioning the navigation towards the bottom of the screen, using readable font sizes and high color contrast. This time we wanted to go the extra mile and support Text-to-Speech and a dedicated keypad for users with impaired vision and restricted mobility.

After some research, we decided to use the NavPad by Storm Interface. Through its utility, you can program the keys and simulate real keyboard events like pressing an arrow key. Those triggers can be captured by Intuiface to execute specific actions.

At first, we thought we could seamlessly navigate the normal UI using arrow keys, but we quickly learned that most collections are not friendly to a step by step navigation. A major limit stands in the ability to simulate a tap on a specific button when this is part of an Excel collection. Therefore we opted to create a separate accessible UI that could be navigated with the keypad.

accessible intuiface

The accessible UI is based on the asset flow collection and the Intuiface accessibility sandbox. In essence, there is an Excel file that defines the hierarchy of the menu system (in our case Main Menu > Categories > Partners) and dynamically generates an Intuiface command to scroll the asset flow and the selection box based on what key is being pressed.

This solution seems to work well overall, but it gets a bit complex to maintain as the number of menu levels increases. In the future, if Intuiface will support the ability to Tab through various UI elements, all these workarounds will not be necessary. In the meantime, Iā€™m thankful of the current accessible features that are already available in the product.

9 Likes

Thanks for sharing. A very smart way of increasing accessibility. I agree that tabing would make such developments more accessible. For example: when filling in a check-in form on a Kiosk. Type first name, then TAB to Last name, etc.

1 Like