Introduction to Accessibility
Microsoft is committed to making its products and services accessible to everyone.
The Windows UI Accessibility Guidelines provide essential information for developers
to create applications that are usable by people with a wide range of disabilities,
including visual, auditory, motor, and cognitive impairments.
Accessibility is not an afterthought; it's a fundamental aspect of good design and development.
By adhering to these guidelines, you contribute to a more inclusive digital world and
broaden your application's reach.
Core Design Principles for Accessibility
Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
This means users must be able to perceive the information being presented (it can't be invisible
to all of their senses).
- Provide text alternatives for non-text content.
- Provide captions and other alternatives for multimedia.
- Create content that can be presented in different ways (e.g., simpler layout) without losing meaning.
- Make it easier for users to see and hear content.
Operable
User interface components and navigation must be operable. This means that users must be able to
operate the interface (the interface cannot require interaction that a user cannot perform).
- Make all functionality available from a keyboard.
- Give users enough time to read and use content.
- Do not design content in a way that is known to cause seizures.
- Provide ways to help users navigate, find content, and determine where they are.
Understandable
Information and the operation of the user interface must be understandable. This means that users
must be able to understand the information as well as the operation of the user interface (the content
cannot be understood in a way that it would be unintuitive or confusing).
- Make text content readable and understandable.
- Make web pages appear and operate in predictable ways.
- Help users avoid and correct mistakes.
Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents,
including assistive technologies.
- Maximize compatibility with current and future user agents, including assistive technologies.
Accessible Interaction Patterns
Keyboard Navigation
All interactive elements, such as buttons, links, input fields, and menus, must be fully operable
using only the keyboard. Users should be able to navigate through elements in a logical order using
the Tab key and activate elements using Enter or Space.
Ensure a clear visual focus indicator is always present. This helps keyboard users understand which
element is currently active.
// Example: Ensuring elements are focusable and operable
<button>Click Me</button>
<a href="#">Learn More</a>
<input type="text" placeholder="Enter text">
Focus Management
When content changes dynamically (e.g., opening a dialog, displaying an error message), focus should
be managed appropriately to guide the user. For modal dialogs, focus should be trapped within the
dialog until it is closed.
// Example: Managing focus with JavaScript
const dialog = document.getElementById('myDialog');
const closeButton = dialog.querySelector('.close-button');
const firstFocusableElement = dialog.querySelector('button, input, a');
// When dialog opens
firstFocusableElement.focus();
// When dialog closes
// return focus to the element that triggered the dialog
ARIA Attributes
Use Accessible Rich Internet Applications (ARIA) attributes to enhance the semantics of UI elements
for assistive technologies when native HTML elements are insufficient.
role: Defines the purpose of an element (e.g., role="dialog", role="alert").aria-label: Provides a name for an element when text is not visible.aria-describedby: Associates an element with a descriptive element.aria-expanded: Indicates whether a control, like a button for a collapsible section, is expanded or collapsed.
<button aria-expanded="false" aria-controls="collapsible-section">
Expand Details
</button>
<div id="collapsible-section" hidden>
This is the content that can be expanded.
</div>
Accessible Content and Media
Images
All meaningful images must have descriptive alternative text (alt attribute) that conveys
the same information or function as the image. Decorative images can have an empty alt="" attribute.
<img src="logo.png" alt="Company Logo">
<img src="decorative-pattern.svg" alt="">
Forms
Form controls must be clearly labeled. Use the <label> element and associate it with
its control using the for attribute. This helps screen readers identify the purpose of each
input field.
<label for="username">Username:</label>
<input type="text" id="username" name="username">
Provide clear instructions and feedback for form submissions, including error messages. Error messages
should be programmatically associated with the relevant input fields using ARIA.
Color Usage
Do not rely solely on color to convey information, indicate an action, prompt a response, or distinguish
a visual element. Ensure sufficient color contrast between text and its background. The recommended contrast
ratio is at least 4.5:1 for normal text and 3:1 for large text.
Consider users with color blindness. Ensure that information conveyed by color can also be conveyed
through other means, such as text labels, icons, or patterns.