Skip to content

Commit c9a8a6d

Browse files
authored
Merge pull request #45 from hackforla/Rabia2219-patch-8
Create alert-javascript-jump-menu.md
2 parents 681fa23 + a564ead commit c9a8a6d

File tree

1 file changed

+122
-0
lines changed

1 file changed

+122
-0
lines changed
Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# Alert - JavaScript jump menu
2+
- WAVE Category: Alert
3+
- WAVE Alert: JavaScript jump menu
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 JavaScript jump menu 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-03. Check for updated guidance at: <a href="https://wave.webaim.org/api/docs?format=html#javascript_jumpmenu" target="_blank">https://wave.webaim.org/api/docs?format=html#javascript_jumpmenu</a>
21+
22+
> ### WAVE Category
23+
> Alerts
24+
> ### WAVE Error
25+
> JavaScript jump menu
26+
> ### What It Means
27+
> A JavaScript jump menu may be present.
28+
> ### Why It Matters
29+
> A JavaScript jump menu is a select element that triggers a new web page with the onchange event handler. When navigating with the keyboard, each change in the select menu triggers a page change in some web browsers, thus making navigation very difficult.
30+
> ### What To Do
31+
> If the onchange event handler triggers a new web page, eliminate the JavaScript jump menu and allow the user to change the select menu, then activate an adjacent button to trigger the new page.
32+
> ### The Algorithm... in English
33+
> The onchange attribute is present on a `<select>` element.
34+
> ### Standards and Guidelines
35+
> - [2.1.1 Keyboard (Level A)](https://webaim.org/standards/wcag/checklist#sc2.1.1)
36+
> - [3.2.2 On Input (Level A)](https://webaim.org/standards/wcag/checklist#sc3.2.2)
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 JavaScript jump menu WAVE Alert.
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+
- @Rabia2219
121+
- [INCLUDE Contributor 2]
122+
- [INCLUDE Contributor N]

0 commit comments

Comments
 (0)