|
| 1 | +# Error - Multiple form labels |
| 2 | +- WAVE Category: Error |
| 3 | +- WAVE Error: Multiple form labels |
| 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 Multiple form labels 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#longdesc_invalid" target="_blank">https://wave.webaim.org/api/docs?format=html#longdesc_invalid</a> |
| 21 | + |
| 22 | + > ### WAVE Category |
| 23 | + > Errors |
| 24 | + > ### WAVE Error |
| 25 | + > Invalid longdesc |
| 26 | + > ### What It Means |
| 27 | + > The longdesc attribute is not a URL. |
| 28 | + > ### Why It Matters |
| 29 | + > The longdesc attribute of an image must be a valid URL of a page that contains a description of the image content. A longdesc value that contains image description text will not provide any accessibility information. Due to poor support, a link to the long description content should be used instead of longdesc. |
| 30 | + > ### What To Do |
| 31 | + > Remove the longdesc attribute and provide a link to the long description content. If the longdesc attribute is maintained, ensure the attribute value is a valid URL/filename. |
| 32 | + > ### The Algorithm... in English |
| 33 | + > The longdesc attribute value: |
| 34 | + > - is empty |
| 35 | + > - is not a URL or filename |
| 36 | + > - is a URL or filename with an extension of .jpg, .gif, or .png |
| 37 | + > ### Standards and Guidelines |
| 38 | + > - [1.1.1 Non-text Content (Level A)](https://webaim.org/standards/wcag/checklist#sc1.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 Multiple form labels WAVE Error. |
| 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 | +- @MissBrandyLea |
| 123 | +- [INCLUDE Contributor 2] |
| 124 | +- [INCLUDE Contributor N] |
0 commit comments