diff --git a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md index 4087c9ea9a3..7cc687cee5a 100644 --- a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md +++ b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-is-the-aria-hidden-attribute --- -# --description-- +# --interactive-- If you ever need to display content while at the same time hiding it from people who use assistive technology, like screen readers, you can use the `aria-hidden` attribute. @@ -24,13 +24,27 @@ Here's an example where we hide an icon from the accessibility tree by adding th We only keep the text exposed to assistive technologies to avoid any confusion that may arise from the redundancy of having both an icon and text for the same purpose. +**NOTE**: This interactive example includes the Font Awesome CDN so you can see the gear icon displayed in the preview window. + +:::interactive_editor + ```html +
+ + + + ``` +::: + You do not need to use `aria-hidden` when: - The HTML element already has a `hidden` attribute.