diff --git a/curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a53ae8f1ad28c8a1ed0f0.md b/curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a53ae8f1ad28c8a1ed0f0.md index 5e5cb873d6c..d6dc4b4a10f 100644 --- a/curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a53ae8f1ad28c8a1ed0f0.md +++ b/curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a53ae8f1ad28c8a1ed0f0.md @@ -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
@@ -24,6 +26,8 @@ Here's how to associate a `label` with an `input`:
``` +::: + 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 `