You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: hub/apps/design/accessibility/accessibility-checklist.md
+35-37Lines changed: 35 additions & 37 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,67 +12,65 @@ ms.localizationpriority: medium
12
12
13
13
# Accessibility checklist
14
14
15
-
This topic provides recommendations for making your Windows app accessible and discoverable to customers looking for accessible apps in the Microsoft Store.
15
+
This article provides recommendations for making your Windows app accessible and discoverable to customers looking for accessible apps in the Microsoft Store. Use the following recommendations during design, implementation, and testing. Together, they cover core accessibility expectations for keyboard use, readable content, assistive technology compatibility, and Microsoft Store discoverability.
16
16
17
-
> [!NOTE]
18
-
> This guidance is written for WinUI 3 / Windows App SDK apps. If you are maintaining a legacy UWP app, equivalent APIs are available in the `Windows.UI.Xaml` namespaces.
17
+
## 1. Set accessible names and descriptions
19
18
20
-
Use the following recommendations during design, implementation, and testing. Together, they cover core accessibility expectations for keyboard use, readable content, assistive technology compatibility, and Microsoft Store discoverability.
19
+
Set the accessible name (required) and description (optional) for content and interactive UI elements in your app.
21
20
22
-
1. Set the accessible name (required) and description (optional) for content and interactive UI elements in your app.
21
+
An accessible name is a short, descriptive text string that a screen reader uses to announce a UI element. Some UI elements such as [TextBlock](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textblock) and [TextBox](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textbox) promote their text content as the default accessible name; see [Name from inner text](basic-accessibility-information.md#name-from-inner-text).
23
22
24
-
An accessible name is a short, descriptive text string that a screen reader uses to announce a UI element. Some UI elements such as [TextBlock](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textblock)and [TextBox](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textbox) promote their text content as the default accessible name; see [Name from inner text](basic-accessibility-information.md#name-from-inner-text).
23
+
You should set the accessible name explicitly for images or other controls that do not promote inner text content as an implicit accessible name. You should use labels for form elements so that the label text can be used as a [LabeledBy](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.automation.automationproperties.labeledby) target in the Microsoft UI Automation model for correlating labels and inputs. If you want to provide more UI guidance for users than is typically included in the accessible name, accessible descriptions and tooltips help users understand the UI.
25
24
26
-
You should set the accessible name explicitly for images or other controls that do not promote inner text content as an implicit accessible name. You should use labels for form elements so that the label text can be used as a [LabeledBy](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.automation.automationproperties.labeledby) target in the Microsoft UI Automation model for correlating labels and inputs. If you want to provide more UI guidance for users than is typically included in the accessiblename, accessible descriptions and tooltips help users understand the UI.
25
+
For more info, see [Accessible name](basic-accessibility-information.md#accessible-name)and [Accessible description](basic-accessibility-information.md).
27
26
28
-
For more info, see [Accessible name](basic-accessibility-information.md#accessible-name) and [Accessible description](basic-accessibility-information.md).
27
+
## 2. Implement keyboard accessibility
29
28
30
-
2. Implement keyboard accessibility:
29
+
- Test the default tab index order for a UI. Adjust the tab index order if necessary, which may require enabling or disabling certain controls, or changing the default values of [TabIndex](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.tabindex) on some of the UI elements.
30
+
- Use controls that support arrow-key navigation for composite elements. For default controls, the arrow-key navigation is typically already implemented.
31
+
- Use controls that support keyboard activation. For default controls, particularly those that support the UI Automation [Invoke](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.automation.provider.iinvokeprovider.invoke) pattern, keyboard activation is typically available; check the documentation for that control.
32
+
- Set access keys or implement accelerator keys for specific parts of the UI that support interaction.
33
+
- For any custom controls that you use in your UI, verify that you have implemented these controls with correct [AutomationPeer](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.automation.peers.automationpeer) support for activation, and defined overrides for key handling as needed to support activation, traversal and access or accelerator keys.
31
34
32
-
- Test the default tab index order for a UI. Adjust the tab index order if necessary, which may require enabling or disabling certain controls, or changing the default values of [TabIndex](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.tabindex) on some of the UI elements.
33
-
- Use controls that support arrow-key navigation for composite elements. For default controls, the arrow-key navigation is typically already implemented.
34
-
- Use controls that support keyboard activation. For default controls, particularly those that support the UI Automation [Invoke](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.automation.provider.iinvokeprovider.invoke) pattern, keyboard activation is typically available; check the documentation for that control.
35
-
- Set access keys or implement accelerator keys for specific parts of the UI that support interaction.
36
-
- For any custom controls that you use in your UI, verify that you have implemented these controls with correct [AutomationPeer](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.automation.peers.automationpeer) support for activation, and defined overrides for key handling as needed to support activation, traversal and access or accelerator keys.
35
+
For more info, see [Keyboard interactions](../input/keyboard-interactions.md).
37
36
38
-
For more info, see [Keyboard interactions](../input/keyboard-interactions.md).
37
+
## 3. Ensure text is a readable size
39
38
40
-
3. Ensure text is a readable size
39
+
Windows includes various accessibility tools and settings that users can take advantage of and adjust to their own needs and preferences for reading text. These include:
41
40
42
-
- Windows includes various accessibility tools and settings that users can take advantage of and adjust to their own needs and preferences for reading text. These include:
43
-
- The Magnifier tool, which enlarges a selected area of the UI. You should ensure the layout of text in your app doesn't make it difficult to use Magnifier for reading.
44
-
- Global scale and resolution settings in **Settings->System->Display->Scale and layout**. Exactly which sizing options are available can vary as this depends on the capabilities of the display device.
45
-
- Text size settings in **Settings->Ease of access->Display**. Adjust the **Make text bigger*- setting to specify only the size of text in supporting controls across all applications and screens (XAML text controls support text scaling without additional customization in standard scenarios).
46
-
> [!NOTE]
47
-
> The **Make everything bigger*- setting lets a user specify their preferred size for text and apps in general on their primary screen only.
41
+
* The Magnifier tool, which enlarges a selected area of the UI. You should ensure the layout of text in your app doesn\'t make it difficult to use Magnifier for reading.
42
+
* Global scale and resolution settings in **Settings->System->Display->Scale and layout**. Exactly which sizing options are available can vary as this depends on the capabilities of the display device.
43
+
* Text size settings in **Settings->Ease of access->Display**. Adjust the **Make text bigger** setting to specify only the size of text in supporting controls across all applications and screens (all WinUI text controls support the text scaling experience without any customization or templating).
48
44
49
-
4.Visually verify your UI to ensure that the text contrast is adequate, elements render correctly in the high-contrast themes, and colors are used correctly.
45
+
## 4. Verify color and contrast
50
46
51
-
- Use a color analyzer tool to verify that the visual text contrast ratio is at least 4.5:1.
52
-
- Switch to a high contrast theme and verify that the UI for your app is readable and usable.
53
-
- Ensure that your UI doesn't use color as the only way to convey information.
47
+
Visually verify your UI to ensure that the text contrast is adequate, elements render correctly in the high-contrast themes, and colors are used correctly.
54
48
55
-
For more info, see [High-contrast themes](high-contrast-themes.md) and [Accessible text requirements](accessible-text-requirements.md).
49
+
* Use a color analyzer tool to verify that the visual text contrast ratio is at least 4.5:1.
50
+
* Switch to a high contrast theme and verify that the UI for your app is readable and usable.
51
+
* Ensure that your UI doesn\'t use color as the only way to convey information.
56
52
57
-
5. Run accessibility tools, address reported issues, and verify the screen reading experience.
53
+
For more info, see [High-contrast themes](high-contrast-themes.md) and [Accessible text requirements](accessible-text-requirements.md).
58
54
59
-
Use tools such as [Inspect](/windows/desktop/WinAuto/inspect-objects) to verify programmatic access, run diagnostic tools such as [AccChecker](/windows/desktop/WinAuto/ui-accessibility-checker) to discover common errors, and verify the screen reading experience with Narrator.
55
+
## 5. Run accessibility tools and verify screen reading
60
56
61
-
For more info, see [Accessibility testing](accessibility-testing.md).
57
+
Use tools such as [Inspect](/windows/desktop/WinAuto/inspect-objects) to verify programmatic access, run diagnostic tools such as [AccChecker](/windows/desktop/WinAuto/ui-accessibility-checker) to discover common errors, and verify the screen reading experience with Narrator.
62
58
63
-
6. Add automated accessibility regression checks to your CI pipeline.
59
+
For more info, see [Accessibility testing](accessibility-testing.md).
64
60
65
-
Run automated checks for critical screens and flows in pull requests and continuous integration. Configure your pipeline to block merges or releases when critical accessibility regressions are detected.
66
61
67
-
7. Make sure your app manifest settings follow accessibility guidelines, see [Security Considerations for Assistive Technologies](/windows/win32/winauto/uiauto-securityoverview).
62
+
## 6. Add automated accessibility regression checks to your CI pipeline.
68
63
69
-
8. Declare your app as accessible in the Microsoft Store.
64
+
Run automated checks for critical screens and flows in pull requests and continuous integration. Configure your pipeline to block merges or releases when critical accessibility regressions are detected.
70
65
71
-
If you implemented the baseline accessibility support, declaring your app as accessible in the Microsoft Store can help reach more customers and potentially improve ratings.
66
+
## 7. Verify app manifest settings
67
+
Make sure your app manifest settings follow accessibility guidelines, see [Security Considerations for Assistive Technologies](/windows/win32/winauto/uiauto-securityoverview).
72
68
73
-
For more info, see [Accessibility in the Store](accessibility-in-the-store.md).
69
+
## 8. Declare your app as accessible in the Microsoft Store.
74
70
75
-
## Related topics
71
+
If you implemented the baseline accessibility support, declaring your app as accessible in the Microsoft Store can help reach more customers and potentially improve ratings. See [Accesibility in the Store](accessibility-in-the-store.md)
72
+
73
+
## Related topics
76
74
77
75
-[Accessible text requirements](accessible-text-requirements.md)
Copy file name to clipboardExpand all lines: hub/apps/design/accessibility/accessibility-overview.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -62,7 +62,7 @@ There are several other automation properties available (including the keyboard
62
62
63
63
Building keyboard accessibility (for traditional, modified, or keyboard emulation hardware) into your app, helps users who are blind, have low vision, or have motor control issues, to navigate through and use the full functionality of your app. It also lets users without disabilities choose the keyboard for navigation due to preference or efficiency.
64
64
65
-
The basic XAML control model provides built-in keyboard support including tab navigation, text input, and control-specific support. The elements that serve as layout containers (such as panels) use the layout order to establish a default tab order and provide an accessible representation of the UI. [ListBox](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.listbox) and [GridView](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.gridview) controls provide built-in arrow-key navigation. [Button](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.button) controls handle the Spacebar or Enter keys for button activation.
65
+
The basic XAML control model provides built-in keyboard support including tab navigation, text input, and control-specific support. The elements that serve as layout containers (such as panels) use the layout order to establish a default tab order and provide an accessible representation of the UI. [ListView](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.listview) and [GridView](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.gridview) controls provide built-in arrow-key navigation. [Button](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.button) controls handle the Spacebar or Enter keys for button activation.
66
66
67
67
For more info about all the aspects of keyboard support, including tab order and key-based activation or navigation, see [Keyboard accessibility](keyboard-accessibility.md).
Copy file name to clipboardExpand all lines: hub/apps/design/accessibility/accessible-text-requirements.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -118,6 +118,7 @@ You should then validate against Windows text-related accessibility settings, in
118
118
- Magnifier, which enlarges part of the UI. Ensure layout and line wrapping remain readable under magnification.
119
119
- Global scale and resolution settings in **Settings->System->Display->Scale and layout**. Available values vary by display hardware.
120
120
- Text size settings in **Settings->Ease of access->Display**. **Make text bigger** scales text in supported controls across apps and screens (WinUI text controls support this by default).
121
+
121
122
> [!NOTE]
122
123
> The **Make everything bigger** setting lets a user specify their preferred size for text and apps in general on their primary screen only.
0 commit comments