Create aria-aria-description.md

docs/known-issues-and-solutions/solutions-index/alert-audio-video.md

@@ -0,0 +1,125 @@
+# Alert - Audio/Video
+- WAVE Category: Alert
+- WAVE Alert: Audio/Video
+
+## Page Content Status
+- [X] WAVE Error guidance text
+- [ ] Example of a DOM Snippet Generated From WAVE Tool
+- Project Team Error guidance
+    - [ ] Project Team Page Details
+    - [ ] Project Team Issue and PR details
+    - [ ] Project Team Solution
+- [ ] Credits/Authors
+
+## WAVE Guidance
+
+WAVE Tool's Reference material on Audio/Video may not specifically address your problem.  We provide it here for optional reading.
+
+??? Info "Click to see WAVE Tool Reference"
+
+    This content added 2026-03-23. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#audio_video" target="_blank">https://wave.webaim.org/api/docs?format=html#audio_video</a>
+
+    > ### WAVE Category
+    > Alerts
+    > ### WAVE Error
+    > Audio/Video
+    > ### What It Means
+    > An audio or video file or link is present.
+    > ### Why It Matters
+    > Audio content must be presented in a text format to be fully accessible to users who are deaf and hard of hearing. Video content with audio must have synchronized captions and a transcript. Audio-only content must have a transcript.
+    > ### What To Do
+    > For video content, ensure that synchronized captioning and a transcript is provided. For audio-only content, ensure that a transcript is provided.
+    > ### The Algorithm... in English
+    > An embedded QuickTime, Windows Media Player, or RealPlayer movie is present or a link is present to a file with one of the following extensions: 3gp, aif, aiff, asf, asx, avi, flv, m4a, m4p, mov, mp2, mp3, mp4, mpa, mpeg, mpeg2, mpg, mpv, ogg, ogv, qtl, ra, ram, smi, smil, wav, wax, webm, wma, wmv, wmp, or wmx.
+    > ### Standards and Guidelines
+    > - [1.2.1 Prerecorded Audio-only and Video-only (Level A)](https://webaim.org/standards/wcag/checklist#sc1.2.1)
+    > - [1.2.2 Captions (Prerecorded) (Level A)](https://webaim.org/standards/wcag/checklist#sc1.2.2)
+    > - [1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)](https://webaim.org/standards/wcag/checklist#sc1.2.3)
+    > - [1.2.5 Audio Description (Prerecorded) (Level AA)](https://webaim.org/standards/wcag/checklist#sc1.2.5)
+    > - [1.4.2 Audio Control (Level A)](https://webaim.org/standards/wcag/checklist#sc1.4.2)
+
+## Example of a DOM Snippet Generated From WAVE Tool
+
+> ```html
+> [HTML snippet showing the problematic code structure that WAVE detected]
+> ```
+
+
+## Project Team Error guidance
+
+The following material covers how the Project Team has provided a solution to the Audio/Video WAVE Alert.
+
+### Project Page Details
+- Project Page name: [INSERT PAGE NAME or "ALL"]
+- Project Dev URL: [INSERT URL or "N/A"]
+- Requires sign in: [TRUE OR FALSE]
+    - Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
+    - Can access page directly from URL: [TRUE OR FALSE]
+    - Accepts URL parameters: [TRUE OR FALSE]
+
+### Project Team Issue and PR details
+- Related GitHub Issue(s):
+    - [INSERT ISSUE URL]
+- Related Pull Request(s):
+    - [INSERT PR URL]
+- React Component(s)
+    - [INSERT PATH: e.g. path/to/Component.jsx]
+
+### Project Team Solution
+
+#### What is the specific problem that was occurring?
+<!-- Author Instructions: Add a detailed explanation of the specific accessibility problem, including context about when/where it occurs, what elements are involved, and why it's problematic for assistive technology users -->
+[INSERT CONTENT]
+
+#### What is the proposed solution to this problem?
+<!-- Author Instructions: Add a few sentences describing the fix. "Why the Fix Works" comes later (see below). If there are lots of instructions required to explain the solution, include them in Developer Resources below -->
+[INSERT CONTENT]
+
+#### Step-By-Step Guide
+<!-- Author Instructions: Replace details dropdown with N/A if this does not apply -->
+
+??? Info "Click to see step-by-step guide"
+
+    [ADD DETAILED INSTRUCTIONS HERE]
+
+#### Other Technical Details
+<!-- Author Instructions: Write N/A if this does not apply -->
+
+??? Info "Click to see other technical details"
+
+    [INSERT OTHER DETAILS e.g. Prop References, Return Value ]
+
+#### Code Snippet With Solution
+??? Info "Click to see code snippets"
+
+    [INSERT PATH file/path/to/Snippet.jsx]
+
+    ```jsx
+    [Code example showing the fix/solution]
+    ```
+
+#### Why the Fix Works
+<!-- Author Instruction: Add an explanation of how the code changes resolve the accessibility issue and why this approach was chosen -->
+[INSERT CONTENT]
+
+#### Where this solution is applicable 
+<!-- Author Instruction: Add a bullet point list of scenarios that might trigger this error and would be fixed by applying the provided solution, e.g. particular groupings of html elements, user interactivity, code-specific edge cases -->
+- [INSERT SCENARIO 1]
+- [INSERT SCENARIO 2]
+- [INSERT SCENARIO N]
+
+#### Screenshots of WAVE Error
+
+<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
+
+??? Info "1. Descriptive Title for Screenshot Set 1"
+
+    Description/text for image
+
+    [INSERT IMAGE HERE]
+
+## Credits/Authors
+<!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->
+- @Rabia2219
+- [INCLUDE Contributor 2]
+- [INCLUDE Contributor N]

docs/known-issues-and-solutions/solutions-index/alert-broken-same-page-link.md

@@ -0,0 +1,121 @@
+# Alert - Broken same-page link
+- WAVE Category: Alert
+- WAVE Alert: Broken same-page link
+
+## Page Content Status
+- [X] WAVE Error guidance text
+- [ ] Example of a DOM Snippet Generated From WAVE Tool
+- Project Team Error guidance
+    - [ ] Project Team Page Details
+    - [ ] Project Team Issue and PR details
+    - [ ] Project Team Solution
+- [ ] Credits/Authors
+
+## WAVE Guidance
+
+WAVE Tool's Reference material on Broken same-page link may not specifically address your problem.  We provide it here for optional reading.
+
+??? Info "Click to see WAVE Tool Reference"
+
+    This content added 2026-03-23. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#link_internal_broken" target="_blank">https://wave.webaim.org/api/docs?format=html#link_internal_broken</a>
+
+    > ### WAVE Category
+    > Alerts
+    > ### WAVE Error
+    > Broken same-page link
+    > ### What It Means
+    > A link to another location within the page is present but does not have a corresponding target.
+    > ### Why It Matters
+    > A link to jump to another position within the page assists users in navigating the web page, but only if the link target exists.
+    > ### What To Do
+    > Ensure that the target for the link exists or remove the same-page link.
+    > ### The Algorithm... in English
+    > An in-page link has an href attribute (starting with a #), but does not match either the id value of another element or the name attribute value of an anchor element within the page.
+    > ### Standards and Guidelines
+    > - [2.1.1 Keyboard (Level A)](https://webaim.org/standards/wcag/checklist#sc2.1.1)
+
+## Example of a DOM Snippet Generated From WAVE Tool
+
+> ```html
+> [HTML snippet showing the problematic code structure that WAVE detected]
+> ```
+
+
+## Project Team Error guidance
+
+The following material covers how the Project Team has provided a solution to the Broken same-page link WAVE Alert.
+
+### Project Page Details
+- Project Page name: [INSERT PAGE NAME or "ALL"]
+- Project Dev URL: [INSERT URL or "N/A"]
+- Requires sign in: [TRUE OR FALSE]
+    - Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
+    - Can access page directly from URL: [TRUE OR FALSE]
+    - Accepts URL parameters: [TRUE OR FALSE]
+
+### Project Team Issue and PR details
+- Related GitHub Issue(s):
+    - [INSERT ISSUE URL]
+- Related Pull Request(s):
+    - [INSERT PR URL]
+- React Component(s)
+    - [INSERT PATH: e.g. path/to/Component.jsx]
+
+### Project Team Solution
+
+#### What is the specific problem that was occurring?
+<!-- Author Instructions: Add a detailed explanation of the specific accessibility problem, including context about when/where it occurs, what elements are involved, and why it's problematic for assistive technology users -->
+[INSERT CONTENT]
+
+#### What is the proposed solution to this problem?
+<!-- Author Instructions: Add a few sentences describing the fix. "Why the Fix Works" comes later (see below). If there are lots of instructions required to explain the solution, include them in Developer Resources below -->
+[INSERT CONTENT]
+
+#### Step-By-Step Guide
+<!-- Author Instructions: Replace details dropdown with N/A if this does not apply -->
+
+??? Info "Click to see step-by-step guide"
+
+    [ADD DETAILED INSTRUCTIONS HERE]
+
+#### Other Technical Details
+<!-- Author Instructions: Write N/A if this does not apply -->
+
+??? Info "Click to see other technical details"
+
+    [INSERT OTHER DETAILS e.g. Prop References, Return Value ]
+
+#### Code Snippet With Solution
+??? Info "Click to see code snippets"
+
+    [INSERT PATH file/path/to/Snippet.jsx]
+
+    ```jsx
+    [Code example showing the fix/solution]
+    ```
+
+#### Why the Fix Works
+<!-- Author Instruction: Add an explanation of how the code changes resolve the accessibility issue and why this approach was chosen -->
+[INSERT CONTENT]
+
+#### Where this solution is applicable 
+<!-- Author Instruction: Add a bullet point list of scenarios that might trigger this error and would be fixed by applying the provided solution, e.g. particular groupings of html elements, user interactivity, code-specific edge cases -->
+- [INSERT SCENARIO 1]
+- [INSERT SCENARIO 2]
+- [INSERT SCENARIO N]
+
+#### Screenshots of WAVE Error
+
+<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
+
+??? Info "1. Descriptive Title for Screenshot Set 1"
+
+    Description/text for image
+
+    [INSERT IMAGE HERE]
+
+## Credits/Authors
+<!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->
+- @Rabia2219
+- [INCLUDE Contributor 2]
+- [INCLUDE Contributor N]

docs/known-issues-and-solutions/solutions-index/alert-device-dependent-event-handler.md

@@ -0,0 +1,124 @@
+# Alert - Device dependent event handler
+- WAVE Category: Alert
+- WAVE Alert: Device dependent event handler
+
+## Page Content Status
+- [X] WAVE Error guidance text
+- [ ] Example of a DOM Snippet Generated From WAVE Tool
+- Project Team Error guidance
+    - [ ] Project Team Page Details
+    - [ ] Project Team Issue and PR details
+    - [ ] Project Team Solution
+- [ ] Credits/Authors
+
+## WAVE Guidance
+
+WAVE Tool's Reference material on Device dependent event handler may not specifically address your problem.  We provide it here for optional reading.
+
+??? Info "Click to see WAVE Tool Reference"
+
+    This content added 2026-03-23. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#event_handler" target="_blank">https://wave.webaim.org/api/docs?format=html#event_handler</a>
+
+    > ### WAVE Category
+    > Alerts
+    > ### WAVE Error
+    > Device dependent event handler
+    > ### What It Means
+    > An event handler is present that may not be accessible.
+    > ### Why It Matters
+    > The JavaScript events in use do not appear to be accessible to both mouse and keyboard users. To be fully accessible, critical JavaScript interaction should be device independent.
+    > ### What To Do
+    > Ensure that critical functionality and content is accessible by using a device independent event handler (which responds to both keyboard and mouse) or by using both a mouse dependent and a keyboard dependent event handler.
+    > ### The Algorithm... in English
+    > One of the following is present:
+    > - an onmouseover event but not an onfocus event
+    > - an onclick event on something other than a link, form control, or element with a tabindex value of 0
+    > - ondblclick
+    > ### Standards and Guidelines
+    > - [2.1.1 Keyboard (Level A)](https://webaim.org/standards/wcag/checklist#sc2.1.1)
+
+## Example of a DOM Snippet Generated From WAVE Tool
+
+> ```html
+> [HTML snippet showing the problematic code structure that WAVE detected]
+> ```
+
+
+## Project Team Error guidance
+
+The following material covers how the Project Team has provided a solution to the Device dependent event handler WAVE Alert.
+
+### Project Page Details
+- Project Page name: [INSERT PAGE NAME or "ALL"]
+- Project Dev URL: [INSERT URL or "N/A"]
+- Requires sign in: [TRUE OR FALSE]
+    - Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
+    - Can access page directly from URL: [TRUE OR FALSE]
+    - Accepts URL parameters: [TRUE OR FALSE]
+
+### Project Team Issue and PR details
+- Related GitHub Issue(s):
+    - [INSERT ISSUE URL]
+- Related Pull Request(s):
+    - [INSERT PR URL]
+- React Component(s)
+    - [INSERT PATH: e.g. path/to/Component.jsx]
+
+### Project Team Solution
+
+#### What is the specific problem that was occurring?
+<!-- Author Instructions: Add a detailed explanation of the specific accessibility problem, including context about when/where it occurs, what elements are involved, and why it's problematic for assistive technology users -->
+[INSERT CONTENT]
+
+#### What is the proposed solution to this problem?
+<!-- Author Instructions: Add a few sentences describing the fix. "Why the Fix Works" comes later (see below). If there are lots of instructions required to explain the solution, include them in Developer Resources below -->
+[INSERT CONTENT]
+
+#### Step-By-Step Guide
+<!-- Author Instructions: Replace details dropdown with N/A if this does not apply -->
+
+??? Info "Click to see step-by-step guide"
+
+    [ADD DETAILED INSTRUCTIONS HERE]
+
+#### Other Technical Details
+<!-- Author Instructions: Write N/A if this does not apply -->
+
+??? Info "Click to see other technical details"
+
+    [INSERT OTHER DETAILS e.g. Prop References, Return Value ]
+
+#### Code Snippet With Solution
+??? Info "Click to see code snippets"
+
+    [INSERT PATH file/path/to/Snippet.jsx]
+
+    ```jsx
+    [Code example showing the fix/solution]
+    ```
+
+#### Why the Fix Works
+<!-- Author Instruction: Add an explanation of how the code changes resolve the accessibility issue and why this approach was chosen -->
+[INSERT CONTENT]
+
+#### Where this solution is applicable 
+<!-- Author Instruction: Add a bullet point list of scenarios that might trigger this error and would be fixed by applying the provided solution, e.g. particular groupings of html elements, user interactivity, code-specific edge cases -->
+- [INSERT SCENARIO 1]
+- [INSERT SCENARIO 2]
+- [INSERT SCENARIO N]
+
+#### Screenshots of WAVE Error
+
+<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
+
+??? Info "1. Descriptive Title for Screenshot Set 1"
+
+    Description/text for image
+
+    [INSERT IMAGE HERE]
+
+## Credits/Authors
+<!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->
+- @Rabia2219
+- [INCLUDE Contributor 2]
+- [INCLUDE Contributor N]