jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-12 12:01:24 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): add interactive examples to aria hidden lesson (#62739)

Browse Source
This commit is contained in:
Aeeshaht
2025-10-14 01:10:26 +01:00
committed by GitHub
parent 13366a25d9
commit ff1ea23aa1
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md
View File

@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-the-aria-hidden-attribute
---
# --description--
# --interactive--
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.
@@ -24,13 +24,27 @@ Here's an example where we hide an icon from the accessibility tree by adding th
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.
**NOTE**: This interactive example includes the Font Awesome CDN so you can see the gear icon displayed in the preview window.
:::interactive_editor
```html
<head>
<!-- Font Awesome CDN -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.0/css/all.min.css"
/>
</head>
<button>
<i class="fa-solid fa-gear" aria-hidden="true"></i>
<span class="label">Settings</span>
</button>
```
:::
You do not need to use `aria-hidden` when:
- The HTML element already has a `hidden` attribute.