feat(curriculum): adding content for HTML and Accessibility review page (freeCodeCamp#57021)

Co-authored-by: Bruce Blaser <[email protected]>

Author: jdwilkin4

client/i18n/locales/english/intro.json

@@ -1848,7 +1848,8 @@
       "quiz-html-accessibility": {
         "title": "HTML Accessibility Quiz",
         "intro": [
-          "Test what you've learned in this quiz of HTML accessibility knowledge."
+          "Before you are quizzed on HTML and accessibility, you first need to review the concepts.",
+          "Open up this page to review concepts including the <code>aria-hidden</code>, <code>aria-describedby</code>, <code>tabindex</code> attributes and more."
         ]
       },
       "review-html": {

curriculum/challenges/english/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md

@@ -9,7 +9,44 @@ dashedName: review-html-accessibility
 
 Review the concepts below to prepare for the upcoming quiz.
 
+## Introduction to Accessibility
 
+- **Web Content Accessibility Guidelines**: The Web Content Accessibility Guidelines (WCAG) are a set of guidelines for making web content more accessible to people with disabilities. The four principles of WCAG are POUR which stands for Perceivable, Operable, Understandable, and Robust.
+
+## Assistive Technology for Accessibility
+
+- **Screen readers**: software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
+- **Large text or braille keyboards**: used by people with visual impairments to access the web.
+- **Screen magnifiers**: software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
+- **Alternative pointing devices**: used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
+- **Voice recognition**: used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
+
+## Accessibility Auditing Tools
+
+- **Common Accessibility Tools**: Google Lighthouse, Wave, IBM Equal Accessibility Checker, and axe DevTools are some of the common accessibility tools used to audit the accessibility of a website.
+
+## Accessibility Best Practices
+
+- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps people using screen readers and other assistive technologies understand the content of your website.
+- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps people using screen readers and other assistive technologies understand the structure of the table.
+- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps people using screen readers and other assistive technologies understand the purpose of the input.
+- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps people using screen readers and other assistive technologies understand the content of the image.
+- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps people using screen readers and other assistive technologies understand the purpose of the link.
+- **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. For more information, review the prior lecture video on keyboard accessibility.
+- **`accesskey` attribute**: used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
+
+## WAI-ARIA, Roles, and Attributes
+
+- **WAI-ARIA**: 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.
+- **Aria roles**: a set of predefined roles that can be added to HTML elements to define their purpose. This helps people using screen readers and other assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
+- **`aria-label` and `aria-labelledby` attributes**: These attributes are used to give an element a programmatic (or accessible) name, which helps people using assistive technology (such as screen readers) understand the purpose of the element. They are often used when the visual label for an element is an image or symbol rather than text. `aria-label` allows you to define the name directly in the attribute while `aria-labelledby` allows you to reference existing text on the page.
+- **`aria-hidden` attribute**: Used to hide an element from people using assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
+- **`aria-expanded` attribute**: used to convey the state of a toggle (or disclosure) feature to screen reader users.
+- **`aria-live` attribute**: used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
+- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help people using screen readers and other assistive technologies understand the content of the website.
+- **`aria-controls` attribute**: used to associate an element with another element that it controls. This helps people using screen readers and other assistive technologies understand the relationship between the elements.
+- **`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.
 
 # --assignment--