Accessible design in MAAS
The design team were tasked in making MAAS accessible. How did we make this happen?
Firstly, we needed to reference WCAG 2.0 accessible guidelines and understand the four principles of accessibility: Perceivable, Operable, Understandable and Robust. This then enabled us to determine design goals from these principles to achieve Level A. Another great resource was WebAIM which acted as a guide to define and document improvements and solutions.
Design principles
- Perceivable — Users must be able to perceive the information being presented
- Operable — Users must be able to operate the interface
- Understandable — Users must be able to understand the information as well as the operation of the interface
Our process
Myself and Maria (UX designer) planned a workshop to perform an audit of MAAS going through each page and outlining design requirements needed, and to investigate and solve these issues to pass Level A. To drive ideas and inspiration we did a lot of research looking into accessible design, one particular article that stood out for me was ‘dos and donts on designing for accessibility’ by gov.uk. It was very insightful and helped me approach accessibility from a design perspective rather than following a prescriptive guide step-by-step.
Our challenges
Perceivable — Colour
Colour is not to be used as the only visual means of conveying information, and in MAAS use of colour isn’t used widely but we still needed to provide users the information conveyed with colour through another visual means. Ensuring that users who cannot see colour can still perceive the information we present in the interface whether it be icons or text.
Good colour contrasts are vital in the visual presentation of text and images, a minimum requirement of contrast ratio needs to be at least 4.5:1 to be level AA compatible. So our first step was to review colours used in the app to make sure they adhere to those guidelines, we needed to adjust our palette slightly and this resulting in us changing our global colour palette. We then reviewed all our Cloud products; Juju, Snappy and Landscape as well as our framework Vanilla and updated colours so they are accessible and consistent.
Operable — Navigation
Like any web application or website a global navigation bar is a well-established convention, so users expect it there. More importantly, though, a set of links that reflects the user interface’s content structure and is visible to users from every page. In MAAS it gives users an overview of the UI and helps them find what they need, but in terms of section content per page this was a problem as content wasn’t discoverable to users and resulted in long page scrolling to become visible.
We needed to provide ways to help users navigate, find content, and determine where they are. We solved this challenge by creating a secondary navigation containing section content for that specific page, resulting in visible and clear links to correct context for a user to understand.
Understandable — Assistance
Input assistance is vital for users of MAAS as it involves completing form fields and configuring your physical servers, so usable and accessible form validation is essential. We surfaced input errors but it wasn’t designed correctly in accordance of accessible guidelines. Revisiting our forms is MAAS we had to keep some principles in mind. Firstly, that form input is identified and the validation is described to the user in text and secondly, the form needs to be in a logical order, include clear labels and placeholder text if needed.
Looking forward
This was a great exercise and with the right focus, I found that any design challenge can be met in a way that meets the needs of users including those with disabilities.
Accessibility will not force you to make a website or application that is ugly, boring, or cluttered. It will introduce a set of constraints to incorporate as you consider your design. Which in turn will give you new ideas to explore that will lead to better products for users.
