feat(curriculum): add interactive examples to HTML Accessibility Review page (#65335)

curriculum/challenges/english/blocks/review-html-accessibility/671a87a39b88245a579c2271.md

@@ -5,7 +5,7 @@ challengeType: 31
 dashedName: review-html-accessibility
 ---
 
-# --description--
+# --interactive--
 
 ## Introduction to Accessibility
 
@@ -33,18 +33,26 @@ dashedName: review-html-accessibility
 - **Best practices for making audio and video content accessible**: You should provide captions and transcripts for audio and video content to make it accessible to people with hearing impairments. You should also provide audio descriptions for video content to make it accessible to people with visual impairments.
 - **`tabindex` attribute**: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1.
 
+:::interactive_editor
+
 ```html
 <p tabindex="-1">Sorry, there was an error with your submission.</p>
 ```
 
+:::
+
 - **`accesskey` attribute**: Used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
 
+:::interactive_editor
+
 ```html
 <button accesskey="s">Save</button>
 <button accesskey="c">Cancel</button>
 <a href="index.html" accesskey="h">Home</a>
 ```
 
+:::
+
 ## WAI-ARIA, Roles, and Attributes
 
 - **WAI-ARIA**: It stands for Web Accessibility Initiative - Accessible Rich Internet Applications. It is a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
@@ -67,13 +75,19 @@ There are six main categories of ARIA roles:
 </button>
 ```
 
+:::interactive_editor
+
 ```html
 <input type="text" aria-labelledby="search-btn">
 <button type="button" id="search-btn">Search</button>
 ```
 
+:::
+
 - **`aria-hidden` attribute**: Used to hide an element from assistive technologies such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
 
+:::interactive_editor
+
 ```html
 <button>
     <i class="fa-solid fa-gear" aria-hidden="true"></i>
@@ -81,8 +95,12 @@ There are six main categories of ARIA roles:
 </button>
 ```
 
+:::
+
 - **`aria-describedby` attribute**: Used to provide additional information about an element by associating it with another element that contains the information. This gives people using screen readers immediate access to the additional information when they navigate to the element. Common usage would include associating formatting instructions to a text input or an error message to an input after an invalid form submission.
 
+:::interactive_editor
+
 ```html
 <form>
     <label for="password">Password:</label>
@@ -91,6 +109,8 @@ There are six main categories of ARIA roles:
 </form>
 ```
 
+:::
+
 # --assignment--
 
 Review the HTML Accessibility topics and concepts.