Skip to content

Commit e3fc2b0

Browse files
fix(curriculum): add interactive examples to aria-label lecture (freeCodeCamp#63862)
Co-authored-by: Nagalla Thanvi <nagallathanvi@gmail.com>
1 parent aaec1b8 commit e3fc2b0

1 file changed

Lines changed: 10 additions & 2 deletions

File tree

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ challengeType: 19
55
dashedName: what-are-the-roles-of-the-aria-label-and-aria-labelledby-attributes
66
---
77

8-
# --description--
8+
# --interactive--
99

1010
It is important to make sure that all users, including those living with disabilities, can access websites without issues.
1111

@@ -21,7 +21,7 @@ Here is an example:
2121

2222
```html
2323
<button aria-label="Search">
24-
<i class="fas fa-search"></i>
24+
<i class="fa-solid fa-magnifying-glass"></i>
2525
</button>
2626
```
2727

@@ -35,14 +35,20 @@ The `aria-labelledby` attribute does the exact same thing as the `aria-label` at
3535

3636
Here's an example:
3737

38+
:::interactive_editor
39+
3840
```html
3941
<input type="text" aria-labelledby="search-btn">
4042
<button type="button" id="search-btn">Search</button>
4143
```
4244

45+
:::
46+
4347
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.
4448
Combining multiple `id` values into a single `aria-labelledby` attribute value is also possible. Here's how that works:
4549

50+
:::interactive_editor
51+
4652
```html
4753
<div>
4854
<span id="volume-label">Volume</span>
@@ -56,6 +62,8 @@ Combining multiple `id` values into a single `aria-labelledby` attribute value i
5662
</div>
5763
```
5864

65+
:::
66+
5967
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`.
6068

6169
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`:

0 commit comments

Comments
 (0)