|
1 | 1 | When designing an application, it's important to consider how it will function with a keyboard, just as it would with a mouse. |
2 | 2 |
|
3 | | -Start by determining the hierarchy and order of elements and decide which keys will be used for navigation and actions. |
4 | | - |
5 | | -Specify visual indicators for keyboard focus, such as changing the fill color or adding outlines. This ensures a consistent and cohesive experience across different themes, including high-contrast mode and compliance with contrast requirements. |
6 | | - |
7 | | -:::image type="complex" source="../media/keyboard-focus-visual-indicators.png" alt-text="Screenshot showing focus indicators for buttons." lightbox="../media/keyboard-focus-visual-indicators.png"::: |
8 | | - The image consists of two sections. The top section displays three buttons—Simplified Ribbon, Go Premium, and Sign Out—in their normal state. The bottom section shows the same buttons in their focused state, highlighting focus indicators: dots, fill color, and outlines. |
9 | | -:::image-end::: |
10 | | - |
11 | | -Decide if the keyboard focus should stay within a container while navigating. For example, pressing the **Tab** key should cycle through elements within a specific section without moving to other areas of the app. Also, specify where the focus should go after certain events, like expanding and dismissing a dropdown menu or if an element disappears. |
12 | | - |
13 | | -Determine whether users can navigate to disabled controls. For instance, in some dialogs, you can't navigate to disabled controls until they are enabled. Additionally, specify any keyboard shortcuts to improve efficiency. |
14 | | - |
15 | | -Only include interactive elements in the keyboard navigation. For example, navigating to a description area should not trigger any actions. |
16 | | - |
17 | | -:::image type="complex" source="../media/focus-order-accessibility-annotation-teams-meeting.png" alt-text="Screenshot of Teams meeting with focus order annotations." lightbox="../media/focus-order-accessibility-annotation-teams-meeting.png"::: |
18 | | - Focus Order Accessibility Annotation Teams meeting Image Description: Image of Teams meeting with Gallery and People tile defined as custom component, Overflow as library component, Drop-down menu as parent component and make me a signer is one of the child components. Each section has numerical labels indicating the focus order. |
19 | | -:::image-end::: |
20 | | - |
21 | | -:::image type="complex" source="../media/focus-order-accessibility-annotation.png" alt-text="Screenshot of Teach Access homepage with focus order annotations." lightbox="../media/focus-order-accessibility-annotation.png"::: |
22 | | - Image of the Teach Access homepage, with focus order accessibility annotations on two sections labeled "Who We Are" and "What is the accessibility Skills Gap?" Each section has numerical labels indicating the focus order. |
23 | | -:::image-end::: |
24 | | - |
25 | | -To make keyboard shortcuts discoverable, add documentation within the app, such as tooltips that show shortcuts when hovering and Keyboard focus over buttons, and include a section on keyboard navigation in the online help. |
26 | | - |
27 | | -:::image type="complex" source="../media/shortcut-keys-accessibility-annotation.png" alt-text="Screenshot showing shortcut keys annotations." lightbox="../media/shortcut-keys-accessibility-annotation.png"::: |
28 | | - Example of accessibility annotations for shortcut keys, with the shortcuts “Ctrl+Shift+M”=Mute “, Ctrl+Shift+E”=Share Content, and. “Ctrl+Shift+H”=Leave Meeting |
29 | | -:::image-end::: |
30 | | - |
31 | | -:::image type="complex" source="../media/keyboard-interactions-accessibility-annotations.png" alt-text="Screenshot showing keyboard interactions and shortcuts." lightbox="../media/keyboard-interactions-accessibility-annotations.png"::: |
32 | | - Example of accessibility annotations for keyboard interactions and shortcuts, with the text “Bold” button = Ctrl+B, “Italic” button = Ctrl+I, and “Underline” button = Ctrl+U |
33 | | -:::image-end::: |
| 3 | +- Start by determining the hierarchy and order of elements and decide which keys will be used for navigation and actions. |
| 4 | +- Specify visual indicators for keyboard focus, such as changing the fill color or adding outlines. This ensures a consistent and cohesive experience across different themes, including high-contrast mode and compliance with contrast requirements. |
| 5 | +- Decide if the keyboard focus should stay within a container while navigating. For example, pressing the **Tab** key should cycle through elements within a specific section without moving to other areas of the app. Also, specify where the focus should go after certain events, like expanding and dismissing a dropdown menu or if an element disappears. |
| 6 | +- Determine whether users can navigate to disabled controls. For instance, in some dialogs, you can't navigate to disabled controls until they are enabled. Additionally, specify any keyboard shortcuts to improve efficiency. |
| 7 | +- Only include interactive elements in the keyboard navigation. For example, navigating to a description area should not trigger any actions. |
| 8 | +- To make keyboard shortcuts discoverable, add documentation within the app, such as tooltips that show shortcuts when hovering and Keyboard focus over buttons, and include a section on keyboard navigation in the online help. |
34 | 9 |
|
35 | 10 | By planning these details before implementation, you can create a more accessible and user-friendly design. |
36 | 11 |
|
|
0 commit comments