opensource/freeCodeCamp
3
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-08-30 17:05:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): add section headers to aria label and aria labelledby lecture (#69708)

Browse Source 
Co-authored-by: jaykumar14921 <jaykumar14921@example.com>
This commit is contained in:
jaykumar14921
2026-08-25 14:32:46 +05:30
committed by GitHub
parent e5f1287a94
commit bad4a86bef
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54a6675c168faa84252d.md
+8
View File
@@ -15,6 +15,8 @@ Let's look at what the `aria-label` and `aria-labelledby` attributes are and the
You'll notice both `aria-label` and `aria-labelledby` are prefixed with `aria-`. So what does that mean? ARIA stands for Accessible Rich Internet Applications. It's a set of attributes prefixed with `aria-`, which lets developers communicate the purpose of elements to assistive technologies. The `aria-label` attribute is an invisible label for interactive elements. It adds a text label to an element that screen readers can read.
## The aria-label Attribute
`aria-label` is especially useful for elements that do not have visible text but still need to be described by screen readers. For example, buttons with only icons often need `aria-label` to convey their purpose.
Here is an example:
@@ -31,6 +33,8 @@ If the button contained the text "Search" instead of an icon, then there would b
For input elements, the `aria-label` attribute provides a label directly if there isn't a visible label associated with the input.
## The aria-labelledby Attribute
The `aria-labelledby` attribute does the exact same thing as the `aria-label` attribute, but instead of defining the text directly in the attribute, you use a reference to text that already exists on the page. The existing text must have an `id` attribute, which will be used for the reference value in the `aria-labelledby` attribute.
Here's an example:
@@ -46,6 +50,8 @@ Here's an example:
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 Labels
Combining multiple `id` values into a single `aria-labelledby` attribute value is also possible. Here's how that works:
:::interactive_editor
@@ -67,6 +73,8 @@ Combining multiple `id` values into a single `aria-labelledby` attribute value i
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`.
## Choosing Between aria-label and aria-labelledby
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`:
- If someone is using a translation service to translate the content on your page, the text in an `aria-label` attribute may not always be translated.