Skip to content

Commit d66c6c1

Browse files
wwlpublishwwlpublish
authored
pull base content,head:wwlpublishsync,into:ab59e5f6558c78779c9542aa906a3167b9c44f0b777154467c953b4b2e0728a5-live
2 parents a87731f + 7ba3524 commit d66c6c1

File tree

66 files changed

+550
-53
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+550
-53
lines changed

‎learn-pr/cela-accessibility/accessibility-design-specs-with-annotations/1-introduction.yml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
### YamlMime:ModuleUnit
2+
uid: learn.cela-accessibility.accessibility-design-specs-with-annotations.introduction
3+
title: Introduction
4+
metadata:
5+
title: Introduction
6+
description: This unit is a part of the accessibility design specs with annotations module.
7+
ms.date: 02/14/2025
8+
author: erzelman
9+
ms.author: erzelman
10+
ms.topic: unit
11+
durationInMinutes: 1
12+
content: |
13+
[!include[](includes/1-introduction.md)]

‎learn-pr/cela-accessibility/accessibility-design-specs-with-annotations/2-overview-accessibility-annotation.yml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
### YamlMime:ModuleUnit
2+
uid: learn.cela-accessibility.accessibility-design-specs-with-annotations.overview-accessibility-annotation
3+
title: Overview of accessibility annotation
4+
metadata:
5+
title: Overview of Accessibility Annotation
6+
description: This unit is a part of the accessibility design specs with annotations module.
7+
ms.date: 02/14/2025
8+
author: erzelman
9+
ms.author: erzelman
10+
ms.topic: unit
11+
durationInMinutes: 20
12+
content: |
13+
[!include[](includes/2-overview-accessibility-annotation.md)]

‎learn-pr/cela-accessibility/accessibility-design-specs-with-annotations/3-annotations-for-keyboard-screen-reader-navigation.yml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
### YamlMime:ModuleUnit
2+
uid: learn.cela-accessibility.accessibility-design-specs-with-annotations.annotations-for-keyboard-screen-reader-navigation
3+
title: Annotations for keyboard and screen reader navigation
4+
metadata:
5+
title: Annotations for Keyboard and Screen Reader Navigation
6+
description: This unit is a part of the accessibility design specs with annotations module.
7+
ms.date: 02/14/2025
8+
author: erzelman
9+
ms.author: erzelman
10+
ms.topic: unit
11+
durationInMinutes: 20
12+
content: |
13+
[!include[](includes/3-annotations-for-keyboard-screen-reader-navigation.md)]

‎learn-pr/cela-accessibility/accessibility-design-specs-with-annotations/4-design-for-color-contrast-requirements.yml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
### YamlMime:ModuleUnit
2+
uid: learn.cela-accessibility.accessibility-design-specs-with-annotations.design-for-color-contrast-requirements
3+
title: Design for color contrast requirements
4+
metadata:
5+
title: Design for Color Contrast requirements
6+
description: This unit is a part of the accessibility design specs with annotations module.
7+
ms.date: 02/14/2025
8+
author: erzelman
9+
ms.author: erzelman
10+
ms.topic: unit
11+
durationInMinutes: 15
12+
content: |
13+
[!include[](includes/4-design-for-color-contrast-requirements.md)]

‎learn-pr/cela-accessibility/accessibility-design-specs-with-annotations/5-knowledge-check.yml

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
### YamlMime:ModuleUnit
2+
uid: learn.cela-accessibility.accessibility-design-specs-with-annotations.knowledge-check
3+
title: Knowledge check
4+
metadata:
5+
title: Knowledge Check
6+
description: This is the knowledge check for the accessibility design specs with annotations module.
7+
ms.date: 02/14/2025
8+
author: erzelman
9+
ms.author: erzelman
10+
ms.topic: unit
11+
durationInMinutes: 2
12+
quiz:
13+
title: Check your knowledge
14+
questions:
15+
- content: What is the primary purpose of annotating design mockups for accessibility?
16+
choices:
17+
- content: To make designs look more colorful
18+
isCorrect: false
19+
explanation: Incorrect. It's important to enhance visual appeal, provide information about the design process, and document the process. However, accessibility annotations specifically focus on making the design accessible to everyone.
20+
- content: To ensure designs can be used by all users, including those with disabilities
21+
isCorrect: true
22+
explanation: Correct. The primary purpose of annotating design mockups for accessibility is to ensure that designs are usable by all users, including those with disabilities.
23+
- content: To provide additional information about the design process
24+
isCorrect: false
25+
explanation: Incorrect. It's important to enhance visual appeal, provide information about the design process, and document the process. However, accessibility annotations specifically focus on making the design accessible to everyone.
26+
- content: To document the design process
27+
isCorrect: false
28+
explanation: Incorrect. It's important to enhance visual appeal, provide information about the design process, and document the process. However, accessibility annotations specifically focus on making the design accessible to everyone.
29+
30+
- content: Which of the following is a critical consideration when implementing keyboard navigation in designs?
31+
choices:
32+
- content: The use of vibrant colors
33+
isCorrect: false
34+
explanation: Incorrect. While vibrant colors, image quantity, and font size are important design elements, they do not directly impact the effectiveness of keyboard navigation. Focus order is key to ensuring smooth navigation for keyboard users.
35+
- content: The logical and intuitive focus order of interactive elements
36+
isCorrect: true
37+
explanation: Correct. The logical and intuitive focus order of interactive elements is crucial when implementing keyboard navigation. This ensures users can navigate through the design in a meaningful and efficient way using only the keyboard, which is essential for accessibility.
38+
- content: The number of images used in the design
39+
isCorrect: false
40+
explanation: Incorrect. While vibrant colors, image quantity, and font size are important design elements, they do not directly impact the effectiveness of keyboard navigation. Focus order is key to ensuring smooth navigation for keyboard users.
41+
- content: The font size of the text
42+
isCorrect: false
43+
explanation: Incorrect. While vibrant colors, image quantity, and font size are important design elements, they do not directly impact the effectiveness of keyboard navigation. Focus order is key to ensuring smooth navigation for keyboard users.
44+
45+
- content: How can screen reader annotations benefit users?
46+
choices:
47+
- content: By providing visual cues for navigation
48+
isCorrect: false
49+
explanation: Incorrect. While visual cues and layout information are important, screen reader annotations primarily help users understand the purpose and interaction of elements, enabling better accessibility.
50+
- content: By conveying information about the type, purpose and specific capabilities of each instance of controls of a page
51+
isCorrect: true
52+
explanation: Correct. Screen reader annotations are crucial for conveying information about how to interact with elements. These annotations ensure that screen reader users can understand the function of different elements, like buttons and links, so they can navigate and interact effectively.
53+
- content: By informing users about the layout and design
54+
isCorrect: false
55+
explanation: Incorrect. While visual cues and layout information are important, screen reader annotations primarily help users understand the purpose and interaction of elements, enabling better accessibility.
56+
- content: By enhancing the overall aesthetic of the interface
57+
isCorrect: false
58+
explanation: Incorrect. While visual cues and layout information are important, screen reader annotations primarily help users understand the purpose and interaction of elements, enabling better accessibility.
59+
60+
- content: What is the purpose of color contrast checkers in accessibility design?
61+
choices:
62+
- content: To ensure colors match the brand guidelines
63+
isCorrect: false
64+
explanation: Incorrect. While brand guidelines and aesthetics are important, the main purpose of color contrast checkers is to ensure accessibility by making sure the text stands out enough from its background for all users to read clearly.
65+
- content: To verify that text, icons and interactive components are easily readable against its background
66+
isCorrect: true
67+
explanation: Correct. Color contrast checkers are used to verify that text is easily readable against its background. This ensures that users, including those with vision impairments, can perceive and read the content without difficulty.
68+
- content: To evaluate the visual appeal of the design
69+
isCorrect: false
70+
explanation: Incorrect. While brand guidelines and aesthetics are important, the main purpose of color contrast checkers is to ensure accessibility by making sure the text stands out enough from its background for all users to read clearly.
71+
- content: To determine the best color palette for aesthetics
72+
isCorrect: false
73+
explanation: Incorrect. While brand guidelines and aesthetics are important, the main purpose of color contrast checkers is to ensure accessibility by making sure the text stands out enough from its background for all users to read clearly.
74+

‎learn-pr/cela-accessibility/accessibility-design-specs-with-annotations/6-summary.yml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
### YamlMime:ModuleUnit
2+
uid: learn.cela-accessibility.accessibility-design-specs-with-annotations.summary
3+
title: Summary
4+
metadata:
5+
title: Summary
6+
description: This unit is a part of the accessibility design specs with annotations module.
7+
ms.date: 02/14/2025
8+
author: erzelman
9+
ms.author: erzelman
10+
ms.topic: unit
11+
durationInMinutes: 2
12+
content: |
13+
[!include[](includes/6-summary.md)]

‎learn-pr/cela-accessibility/accessibility-design-specs-with-annotations/includes/1-introduction.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Accessibility annotations are labels or comments included in designs for digital products to outline how elements should be made accessible. They offer direction to developers, designers, and testers to help ensure content is usable by individuals with disabilities. These annotations typically explain how components should function with assistive technologies like screen readers, keyboards, and magnifiers. Many accessibility problems can be anticipated and avoided during the design phase. Use practical tips and a curated list of tools, plugins, and templates to save time documenting accessibility in your mockups with tools like Figma.

0 commit comments

Comments
 (0)