gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): replace uncovered quiz questions and add interactive example (#63780)

Browse Source
This commit is contained in:
Tanmay Gautam
2025-11-13 20:28:34 +05:30
committed by GitHub
parent f82889355b
commit 3fe392b375
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a53ae8f1ad28c8a1ed0f0.md
+21 -17
View File
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: why-is-it-important-for-inputs-to-have-an-associated-label
---
# --description--
# --interactive--
Labels on input fields might seem like small details, but they play a crucial role in making forms easier for everyone to use.
@@ -17,6 +17,8 @@ Screen readers often rely on labels to describe the purpose of input fields. In
Here's how to associate a `label` with an `input`:
:::interactive_editor
```html
<form>
<label for="name">Your Name</label>
@@ -24,6 +26,8 @@ Here's how to associate a `label` with an `input`:
</form>
```
:::
In this example, the `for` attribute of the `label` element is associated with the `id` of the `input` element. This connection allows screen readers to announce the `label` when the `input` is in a focused state, allowing screen reader users to understand the purpose of the `input`.
Associating labels with all input fields also benefits SEO. With proper labels, search engines will understand the page content better, leading to a positive impact on the page search rankings.
@@ -70,35 +74,35 @@ Think about how screen readers provide information to users.
## --text--
How do labels associated with input fields improve keyboard navigation?
What is the correct way to programmatically associate a label with an input in HTML?
## --answers--
They enhance the visual appearance of input fields.
Give both elements the same `name` attribute.
### --feedback--
Focus on how users move through a form using only the keyboard.
Review the example in the lesson showing how `for` and `id` are used together.
---
They allow users to tab through input fields without getting lost.
Set the label's `for` attribute to match the input's `id`.
---
They reduce the need for keyboard shortcuts.
Place the `<label>` immediately after the `<input>` element in the DOM.
### --feedback--
Focus on how users move through a form using only the keyboard.
Order alone does not create an association that screen readers can use.
---
They let input fields accept special characters.
Use the input's `placeholder` text instead of a label.
### --feedback--
Focus on how users move through a form using only the keyboard.
Placeholders are not a replacement for accessible, programmatically associated labels.
## --video-solution--
@@ -106,35 +110,35 @@ Focus on how users move through a form using only the keyboard.
## --text--
How do labels associated with input fields help in identifying errors?
Besides accessibility, what other benefit of associating labels with inputs is mentioned in the lesson?
## --answers--
They allow input fields to accept longer text.
It makes the page load significantly faster.
### --feedback--
Think about how error messages are communicated to users by screen readers.
Performance is not the benefit discussed in this lesson.
---
They help screen readers announce the label along with the error message.
It can help search engines better understand the page content.
---
They prevent users from submitting forms.
It allows inputs to accept multiple data types automatically.
### --feedback--
Think about how error messages are communicated to users by screen readers.
Data types are determined by the input's `type` attribute, not labels.
---
They make input fields more colorful.
It automatically translates labels for international users.
### --feedback--
Think about how error messages are communicated to users by screen readers.
Internationalization is outside the scope of what labels provide.
## --video-solution--