# WAVE Known Accessibility Issue: [Category] - [Error]
- WAVE Category: [Category]
- WAVE Error: [Error]

## WAVE Error guidance

Click to see the WAVE Tool's Reference material on [WAVE Error Name]. These guidelines may not specifically address your problem, but they might provide context for getting started.

<details><summary>Click to see WAVE Tool Reference</summary>
<p>

> 
> ### WAVE Category
> [Category]
> 
> ### WAVE Error
> [Error]
> 
> ### What It Means
> [Brief explanation of what this error indicates]
> 
> ### Why It Matters
> [Explanation of accessibility impact and why this matters for users]
> 
> ### What To Do
> [General guidance on how to fix this type of error]
> 
> ### The Algorithm... in English
> [Plain language description of how WAVE detects this error]
> 
> ### Standards and Guidelines
> - [WCAG Guideline Link and Level]
> - [Additional WCAG Guidelines if applicable]
> 
> ### DOM Snippet Generated From WAVE Tool
> ```html
> [HTML snippet showing the problematic code structure that WAVE detected]
> ```

</p>
</details> 

## TDM Error guidance

The following material covers how the TDM team has provided a solution to the [Error] WAVE error.

### TDM Calculator Page Details
- TDM Page name: [Page Name or "ALL"]
- TDM Staging URL: [URL or "N/A"]
- Required User Role: [Visitor/Logged in user/Admin/Security Admin]
### TDM Calculator Issue and PR details
- Related GitHub Issue(s):
  - [Issue URL]
- Related Pull Request(s):
  - [PR URL or "Add once PR is created for this fix (PR # TBD)"]
- React Component(s)
  - `[file/path/to/Component.jsx]`

### TDM Solution

#### What is the specific problem that was occurring?
[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]

#### What is the proposed solution to this problem?
[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]

#### Step-By-Step Guide
<!-- Write N/A if this does not apply -->


<details><summary>Click to see step-by-step guide</summary>
<p>

[ Provide detailed instructions how to apply your fix here ]

</p>
</details> 

#### Other Technical Details
<!-- Write N/A if this does not apply -->

<details><summary>Click to see other technical details</summary>
<p>

[ e.g. Prop References, Return Value ]

</p>
</details> 

#### Code Snippet
```jsx
// [file/path/to/Component.jsx]

[Code example showing the fix/solution]
```

#### Why the Fix Works
[Explanation of how the code changes resolve the accessibility issue and why this approach was chosen]

#### Where this solution is applicable 
- [Context or scenario 1 where this solution applies]
- [Context or scenario 2 where this solution applies]
- [Additional contexts as needed]

#### Screenshots of WAVE Error

<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>

<img width="400" height="400" alt="Image" src="https://github.com/user-attachments/assets/123456789" />

</p>
</details> 

## Credits/Authors
All HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page.

- [Contributors]