Accessibility

At Microsoft, our mission to help everybody achieve more means that we acknowledge and account for the experiences of different backgrounds, perspectives, and abilities. In design, we do that by recognizing and remedying exclusion, solving for one and extending to many, and learning from diversity.

Building for diverse experiences

A well-built product will provide the same quality experience to everyone, regardless of a particular person’s ability. Fluent’s components meet or surpass WCAG 2.1 AA standards to ensure an accessible foundation. Follow these guidelines to make sure that you use our building blocks to create accessible, delightful experiences.

Use the checkpoints listed here as foundational guidelines to building accessible experiences.

A clear structure and hierarchy makes navigating an experience intuitive and fluid. Organize information in a logical and predictable way that helps people see relationships, make connections, and find their way around. Use tools like the type ramp and text formatting, color, dividers, and spacing to create groupings and levels of importance within an interface.

Top tip: create scannable headings

Section headings with large or bold text can help visual users quickly scan and understand information for efficient navigation. To enhance navigation efficiency for everyone, use heading elements in a logical order.

Use consistent heading hierarchies

Don’t mix up heading levels or overuse large headings

Keep in mind the diverse ways people interact with and move through an experience. Many people will choose to use a keyboard to navigate a page. And assistive technologies, like screen readers or text-to-braille, allow every user to interact with our products seamlessly.

Always account for these interactions when designing an interface.

Top tip: manage focus

Manage focus to help those who rely on the keyboard by letting them visually determine what will they interact with. Focus should follow ”z“ pattern from left to right and top to bottom and not be “lost” after someone closes a temporary UI, like a dialog.

Color

Colors in Microsoft experiences must pass WCAG AA contrast ratios. Standard text must have a contrast ratio of at least 4.5:1 with the background. Large text (above 18.5 pixels Bold, or 24 pixels Regular) must have a contrast ratio of at least 3:1. Interactive components and non-textual components (like icons) must have a contrast ratio of at least 3:1 against adjacent colors.

Responsive layouts

Users have different priorities and requirements that affect how they view the content. They can specify their preferences for portrait or landscape orentation as well as zoom levels. An application should respond and reflow content without losing information.

Top tip: design for zoom

Design page layouts so that content reflows and can be presented without horizontal scrolling for zooms up to 400%. This means designing down to a 320 pixel breakpoint. Design for text zoom up to 200% without content clipping.

Platform distinction

The scale on Android devices may vary by manufacturer versions.

Rich media and alternatives

People learn and understand information in different ways. Using images, graphics, and videos can make content easier to comprehend for many people, in particular for those with cognitive and learning disabilities. They can also serve as cues that are used by people with visual impairments to orient themselves in the content.

However, you should always provide alternatives to rich media so that people who can’t perceive the visual or audio information don’t miss out on the same content.

Top tip

Provide descriptive alt text for visual media that is accessible to screen readers. When rendering closed captions on video media, make them customizable so that anyone can set their own contrast preferences. If customizability isn’t feasible, be sure to provide sufficient color contrast.

Meaningful text

To create an experience built for focus, use helpful and plain language when designing your interface. Be as concise, consistent, and descriptive as possible. Every sentence should communicate something new and meaninful. Follow the content design guidance and the read the content section of each component’s usage guidance for more info.

Top tip: Keep it simple

Steer clear of overly complicated or specific language. This makes skimming information easy and also helps people who may not have English as a first language.

Code standards

Inclusive design means we think about accessibility from the first wireframe to the last div. Follow web standards for writing logical and semantic code. Refer to the WAI-ARIA authoring practices for a detailed guide to developing accessible experiences.

WAI-ARIA authoring
Web Accessibility Initiative

Design accessibility specs

When creating design specifications, documenting considersations for people using assistive technologies are just as important as padding and colors. Carefully consider and communicate the intended interactions across devices and detail elements like focus order, screen reader annotations, and semantic structure.