Designing with accessibility in a Microsoft product having 800M+ consumers
Four elementary steps to make web designs more accessible
Some context —
As a UX designer at Microsoft, I had the opportunity to work on Azure- one of the largest cloud computing service in the world. The platform helps building, testing, deploying, and managing applications and services through a global network of Microsoft-managed data centers, and my team and I were responsible for building the monitoring service within this giant beast.
Planning out the structure to incorporate accessibility guidelines required some researching, brainstorming and a team of enthusiastic PMs, developers and a designer (me). Already having access to an integrated accessibility platform at Microsoft made it easier for us to kick-start the project within a couple of days.
What exactly is accessibility and why we should take it seriously?
Accessibility is building applications that can be used by a wide range of people, including those with visual, motor, auditory, speech, or cognitive disabilities. This includes target users, as well as those outside that demographic- users with disabilities, impairments, users from different cultures, countries etc.
Azure, being a monitoring dashboard is widely used by a gamut of consumers all across the globe. These users belong to different age groups, have diverse use-cases, disparate levels of proficiency in technology, and extremely distinct durations of time spent on the platform. Various features like switching themes, personalising the dashboard and creating customised interfaces were already a part of the portal, and our job was to augment this experience within the monitoring service by incorporating accessibility.
Below are some simple steps we followed to make Microsoft Azure more friendly and natural for our users. These principles focus solely on web accessibility:
1. The right amount of contrast
The color contrast between the foreground and background can have a huge impact on the legibility of a website. This is applicable for all content and information ranging from bodies of text to visuals. To meet W3C’s minimum AA rating, the background-to-text contrast ratio should be at least 4.5:1. Hence, while designing elements like navigation bars, headers or call to actions, it is necessary to ensure the color contrast ratios.
Also, oversaturated or high contrasting colors can be uncomfortable and distracting, especially to those on the autism spectrum. On the other hand, poor contrast between foreground and background colors make it harder to see for users with low vision, using a low-end monitor, or who are just in direct sunlight. To ensure a smooth experience, it is necessary to maintain a natural balance of colors when they are combined.
How to test this? 🤔
Ensure your design and colors work well in different settings of ‘High Contrast’ modes. This avoids the text from becoming invisible on certain contrast-mode backgrounds. There are several online contrast checker tools available which calculate the score for both text and solid visuals within the screen.
WebAIM color contrast checker, Level access, Contrast Checker
2. Legible font sizes
The font across the screen should be extremely easy to read. While it’s true that cursive and decorative font styles are less legible, more than the font family it’s the font style that plays an important role in a fonts readability.
Microsoft recommends using the Segoe UI font for the UI — the minimum font size being 12px with at least 8 pixels of spacing. Small, italicised, and all uppercase text are also difficult for users, hence should be prevented. Overall, larger text, shorter line lengths, taller line heights, and increased letter spacing can help all users have a better reading experience. Also, today’s browsers can be used on any device of any size, from a small watch to a huge 4K screen. Hence these sizes must be as responsive as the design itself.
How to test this? 🤔
Firstly, it is recommended to design on a 1366×768 size for desktops and laptops. Textual sections with narrow widths are easier to read for all people, especially those with reading or vision impairments. The WCAG (Web Content Accessibility Guidelines) recommends keeping a line of text’s character count below 80 characters. Avoid using justified text as far as possible, and allow users to zoom into your site 200% without having to scroll horizontally.
3. Don’t rely just on color
Azure, being heavily dependent on various data and visualizations, consists of elements with more complex information like charts, distributions and graphs. These can be a gruelling task when only color is used to distinguish the data segments. Various visual aspects to communicate information like shape, labels, and size should be used to make more sense. Another simple method of incorporating accessibility is adding patterns filled or solid regions with respective legends to make the differences more apparent. This assists people with low visual acuity and color blindness interpret the content without being dependent solely on color.
Here, rather than just using color, two different indicators- form (circle/ triangle) and icons (cross, tick, exclamation) are used to distinguish between states.
How to test this? 🤔
A good exercise is to view the designs in greyscale and see if all the elements can be interpreted with ease. For digital testing, different apps like Color Oracle and SimDaltonism which show what people with common color vision impairments see in real time can be used.
4. Keyboard navigation and voice
A large number of users with visual disabilities use voiceover softwares to navigate through the web. These tools convert text to speech so that the person can hear the words on a site. The voice assistant basically reads the entire interface and allows them to interact with the site while the user clicks Alt+Tab. Hence keyboard accessibility is one of the most critical aspects of accessibility.
While designing for Azure, it was crucial for the tab order to follow an intuitive flow within the page: left to right, top to bottom — header, content, and visualizations, and then the footer. As the user parses through the information,
Secondly, images and icons were provided with alternative text. The text was kept direct and crisp, and exactly describe what the icon/ image represented.
Eg: When a user lands on an icon, it clearly mentions that it is an icon and what the icon does instead of a generic context.
Lastly, ARIA Labels (Accessible Rich Internet Applications) should indicate landmarks on the website site such as navigation, forms, or sections. This makes it easier for screen readers to parse through information and can also define if extraneous information should hide for screen readers.
How to test this? 🤔
After designing, try parsing through different information chunks by working with screen reader software. JAWS are ChromeVox are some of the many screen readers for visually impaired users. Navigate through your designs by using just the keyboard and assess the accessibility. In short, the better your user is able to visualise an image of the entire interface through just the use of alt-texts, the closer your design is towards being accessible.
Well, that’s about it. Making a website accessible is not as difficult and expensive as it seems. Do keep in mind that accessibility should be solved at the design stage, and not be treated as an add-on during the process.
Here’s the Microsoft resource to help design more inclusive products and experiences: Microsoft Inclusive Design
Hope this was helpful. 😁
Do check out my previous writings on UX design here—
The UX behind designing better forms
The UX behind designing landing pages that convert
This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +391,714 people.
Subscribe to receive our top stories here.
