|
| 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