Skip to content

Commit 21da56d

Browse files
MissBrandyLeaMissBrandyLea
authored
Merge pull request #48 from hackforla/MissBrandyLea-patch-1
Miss brandy lea patch 1
2 parents c47fe58 + 239f883 commit 21da56d

9 files changed

+1098
-0
lines changed

‎docs/known-issues-and-solutions/solutions-index/Image button missing alternative text.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# Error - Image button missing alternative text
2+
- WAVE Category: Error
3+
- WAVE Error: Image button missing alternative text
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 Image button missing alternative text 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-04-09. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#alt_input_missing" target="_blank">https://wave.webaim.org/api/docs?format=html#alt_input_missing</a>
21+
22+
> ### WAVE Category
23+
> Errors
24+
> ### WAVE Error
25+
> Image button missing alternative text
26+
> ### What It Means
27+
> Alternative text is not present for a form image button.
28+
> ### Why It Matters
29+
> Image buttons provide important functionality that must be presented in alternative text. Without alternative text, the function of an image button is not made available to screen reader users or when images are disabled or unavailable.
30+
> ### What To Do
31+
> Add appropriate alternative text that presents the function of the image button (e.g., `<input src="button.gif" type="image" alt="Submit search">`).
32+
> ### The Algorithm... in English
33+
> An image button (`<input type="image">`) does not have an alt attribute or has an alt value that is null/empty (alt="") or only space characters.
34+
> ### Standards and Guidelines
35+
> - [1.1.1 Non-text Content (Level A)](https://webaim.org/standards/wcag/checklist#sc1.1.1)
36+
> - [2.4.4 Link Purpose (In Context) (Level A)](https://webaim.org/standards/wcag/checklist#sc2.4.4)
37+
38+
## Example of a DOM Snippet Generated From WAVE Tool
39+
40+
> ```html
41+
> [HTML snippet showing the problematic code structure that WAVE detected]
42+
> ```
43+
44+
45+
## Project Team Error guidance
46+
47+
The following material covers how the Project Team has provided a solution to the Image button missing alternative text WAVE Error.
48+
49+
### Project Page Details
50+
- Project Page name: [INSERT PAGE NAME or "ALL"]
51+
- Project Dev URL: [INSERT URL or "N/A"]
52+
- Requires sign in: [TRUE OR FALSE]
53+
- Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
54+
- Can access page directly from URL: [TRUE OR FALSE]
55+
- Accepts URL parameters: [TRUE OR FALSE]
56+
57+
### Project Team Issue and PR details
58+
- Related GitHub Issue(s):
59+
- [INSERT ISSUE URL]
60+
- Related Pull Request(s):
61+
- [INSERT PR URL]
62+
- React Component(s)
63+
- [INSERT PATH: e.g. path/to/Component.jsx]
64+
65+
### Project Team Solution
66+
67+
#### What is the specific problem that was occurring?
68+
<!-- 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 -->
69+
[INSERT CONTENT]
70+
71+
#### What is the proposed solution to this problem?
72+
<!-- 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 -->
73+
[INSERT CONTENT]
74+
75+
#### Step-By-Step Guide
76+
<!-- Author Instructions: Replace details dropdown with N/A if this does not apply -->
77+
78+
??? Info "Click to see step-by-step guide"
79+
80+
[ADD DETAILED INSTRUCTIONS HERE]
81+
82+
#### Other Technical Details
83+
<!-- Author Instructions: Write N/A if this does not apply -->
84+
85+
??? Info "Click to see other technical details"
86+
87+
[INSERT OTHER DETAILS e.g. Prop References, Return Value ]
88+
89+
#### Code Snippet With Solution
90+
??? Info "Click to see code snippets"
91+
92+
[INSERT PATH file/path/to/Snippet.jsx]
93+
94+
```jsx
95+
[Code example showing the fix/solution]
96+
```
97+
98+
#### Why the Fix Works
99+
<!-- Author Instruction: Add an explanation of how the code changes resolve the accessibility issue and why this approach was chosen -->
100+
[INSERT CONTENT]
101+
102+
#### Where this solution is applicable
103+
<!-- 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 -->
104+
- [INSERT SCENARIO 1]
105+
- [INSERT SCENARIO 2]
106+
- [INSERT SCENARIO N]
107+
108+
#### Screenshots of WAVE Error
109+
110+
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
111+
112+
??? Info "1. Descriptive Title for Screenshot Set 1"
113+
114+
Description/text for image
115+
116+
[INSERT IMAGE HERE]
117+
118+
## Credits/Authors
119+
<!-- 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 -->
120+
- @MissBrandyLea
121+
- [INCLUDE Contributor 2]
122+
- [INCLUDE Contributor N]

‎docs/known-issues-and-solutions/solutions-index/Image map area missing alternative text.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# Error - Image map area missing alternative text
2+
- WAVE Category: Error
3+
- WAVE Error: Image map area missing alternative text
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 Image map area missing alternative text 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-04-09. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#alt_area_missing" target="_blank">https://wave.webaim.org/api/docs?format=html#alt_area_missing</a>
21+
22+
> ### WAVE Category
23+
> Errors
24+
> ### WAVE Error
25+
> Image map area missing alternative text
26+
> ### What It Means
27+
> Alternative text is not present for an image map area (hot spot).
28+
> ### Why It Matters
29+
> Image map areas or clickable hot spots provide important functionality that must be provided in alternative text. Without alternative text, the function of the area is not made available to screen reader users or when images are unavailable.
30+
> ### What To Do
31+
> Add a descriptive alt attribute value to each area element. Additionally, ensure that the area elements are listed in the code in a logical, intuitive order (e.g., matching the visual order, alphabetically, etc.).
32+
> ### The Algorithm... in English
33+
> An area element does not have the alt attribute or has an alt value that is null/empty (alt="") or only space characters.
34+
> ### Standards and Guidelines
35+
> - [1.1.1 Non-text Content (Level A)](https://webaim.org/standards/wcag/checklist#sc1.1.1)
36+
> - [2.4.4 Link Purpose (In Context) (Level A)](https://webaim.org/standards/wcag/checklist#sc2.4.4)
37+
38+
## Example of a DOM Snippet Generated From WAVE Tool
39+
40+
> ```html
41+
> [HTML snippet showing the problematic code structure that WAVE detected]
42+
> ```
43+
44+
45+
## Project Team Error guidance
46+
47+
The following material covers how the Project Team has provided a solution to the Image map area missing alternative text WAVE Error.
48+
49+
### Project Page Details
50+
- Project Page name: [INSERT PAGE NAME or "ALL"]
51+
- Project Dev URL: [INSERT URL or "N/A"]
52+
- Requires sign in: [TRUE OR FALSE]
53+
- Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
54+
- Can access page directly from URL: [TRUE OR FALSE]
55+
- Accepts URL parameters: [TRUE OR FALSE]
56+
57+
### Project Team Issue and PR details
58+
- Related GitHub Issue(s):
59+
- [INSERT ISSUE URL]
60+
- Related Pull Request(s):
61+
- [INSERT PR URL]
62+
- React Component(s)
63+
- [INSERT PATH: e.g. path/to/Component.jsx]
64+
65+
### Project Team Solution
66+
67+
#### What is the specific problem that was occurring?
68+
<!-- 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 -->
69+
[INSERT CONTENT]
70+
71+
#### What is the proposed solution to this problem?
72+
<!-- 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 -->
73+
[INSERT CONTENT]
74+
75+
#### Step-By-Step Guide
76+
<!-- Author Instructions: Replace details dropdown with N/A if this does not apply -->
77+
78+
??? Info "Click to see step-by-step guide"
79+
80+
[ADD DETAILED INSTRUCTIONS HERE]
81+
82+
#### Other Technical Details
83+
<!-- Author Instructions: Write N/A if this does not apply -->
84+
85+
??? Info "Click to see other technical details"
86+
87+
[INSERT OTHER DETAILS e.g. Prop References, Return Value ]
88+
89+
#### Code Snippet With Solution
90+
??? Info "Click to see code snippets"
91+
92+
[INSERT PATH file/path/to/Snippet.jsx]
93+
94+
```jsx
95+
[Code example showing the fix/solution]
96+
```
97+
98+
#### Why the Fix Works
99+
<!-- Author Instruction: Add an explanation of how the code changes resolve the accessibility issue and why this approach was chosen -->
100+
[INSERT CONTENT]
101+
102+
#### Where this solution is applicable
103+
<!-- 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 -->
104+
- [INSERT SCENARIO 1]
105+
- [INSERT SCENARIO 2]
106+
- [INSERT SCENARIO N]
107+
108+
#### Screenshots of WAVE Error
109+
110+
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
111+
112+
??? Info "1. Descriptive Title for Screenshot Set 1"
113+
114+
Description/text for image
115+
116+
[INSERT IMAGE HERE]
117+
118+
## Credits/Authors
119+
<!-- 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 -->
120+
- @MissBrandyLea
121+
- [INCLUDE Contributor 2]
122+
- [INCLUDE Contributor N]

‎docs/known-issues-and-solutions/solutions-index/Image map missing alternative text.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Error - Image map missing alternative text
2+
- WAVE Category: Error
3+
- WAVE Error: Image map missing alternative text
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 Image map missing alternative text 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-04-09. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#alt_map_missing" target="_blank">https://wave.webaim.org/api/docs?format=html#alt_map_missing</a>
21+
22+
> ### WAVE Category
23+
> Errors
24+
> ### WAVE Error
25+
> Image map missing alternative text
26+
> ### What It Means
27+
> An image that has hot spots does not have an alt attribute.
28+
> ### Why It Matters
29+
> Any content or function of an image that uses an image map (hot spots) and does not have an alt attribute will not be available to screen reader users or if the image is unavailable.
30+
> ### What To Do
31+
> Add an alt attribute to the image. Ensure the alt attribute value for the image map image is appropriate. The alternative text is typically null/empty (alt=""), unless the image conveys content not conveyed in the hot spot areas (e.g., "Map of the United States").
32+
> ### The Algorithm... in English
33+
> An image element has the usemap attribute and no alt attribute.
34+
> ### Standards and Guidelines
35+
> - [1.1.1 Non-text Content (Level A)](https://webaim.org/standards/wcag/checklist#sc1.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 Image map missing alternative text WAVE Error.
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+
- @MissBrandyLea
120+
- [INCLUDE Contributor 2]
121+
- [INCLUDE Contributor N]

0 commit comments

Comments
 (0)