refactor(curriculum): add section headers aria-hidden attribute lecture (#69754)

2026-08-31 01:14:08 +08:00 · 2026-08-27 20:55:43 +05:30
parent 6b171230f9
commit 47492d87a7
1 changed files with 17 additions and 1 deletions
@@ -7,6 +7,8 @@ dashedName: what-is-the-aria-hidden-attribute

 # --interactive--

+## What Is the `aria-hidden` Attribute?
+
 If you ever need to display content while at the same time hiding it from people who use assistive technology, like screen readers, you can use the `aria-hidden` attribute.

 You just need to add it to the HTML element that you want to hide and set its value to `true`, like you can see over here: `aria-hidden="true"`.
@@ -16,11 +18,17 @@ This attribute hides the element and all of its children from the accessibility
 - Icons and images that only have a decorative purpose.
 - Duplicated content.

+## When Not to Use the `aria-hidden` Attribute
+
 It is important to remember that `aria-hidden` only hides content from assistive technology, such as screen readers. If the content should be hidden from everyone, then you should not use `aria-hidden` to hide it. For example, a hamburger menu that is currently collapsed must be hidden from all keyboard users, not just screen reader users. In this case you could set the CSS `display` property to `none` on the menu to remove it from the rendered page and the accessibility tree when it is collapsed.

+## Avoid Hiding Focusable Elements
+
 You should never use `aria-hidden` to hide an element that is focusable with the keyboard. The `aria-hidden` attribute only removes the element from the accessibility tree. It does not remove it from the DOM. Thus, it will still be possible for screen reader users to tab to the element, but their screen reader will not announce the element, effectively causing them to focus on "nothing".

-Here's an example where we hide an icon from the accessibility tree by adding the `aria-hidden` attribute with a value of `true`. 
+## Example: Hiding a Decorative Icon
+
+Here's an example where we hide an icon from the accessibility tree by adding the `aria-hidden` attribute with a value of `true`.

 We only keep the text exposed to assistive technologies to avoid any confusion that may arise from the redundancy of having both an icon and text for the same purpose.

@@ -45,6 +53,8 @@ We only keep the text exposed to assistive technologies to avoid any confusion t

 :::

+## When You Don't Need the `aria-hidden` Attribute
+
 You do not need to use `aria-hidden` when:

 - The HTML element already has a `hidden` attribute.
@@ -53,10 +63,16 @@ You do not need to use `aria-hidden` when:

 In these three cases, the element is already hidden from the accessibility tree, so the `aria-hidden` attribute is not necessary.

+## Testing Your Implementation
+
 As with using any ARIA attributes, you should always test with assistive technologies, and preferably having people with disabilities test your work, to make sure that it's easy to understand, even with these hidden elements.

+## Nested `aria-hidden` Attribute Values
+
 You should also know that setting `aria-hidden` to `false` will not expose the element to assistive technologies if any of its parents has this attribute set to `true`.

+## Summary
+
 The `aria-hidden` attribute is used to hide elements from people who use assistive technology, such as screen reader users.

 While it can be helpful for hiding purely decorative elements and duplicated content, it should be used sparingly to avoid hindering accessibility.