Skip to content

Commit effbbad

Browse files
Rabia2219Rabia2219
authored
Merge pull request #43 from hackforla/Rabia2219-patch-6
Update and rename contrast-errors-very-low-contrast.md to contrast-er…
2 parents 5cdad8f + 534e1c7 commit effbbad

File tree

5 files changed

+497
-2
lines changed

5 files changed

+497
-2
lines changed

‎docs/known-issues-and-solutions/solutions-index/alert-fieldset-missing-legend.md‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Alert - Fieldset missing legend
2+
- WAVE Category: Alert
3+
- WAVE Alert: Fieldset missing legend
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 Fieldset missing legend 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-27. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#legend_missing" target="_blank">https://wave.webaim.org/api/docs?format=html#legend_missing</a>
21+
22+
> ### WAVE Category
23+
> Alerts
24+
> ### WAVE Error
25+
> Fieldset missing legend
26+
> ### What It Means
27+
> A fieldset does not have a legend.
28+
> ### Why It Matters
29+
> A fieldset legend presents a description of the form elements within a fieldset and is especially useful to screen reader users. A legend should be provided when a higher level description is necessary for groups of check boxes, radio buttons, or other form controls.
30+
> ### What To Do
31+
> If a higher level description is necessary for the user to understand the function or purpose of the controls within the fieldset, provide this description within the `<legend>`. If this description or grouping is not necessary, the fieldset should probably be removed. Note that the legend is repeated to screen reader users for each form control within the fieldset.
32+
> ### The Algorithm... in English
33+
> A fieldset does not have a legend or the legend is empty.
34+
> ### Standards and Guidelines
35+
> - [1.1.1 Non-text Content (Level A)](https://webaim.org/standards/wcag/checklist#sc1.1.1)
36+
> - [1.3.1 Info and Relationships (Level A)](https://webaim.org/standards/wcag/checklist#sc1.3.1)
37+
> - [2.4.6 Headings and Labels (Level AA)](https://webaim.org/standards/wcag/checklist#sc2.4.6)
38+
> - [3.3.2 Labels or Instructions (Level A)](https://webaim.org/standards/wcag/checklist#sc3.3.2)
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 Fieldset missing legend 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]

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
# Alert - Flash
2+
- WAVE Category: Alert
3+
- WAVE Alert: Flash
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 Flash 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-27. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#flash" target="_blank">https://wave.webaim.org/api/docs?format=html#flash</a>
21+
22+
> ### WAVE Category
23+
> Alerts
24+
> ### WAVE Error
25+
> Flash
26+
> ### What It Means
27+
> Flash content is present.
28+
> ### Why It Matters
29+
> Flash content, if not authored to be accessible, will typically introduce significant accessibility issues.
30+
> ### What To Do
31+
> If the Flash object does not present content, hide it from screen readers. If content is presented, provide an HTML alternative and/or make the Flash object natively accessible, including providing captions/transcripts when necessary and ensuring that the Flash object is keyboard-accessible.
32+
> ### The Algorithm... in English
33+
> An `<object>` element is present that has a classid attribute value of "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" or a type attribute value of "application/x-shockwave-flash", or an `<embed>` element is present that has a src attribute value of a .swf file or a type attribute value of "application/x-shockwave-flash".
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+
> - [2.1.2 No Keyboard Trap (Level A)](https://webaim.org/standards/wcag/checklist#sc2.1.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 Flash 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-html5-video-or-audio.md‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
# Alert - HTML5 video or audio
2+
- WAVE Category: Alert
3+
- WAVE Alert: HTML5 video or audio
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 HTML5 video or audio 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-27. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#html5_video_audio" target="_blank">https://wave.webaim.org/api/docs?format=html#html5_video_audio</a>
21+
22+
> ### WAVE Category
23+
> Alerts
24+
> ### WAVE Error
25+
> HTML5 video or audio
26+
> ### What It Means
27+
> A `<video>` or `<audio>` element is present.
28+
> ### Why It Matters
29+
> `<video>` defines video, such as a movie clip or other video streams. `<audio>` defines sound, such as music or other audio streams. 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 with audio, 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+
> A `<video>` or `<audio>` element is present. Note that WAVE does not analyze fall-back content within the `<video>` or `<audio>` element. This content should be accessible because it will be presented to the user if the video or audio content is not supported.
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 HTML5 video or audio 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]

0 commit comments

Comments
 (0)