Skip to content

Commit 5cdad8f

Browse files
Rabia2219Rabia2219
authored
Merge pull request #42 from hackforla/Rabia2219-patch-5
Create aria-aria-description.md
2 parents d427f7e + da0b749 commit 5cdad8f

18 files changed

+2195
-0
lines changed

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
# Alert - Audio/Video
2+
- WAVE Category: Alert
3+
- WAVE Alert: Audio/Video
4+
5+
## Page Content Status
6+
- [X] WAVE Error guidance text
7+
- [ ] Example of a DOM Snippet Generated From WAVE Tool
8+
- Project Team Error guidance
9+
- [ ] Project Team Page Details
10+
- [ ] Project Team Issue and PR details
11+
- [ ] Project Team Solution
12+
- [ ] Credits/Authors
13+
14+
## WAVE Guidance
15+
16+
WAVE Tool's Reference material on Audio/Video may not specifically address your problem. We provide it here for optional reading.
17+
18+
??? Info "Click to see WAVE Tool Reference"
19+
20+
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>
21+
22+
> ### WAVE Category
23+
> Alerts
24+
> ### WAVE Error
25+
> Audio/Video
26+
> ### What It Means
27+
> An audio or video file or link is present.
28+
> ### Why It Matters
29+
> 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.
30+
> ### What To Do
31+
> For video content, ensure that synchronized captioning and a transcript is provided. For audio-only content, ensure that a transcript is provided.
32+
> ### The Algorithm... in English
33+
> 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.
34+
> ### Standards and Guidelines
35+
> - [1.2.1 Prerecorded Audio-only and Video-only (Level A)](https://webaim.org/standards/wcag/checklist#sc1.2.1)
36+
> - [1.2.2 Captions (Prerecorded) (Level A)](https://webaim.org/standards/wcag/checklist#sc1.2.2)
37+
> - [1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)](https://webaim.org/standards/wcag/checklist#sc1.2.3)
38+
> - [1.2.5 Audio Description (Prerecorded) (Level AA)](https://webaim.org/standards/wcag/checklist#sc1.2.5)
39+
> - [1.4.2 Audio Control (Level A)](https://webaim.org/standards/wcag/checklist#sc1.4.2)
40+
41+
## Example of a DOM Snippet Generated From WAVE Tool
42+
43+
> ```html
44+
> [HTML snippet showing the problematic code structure that WAVE detected]
45+
> ```
46+
47+
48+
## Project Team Error guidance
49+
50+
The following material covers how the Project Team has provided a solution to the Audio/Video WAVE Alert.
51+
52+
### Project Page Details
53+
- Project Page name: [INSERT PAGE NAME or "ALL"]
54+
- Project Dev URL: [INSERT URL or "N/A"]
55+
- Requires sign in: [TRUE OR FALSE]
56+
- Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
57+
- Can access page directly from URL: [TRUE OR FALSE]
58+
- Accepts URL parameters: [TRUE OR FALSE]
59+
60+
### Project Team Issue and PR details
61+
- Related GitHub Issue(s):
62+
- [INSERT ISSUE URL]
63+
- Related Pull Request(s):
64+
- [INSERT PR URL]
65+
- React Component(s)
66+
- [INSERT PATH: e.g. path/to/Component.jsx]
67+
68+
### Project Team Solution
69+
70+
#### What is the specific problem that was occurring?
71+
<!-- 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 -->
72+
[INSERT CONTENT]
73+
74+
#### What is the proposed solution to this problem?
75+
<!-- 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 -->
76+
[INSERT CONTENT]
77+
78+
#### Step-By-Step Guide
79+
<!-- Author Instructions: Replace details dropdown with N/A if this does not apply -->
80+
81+
??? Info "Click to see step-by-step guide"
82+
83+
[ADD DETAILED INSTRUCTIONS HERE]
84+
85+
#### Other Technical Details
86+
<!-- Author Instructions: Write N/A if this does not apply -->
87+
88+
??? Info "Click to see other technical details"
89+
90+
[INSERT OTHER DETAILS e.g. Prop References, Return Value ]
91+
92+
#### Code Snippet With Solution
93+
??? Info "Click to see code snippets"
94+
95+
[INSERT PATH file/path/to/Snippet.jsx]
96+
97+
```jsx
98+
[Code example showing the fix/solution]
99+
```
100+
101+
#### Why the Fix Works
102+
<!-- Author Instruction: Add an explanation of how the code changes resolve the accessibility issue and why this approach was chosen -->
103+
[INSERT CONTENT]
104+
105+
#### Where this solution is applicable
106+
<!-- 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 -->
107+
- [INSERT SCENARIO 1]
108+
- [INSERT SCENARIO 2]
109+
- [INSERT SCENARIO N]
110+
111+
#### Screenshots of WAVE Error
112+
113+
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
114+
115+
??? Info "1. Descriptive Title for Screenshot Set 1"
116+
117+
Description/text for image
118+
119+
[INSERT IMAGE HERE]
120+
121+
## Credits/Authors
122+
<!-- 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 -->
123+
- @Rabia2219
124+
- [INCLUDE Contributor 2]
125+
- [INCLUDE Contributor N]

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

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Alert - Broken same-page link
2+
- WAVE Category: Alert
3+
- WAVE Alert: Broken same-page link
4+
5+
## Page Content Status
6+
- [X] WAVE Error guidance text
7+
- [ ] Example of a DOM Snippet Generated From WAVE Tool
8+
- Project Team Error guidance
9+
- [ ] Project Team Page Details
10+
- [ ] Project Team Issue and PR details
11+
- [ ] Project Team Solution
12+
- [ ] Credits/Authors
13+
14+
## WAVE Guidance
15+
16+
WAVE Tool's Reference material on Broken same-page link may not specifically address your problem. We provide it here for optional reading.
17+
18+
??? Info "Click to see WAVE Tool Reference"
19+
20+
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>
21+
22+
> ### WAVE Category
23+
> Alerts
24+
> ### WAVE Error
25+
> Broken same-page link
26+
> ### What It Means
27+
> A link to another location within the page is present but does not have a corresponding target.
28+
> ### Why It Matters
29+
> A link to jump to another position within the page assists users in navigating the web page, but only if the link target exists.
30+
> ### What To Do
31+
> Ensure that the target for the link exists or remove the same-page link.
32+
> ### The Algorithm... in English
33+
> 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.
34+
> ### Standards and Guidelines
35+
> - [2.1.1 Keyboard (Level A)](https://webaim.org/standards/wcag/checklist#sc2.1.1)
36+
37+
## Example of a DOM Snippet Generated From WAVE Tool
38+
39+
> ```html
40+
> [HTML snippet showing the problematic code structure that WAVE detected]
41+
> ```
42+
43+
44+
## Project Team Error guidance
45+
46+
The following material covers how the Project Team has provided a solution to the Broken same-page link WAVE Alert.
47+
48+
### Project Page Details
49+
- Project Page name: [INSERT PAGE NAME or "ALL"]
50+
- Project Dev URL: [INSERT URL or "N/A"]
51+
- Requires sign in: [TRUE OR FALSE]
52+
- Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
53+
- Can access page directly from URL: [TRUE OR FALSE]
54+
- Accepts URL parameters: [TRUE OR FALSE]
55+
56+
### Project Team Issue and PR details
57+
- Related GitHub Issue(s):
58+
- [INSERT ISSUE URL]
59+
- Related Pull Request(s):
60+
- [INSERT PR URL]
61+
- React Component(s)
62+
- [INSERT PATH: e.g. path/to/Component.jsx]
63+
64+
### Project Team Solution
65+
66+
#### What is the specific problem that was occurring?
67+
<!-- 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 -->
68+
[INSERT CONTENT]
69+
70+
#### What is the proposed solution to this problem?
71+
<!-- 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 -->
72+
[INSERT CONTENT]
73+
74+
#### Step-By-Step Guide
75+
<!-- Author Instructions: Replace details dropdown with N/A if this does not apply -->
76+
77+
??? Info "Click to see step-by-step guide"
78+
79+
[ADD DETAILED INSTRUCTIONS HERE]
80+
81+
#### Other Technical Details
82+
<!-- Author Instructions: Write N/A if this does not apply -->
83+
84+
??? Info "Click to see other technical details"
85+
86+
[INSERT OTHER DETAILS e.g. Prop References, Return Value ]
87+
88+
#### Code Snippet With Solution
89+
??? Info "Click to see code snippets"
90+
91+
[INSERT PATH file/path/to/Snippet.jsx]
92+
93+
```jsx
94+
[Code example showing the fix/solution]
95+
```
96+
97+
#### Why the Fix Works
98+
<!-- Author Instruction: Add an explanation of how the code changes resolve the accessibility issue and why this approach was chosen -->
99+
[INSERT CONTENT]
100+
101+
#### Where this solution is applicable
102+
<!-- 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 -->
103+
- [INSERT SCENARIO 1]
104+
- [INSERT SCENARIO 2]
105+
- [INSERT SCENARIO N]
106+
107+
#### Screenshots of WAVE Error
108+
109+
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
110+
111+
??? Info "1. Descriptive Title for Screenshot Set 1"
112+
113+
Description/text for image
114+
115+
[INSERT IMAGE HERE]
116+
117+
## Credits/Authors
118+
<!-- 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 -->
119+
- @Rabia2219
120+
- [INCLUDE Contributor 2]
121+
- [INCLUDE Contributor N]

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

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Alert - Device dependent event handler
2+
- WAVE Category: Alert
3+
- WAVE Alert: Device dependent event handler
4+
5+
## Page Content Status
6+
- [X] WAVE Error guidance text
7+
- [ ] Example of a DOM Snippet Generated From WAVE Tool
8+
- Project Team Error guidance
9+
- [ ] Project Team Page Details
10+
- [ ] Project Team Issue and PR details
11+
- [ ] Project Team Solution
12+
- [ ] Credits/Authors
13+
14+
## WAVE Guidance
15+
16+
WAVE Tool's Reference material on Device dependent event handler may not specifically address your problem. We provide it here for optional reading.
17+
18+
??? Info "Click to see WAVE Tool Reference"
19+
20+
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>
21+
22+
> ### WAVE Category
23+
> Alerts
24+
> ### WAVE Error
25+
> Device dependent event handler
26+
> ### What It Means
27+
> An event handler is present that may not be accessible.
28+
> ### Why It Matters
29+
> 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.
30+
> ### What To Do
31+
> 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.
32+
> ### The Algorithm... in English
33+
> One of the following is present:
34+
> - an onmouseover event but not an onfocus event
35+
> - an onclick event on something other than a link, form control, or element with a tabindex value of 0
36+
> - ondblclick
37+
> ### Standards and Guidelines
38+
> - [2.1.1 Keyboard (Level A)](https://webaim.org/standards/wcag/checklist#sc2.1.1)
39+
40+
## Example of a DOM Snippet Generated From WAVE Tool
41+
42+
> ```html
43+
> [HTML snippet showing the problematic code structure that WAVE detected]
44+
> ```
45+
46+
47+
## Project Team Error guidance
48+
49+
The following material covers how the Project Team has provided a solution to the Device dependent event handler WAVE Alert.
50+
51+
### Project Page Details
52+
- Project Page name: [INSERT PAGE NAME or "ALL"]
53+
- Project Dev URL: [INSERT URL or "N/A"]
54+
- Requires sign in: [TRUE OR FALSE]
55+
- Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
56+
- Can access page directly from URL: [TRUE OR FALSE]
57+
- Accepts URL parameters: [TRUE OR FALSE]
58+
59+
### Project Team Issue and PR details
60+
- Related GitHub Issue(s):
61+
- [INSERT ISSUE URL]
62+
- Related Pull Request(s):
63+
- [INSERT PR URL]
64+
- React Component(s)
65+
- [INSERT PATH: e.g. path/to/Component.jsx]
66+
67+
### Project Team Solution
68+
69+
#### What is the specific problem that was occurring?
70+
<!-- 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 -->
71+
[INSERT CONTENT]
72+
73+
#### What is the proposed solution to this problem?
74+
<!-- 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 -->
75+
[INSERT CONTENT]
76+
77+
#### Step-By-Step Guide
78+
<!-- Author Instructions: Replace details dropdown with N/A if this does not apply -->
79+
80+
??? Info "Click to see step-by-step guide"
81+
82+
[ADD DETAILED INSTRUCTIONS HERE]
83+
84+
#### Other Technical Details
85+
<!-- Author Instructions: Write N/A if this does not apply -->
86+
87+
??? Info "Click to see other technical details"
88+
89+
[INSERT OTHER DETAILS e.g. Prop References, Return Value ]
90+
91+
#### Code Snippet With Solution
92+
??? Info "Click to see code snippets"
93+
94+
[INSERT PATH file/path/to/Snippet.jsx]
95+
96+
```jsx
97+
[Code example showing the fix/solution]
98+
```
99+
100+
#### Why the Fix Works
101+
<!-- Author Instruction: Add an explanation of how the code changes resolve the accessibility issue and why this approach was chosen -->
102+
[INSERT CONTENT]
103+
104+
#### Where this solution is applicable
105+
<!-- 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 -->
106+
- [INSERT SCENARIO 1]
107+
- [INSERT SCENARIO 2]
108+
- [INSERT SCENARIO N]
109+
110+
#### Screenshots of WAVE Error
111+
112+
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
113+
114+
??? Info "1. Descriptive Title for Screenshot Set 1"
115+
116+
Description/text for image
117+
118+
[INSERT IMAGE HERE]
119+
120+
## Credits/Authors
121+
<!-- 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 -->
122+
- @Rabia2219
123+
- [INCLUDE Contributor 2]
124+
- [INCLUDE Contributor N]

0 commit comments

Comments
 (0)