diff --git a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54a6675c168faa84252d.md b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54a6675c168faa84252d.md index c32d34450f6..9f6ade44bf2 100644 --- a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54a6675c168faa84252d.md +++ b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54a6675c168faa84252d.md @@ -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 ``` @@ -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 ``` +::: + 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