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: demos/description-region/README.md
+7-2Lines changed: 7 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
## Project Description
4
4
5
-
This application demonstrates how to enhance accessibility by setting the `aria-describedby` attribute for the map element. Additionally, it showcases the use of `aria-live` regions to provide dynamic updates for assistive technologies.
5
+
This application demonstrates how to enhance accessibility by setting the `aria-describedby` attribute for the map element. Additionally, it showcases the use of `aria-live` regions to provide dynamic updates for assistive technologies. Note: Some assistive technologies such as [Narrator](https://a11ysupport.io/tech/aria/aria-describedby_attribute) may not support aria-describedby
6
6
7
7
## Testing `aria-describedby`
8
8
@@ -24,6 +24,10 @@ This application demonstrates how to enhance accessibility by setting the `aria-
24
24
25
25
The `aria-describedby` attribute is used to provide additional descriptive information for an element, which can be especially useful for users of assistive technologies. By linking the element to another element that contains the description, screen readers can convey more context and details to users, enhancing their understanding and interaction with the web content. This is particularly important for complex elements like maps, where visual information needs to be translated into meaningful text descriptions.
26
26
27
+
### Why Use `aria-describedby` Instead of `aria-label`
28
+
29
+
While both `aria-describedby` and `aria-label` are used to provide accessible descriptions, they serve different purposes. The `aria-label` attribute is used to provide a concise, accessible name for an element, which is typically short and to the point. In contrast, `aria-describedby` is used to link an element to another element that contains a more detailed description. This is particularly useful for complex elements like maps, where a brief label would not suffice to convey all necessary information. By using `aria-describedby`, we can provide users with assistive technologies a richer, more informative description that enhances their understanding and interaction with the map.
30
+
27
31
For more information on how to use `aria-describedby`, refer to the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby).
28
32
29
33
## Understanding `aria-live`
@@ -36,7 +40,8 @@ When an element has the `aria-live` attribute, screen readers will monitor chang
36
40
37
41
-**off**: Default value. Updates are not announced.
38
42
-**polite**: Updates are announced at the next available opportunity, allowing the user to finish their current task without interruption.
39
-
-**assertive**: Updates are announced immediately, interrupting the current task. This should be used sparingly and only for critical updates.
43
+
-- **assertive**: Updates are announced immediately, interrupting the current task. This should be used sparingly and only for critical updates.
44
+
+- **assertive**: Updates are announced immediately, interrupting the current task. **This should be used sparingly and only for critical updates.**
0 commit comments