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

fix(curriculum): add interactive examples to aria-label lecture (#63862)

Browse Source 
Co-authored-by: Nagalla Thanvi <nagallathanvi@gmail.com>
This commit is contained in:
NagallaThanvi
2025-11-15 18:31:51 +05:30
committed by GitHub
parent aaec1b82b9
commit e3fc2b0e2a
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54a6675c168faa84252d.md
View File

@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-are-the-roles-of-the-aria-label-and-aria-labelledby-attributes
---
# --description--
# --interactive--
It is important to make sure that all users, including those living with disabilities, can access websites without issues.
@@ -21,7 +21,7 @@ Here is an example:
```html
<button aria-label="Search">
<i class="fas fa-search"></i>
<i class="fa-solid fa-magnifying-glass"></i>
</button>
```
@@ -35,14 +35,20 @@ The `aria-labelledby` attribute does the exact same thing as the `aria-label` at
Here's an example:
:::interactive_editor
```html
<input type="text" aria-labelledby="search-btn">
<button type="button" id="search-btn">Search</button>
```
:::
In this case, the text for the button is being used as the label for the search input. Screen readers will announce the input as something like `Search, edit`. If you later decide you want to change the button text to `Find`, the label for the input will automatically be updated to the new text since it is referencing the button text.
Combining multiple `id` values into a single `aria-labelledby` attribute value is also possible. Here's how that works:
:::interactive_editor
```html
<div>
<span id="volume-label">Volume</span>
@@ -56,6 +62,8 @@ Combining multiple `id` values into a single `aria-labelledby` attribute value i
</div>
```
:::
For the slider, the screen reader will look out for the content of the `volume-label` and `volume-details` elements and announce `Volume Adjust the volume level`.
You've seen that both `aria-label` and `aria-labelledby` attributes help screen readers understand what elements do. So, which one should you use? Since they both provide the same functionality, either can be used, but there may be a few advantages to using `aria-labelledby` over `aria-label`: