Create Issue templates for teams to be able to do an accessibility audit

[ExperimentsInHonesty]

Overview

We need to have templates for teams that will be doing accessabiity audits on their websites, so that all teams can be able to create issues easily and uniformly.

Action Items

• Identify prior templates created by TDM Calculator (resource 1.01)
  • find each template draft created by TDM calculator
  • copy each to a comment on this issue
  • revise
• identify missing templates
• create missing as drafts in comments on this issue

Resources/Instructions

• 1.01 Epic: WAVE Accessibility Assessment tdm-calculator#2410

Templates needed

• Epic: Find errors (review this Epic: WAVE Accessibility Assessment tdm-calculator#2410)
  • Individual issues for checking for errors on a specific page (Create Issue templates for teams to be able to do an accessibility audit #32 (comment))

[ExperimentsInHonesty]

Template Dev: WAVE Page Audit: [page-name]

• comes from here: Epic: WAVE Accessibility Assessment tdm-calculator#2410 (comment)
• status: hidden

Issue Template for WAVE Audits

Title

Dev: WAVE Page Audit: [page-name]

Labels

• deck: staging not for stakeholder
• feature: Accessibility
• level: easy
• role: all
• priority: MUST HAVE
• size: 1pt

Projects

P: TDM: project board

Relationships

Parent issue: #2410

Milestone

10 - Launch

---

Overview

We need to run the WAVE evaluation browser extension on [page-name] to audit the page for WCAG2.2 accessibility compliance.

Details

We will need to audit all user interactions on the page so that all possible states and user flows are compliant. Although no code changes are required to complete the audit, it is very important to complete all the steps in the action items and, at the conclusion, apply the correct label and set the correct status.

• Page URL: [insert-page-url-here]
  • Requires sign in: [true/false]
    • User Profile Required: [None/User/Admin/Security]
  • Can access page directly from URL: [true/false]

Action Items

• Review wiki page: Accessibility, How to run the WAVE browser extension (Resource 1.01.02)
• Install the WAVE browser extension
  • (suggested) pin to your browser's toolbar for quick access
• Open TDM WAVE Accessibility Audit Spreadsheet, 1. Page Log (Resource 1.02.01)
  • Choose the row that has your issue number and populate the following fields...
    • Populate Auditor cell with your GitHub handle
    • Populate Begin Date with today's date (YYYY-MM-DD)
  • Log in as the user indicated under Details and navigate to the page you will audit
    • Run the WAVE extension with no elements focused, or clicked
      • In TDM WAVE Accessibility Audit Spreadsheet, 2. Audit Log (Resource 1.02.02), create a row for every Error, Contrast Error, and Alert on the Details pane
        • populate Auditor with your GitHub handle
        • populate Page with your selected page from 1. Page Log
        • populate Error Title with the dropdown that matches the subtitle on the Details pane (see Resource 2.01.02)
        • double check that the Category field now matches the title on the Details pane (see Resource 2.01.01). If there's not a match, leave a comment with the actual title
        • populate the DOM snippet by pasting in the highlighted HTML snippet for the Code panel
        • leave Steps to Reproduce empty

• Form-Elements
  • For all form elements (e.g. text input, password fields, checkboxes), attempt to trigger validation error messages (e.g. missing input, password complexity, incorrect username or password)
    • In 2. Audit Log, create and populate row for every Error, Contrast Error, and Alert on the Details pane
      • populate Auditor with your GitHub handle
      • populate Page with your selected page from 1. Page Log
      • populate Error Title with the dropdown that matches the subtitle on the Details pane (see Resource 2.01.02)
      • double check that the Category field now matches the title on the Details pane (see Resource 2.01.01). If there's not a match, leave a comment with the actual title
      • populate the DOM snippet by pasting in the highlighted HTML snippet for the Code panel
      • in a new comment in this issue, write out all steps required to trigger the validation message
        • populate Steps to Reproduce with the link to this comment

• Table-Controls
  • For all table controls (e.g. dropdown menus, radio buttons, checkboxes, filters) click on the table control to trigger any popups, menu dropdowns, selection styles, etc.
    • In 2. Audit Log, create and populate row for every Error, Contrast Error, and Alert on the Details pane
      • populate Auditor with your GitHub handle
      • populate Page with your selected page from 1. Page Log
      • populate Error Title with the dropdown that matches the subtitle on the Details pane (see Resource 2.01.02)
      • double check that the Category field now matches the title on the Details pane (see Resource 2.01.01). If there's not a match, leave a comment with the actual title
      • populate the DOM snippet by pasting in the highlighted HTML snippet for the Code panel
      • in a new comment in this issue, write out all steps required to trigger the table control elements
        • populate Steps to Reproduce with the link to this comment

• Interactive-Elements
  • For all other interactive elements (e.g. search-boxes, custom input-fields, tooltips, info-buttons) attempt to interact with them so they reveal any informational text, popups, or validation errors
    • In 2. Audit Log, create and populate row for every Error, Contrast Error, and Alert on the Details pane
      • populate Auditor with your GitHub handle
      • populate Page with your selected page from 1. Page Log
      • populate Error Title with the dropdown that matches the subtitle on the Details pane (see Resource 2.01.02)
      • double check that the Category field now matches the title on the Details pane (see Resource 2.01.01). If there's not a match, leave a comment with the actual title
      • populate the DOM snippet by pasting in the highlighted HTML snippet for the Code panel
      • in a new comment in this issue, write out all steps required to trigger the table control elements
        • populate Steps to Reproduce with the link to this comment

Resources/Instructions

• 1.01 TDM Wiki Pages
  • 1.01.01 Accessibility Audits
    • 1.01.02 How to run the WAVE browser extension
• 1.02 TDM WAVE Accessibility Audit Spreadsheet
  • 1.02.01 1. Page Log
  • 1.02.02 2. Audit Log
  • 1.02.03 3. Solved Index
  • 1.02.04 4. Unsolved Index
  • 1.02.05 5. WAVE Error Index

Audit Instructions

2.01 WAVE Details pane (title and subtitle)

2.01.01 Title

2.01.02 Subtitle

2.02 Screenshots of WAVE tool with Register Page, No Interaction

Register Page, No Interaction

• Page URL: https://tdm-dev.azurewebsites.net/register
• Steps to Reproduce: n/a
• Error: Missing form label

2.02.01 Screenshot (w/o WAVE Annotations)

2.02.02 Screenshot (w/ WAVE Annotations)

2.02.03 Screenshot (click on first Missing form label)

2.02.04 Screenshot (open Code panel, click on first Missing form label)

2.02.5 HTML DOM Snippet from firstMissing form label

<input name="firstName" type="text" placeholder="First Name" class="form-control " value="">

[ExperimentsInHonesty]

Template: Epic

Include this

Linking tickets to Epic

• add a link to each page issue to this Epic issue in the sub issues section at the bottom of the top

You can also add issues to the sub issues in the epic right from the issue itself in the Relationship section on the left pannel

[ExperimentsInHonesty]

• Add this to the final individual project page issue template above, when it is done.

Project Page Details

• Project Page name: [INSERT PAGE NAME or "ALL"]

• Project Staging URL: [INSERT URL or "N/A"]

• Requires sign in: [TRUE OR FALSE]

  • Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin]
  • Can access page directly from URL: [TRUE OR FALSE]
  • Accepts URL parameters: [TRUE OR FALSE]

• update the resources sections to link to the new mkdocs wiki

[ExperimentsInHonesty]

left off reviewing epic at hackforla/tdm-calculator#2410 (comment)

[ExperimentsInHonesty]

Issue Template for Epic to apply solution

What does this template do?

This issue template creates an epic issue and will direct the person working on the epic issue in how to create child issues (using a template that is customized during the epic creation). The scope of work of the epic will fix a specific Alert/Aria/Contrast Error/Error found on your website.

When should this template be used?

• Only use this template if there is a solution in the index.
• If this is not the correct template, see WIKI and Issue templates for a list of other templates available.

Template

Labels

Add the following labels and any missing labels that apply

feature: Accessibility

p-feature: [REPLACE WITH PAGE NAME(s)]

Title

Epic: WAVE: [REPLACE WITH Alert/Aria/Contrast Error/Error]

Body

### Overview
We need to make issues that will apply a solution for [REPLACE WITH Alert/Aria/Contrast Error/Error] so that it can get fixed across the site.

### Details
Category: [REPLACE WITH ONE OF THESE CATEGORIES Alert/Aria/Contrast Error/Error]
Name: [REPLACE WITH NAME OF Alert/Aria/Contrast Error/Error]
(There is already a solution for this issue, it just needs to be applied to the pages)

known pages (there might be others):
1. [REPLACE WITH NAME OF PAGE NAME 1]
1. [REPLACE WITH NAME OF PAGE NAME N]

This epic will do the following
- create issues to fix any occurrences of this problem

### Action Items
- [ ] Go to the Solutions Index (resource 1.02) and add the link to the specific page for this problem 1.02.01
- [ ] Copy the issue template (resource 1.04)
- [ ] Use the template content to create a new issue(s) for the pages under Known pages above
- [ ] Customize the draft
   - [ ] Add the following labels
      - role: front-end
      - size: missing
      - p-feature: [REPLACE WITH FIRST PAGE NAME]
      - feature: Accessibility
      - level: missing
      - deck: add to staging
      - ready for dev lead
      - priority: MUST HAVE
   - Customize the draft issue resoures
      - [ ] In this issue use the content in resource Product Documentation 1.03.01 to update the draft's issue resource 1.02.01, 1.02.02
      - [ ] In this issue use the content in resource 1.01.01 (spreadsheet) to update the link to the spreadsheet in draft issue's resource 1.03
         - [ ] open the spreadsheet link and find the row number, and add it to the draft issues's resource 1.03.01
- [ ] Once all the issues are closed, run WAVE and check all other pages for this alert; ignore all other alerts.  Check user interactions on the page to ensure that the alert isn't hidden by an interaction. Check one of the following below:
   - [ ] No additional instances of this alert found
   - [ ] New instances of these alerts found
      - [ ] Make additional issues


### Resources
- 1.01 [TDM WAVE Accessibility Audit Spreadsheet, tab: 2. Audit Log](https://docs.google.com/spreadsheets/d/1qiAqR9LH-Gd4LO3aOs0yUy174o5LOmnuU6Bz671mKsY/edit?gid=0#gid=0)
   - 1.01.01 [TDM WAVE Accessibility Audit Spreadsheet, tab: 2. Audit Log, filter: [REPLACE WITH NAME OF FILTER FOR Alert/Aria/Contrast Error/Error]
- 1.02 [WCAG: Known Issues and Solutions](https://hackforla.github.io/accessibility/known-issues-and-solutions)
  - 1.02.01 https://hackforla.github.io/accessibility/known-issues-and-solutions/solutions-index/[REPLACE WITH PAGE NAME WITH DASHES]/
- 1.03 WIKI: Product Documentation: https://github.com/hackforla/tdm-calculator/wiki/Product-Documentation
   - 1.03.01 WIKI: Product Documentation, [REPLACE WITH PAGE NAME] page: 

#### 1.04 Issue Template
Title
```
Dev: fix [REPLACE WITH Alert/Aria/Contrast Error/Error] on [REPLACE WITH PAGE NAME] page
```
Body
````
### Overview
We need to fix the Alert: [REPLACE WITH Alert/Aria/Contrast Error/Error](s) on [REPLACE WITH PAGE NAME] so that page can be WCAG compliant.

#### Details
Category: [REPLACE WITH ONE OF THESE CATEGORIES Alert/Aria/Contrast Error/Error]
Name: [REPLACE WITH NAME OF Alert/Aria/Contrast Error/Error]
(The Accessibility wiki for this Alert has a solution)

Page that will be worked on:
[REPLACE WITH NAME OF PAGE NAME]

### Action Items
- [ ] Review wiki page: Accessibility, How to run the WAVE browser extension (Resource 1.01)
   - [ ] Install the WAVE browser extension
- [ ] Log in as the user indicated (resource 1.02.01) 
- [ ] navigate to the page you are going to fix (resource 1.02.02)
- [ ] Open the TDM WAVE Accessibility Audit Spreadsheet, for this Alert (resource 1.03) and find the row that relates to this  issues page.
- [ ] Run the WAVE extension with no elements focused, or clicked
- [ ] Find the Alert referenced in the Spreadsheet (1.03)
- [ ] This alert has been resolved on other pages, so review `Project Team Solution` section (resource 1.04.01.01)
- [ ] Apply solution
- [ ] Submit PR
- [ ] Add PR to spreadsheet in PR column next to Alert (resource 1.03)
- [ ] On this issue
   - [ ] Add labels: 
      - `ready for accessibility lead`
   - [ ] Change status to: `Technical Review`
   - to the epic #2897
     - [ ] Add the label `ready for product`
      - [ ] Add this comment 
         ```
          - [#REPLACE WITH THIS ISSUE NUMBER] is closed.  Please review to see if there are any remaining instances of this problem
         ```

### Resources/Instructions
- 1.01[How to run the WAVE browser extension](https://github.com/hackforla/accessibility/blob/main/docs/getting-started/wave-browser-extension.md)
- 1.02 Application details
   - 1.02.01 User Profile Required: [REPLACE WITH USER TYPE: visitor (not logged in)/user/admin/security admin/]
   - 1.02.02 Page URL: http://tdm-dev.azurewebsites.net/[REPLACE WITH PAGE URL]
      - Requires sign in: [REPLACE WITH TRUE OR FALSE]
      - Can access page directly from URL: [REPLACE WITH TRUE OR FALSE]
- 1.03 [TDM WAVE Accessibility Audit Spreadsheet, tab: 2. Audit Log, filter: Alert: [REPLACE WITH FILTER NAME]]
   -  Spreadsheet Row(s): [REPLACE WITH ROW NUMBERS]
- 1.04 [Accessibility Known Issues Index](https://github.com/hackforla/accessibility/blob/main/docs/known-issues-and-solutions/solutions-index/index.md)
    - 1.04.01 [WAVE Known Accessibility Issue: [REPLACE WITH ONE OF THESE CATEGORIES Alert/Aria/Contrast Error/Error] - [REPLACE WITH NAME OF Alert/Aria/Contrast Error/Error]]
        - 1.04.01.01 [WAVE Known Accessibility Issue: [REPLACE WITH ONE OF THESE CATEGORIES Alert/Aria/Contrast Error/Error] - [REPLACE WITH NAME OF Alert/Aria/Contrast Error/Error], project-team-solution]

Additional reading (optional)
- https://hackforla.github.io/accessibility/

#### Slides
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg)
   - [Staging Deck, slide ]
- Release deck
   - [2026-01-20 Release deck, slide ]
````

#### Slides
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg)
   - [Staging Deck, slide 2897] - N/A
- Release deck
   - [2026-01-20 Release deck, slide 2897] - N/A

[ExperimentsInHonesty]

• TDM WAVE Accessibility Audit Spreadsheet
• [DRAFT] [PROJECT NAME] WAVE Accessibility Audit Spreadsheet - TEMPLATE
• questions are in yellow and the audit log tab is a mess

[ExperimentsInHonesty]

• Apply all change from the page log to the Recurring Element Log
• We need to add to the process that some errors or alerts will not have a fix applied but will need to be documented why they didn't get fixed.
• Create an example reference with a screenshot of each type of Interactive element and how to trigger
  • Pop Up Warning Modal = a modal that appears when you do an action and the modal is concerned you made a mistake (e.g., I edit the FAQ, I don't click save, I click on another menu item, Modal pops up letting me know my changed wont be saved, do you want to proceed).

Screenshot Pop Up Warning Modal on FAQ leave

• Initial modal = appears when you first visit the page and must be interacted with in order for you to continue
  • difference between a inital dismissable modal and an intial interactive modal, dismissable modals might require you to click a button to dismiss or be timed, but there are no alternative options. Interactive modal would have multiple options (e.g., cancel/proceed).
• Look at Material UI to see what other elements might be present and nee to be added to the Page Log and Recurring Element Log
• edit and expand https://github.com/hackforla/tdm-calculator/issues/new?template=dev--wave-page-audit.md to have instructions for all sections
  • The issue will be built by adding instead of removing, and it will use the wiki.

[ExperimentsInHonesty]

• Create a link between this template and the sheet Accessibility: WAVE: Known Issues and Solutions DRAFTS, column G that says if there is already a solution

[ExperimentsInHonesty]

The Accessibilitiy Pattern pages might need additonal information so that they can be used for education. Example https://hackforla.github.io/accessibility/getting-started/accessibility-patterns-index/structural-element-heading-level-3/ does not have the information needed. to tech somone about Heading levels. We can add content inspired by https://www.w3schools.com/accessibility/accessibility_heading_levels.php but we also need to add guidance about how classes make these heading levels independent visually from the H1...H6 formatting

---

Screenshot of Declaration Letter Generator show all elements

Screenshot of Declaration Letter Generator with Wave browser extenstion enabled

Screenshot of Declaration Letter Generator progress bar with Wave browser extension with styles on

This is a subset of the image above - This progress bar feature is what we are reviewing in this example

Screenshot of Declaration Letter Generator progress bar Wave browser extension with Styles off

Screenshot of Declaration Letter Generator with Wave browser extenstion enabled - left panel

This shows all the Alerts for the page

Screenshot of Declaration Letter Generator with Wave browser extenstion enabled - left panel

This is a subset of the image above showing that there is an H1 missing from the page. Given that our Progress Bar serves as the heading on page, so it must be H1, instead of H3

[Rabia2219]

On Expunge Assist there are four different page styles, each with their own heading.

1. Homepage
2. Purple Header (About Us, Contact Us, FAQ, Credits)
3. Plain (Privacy Policy, Terms and Conditions)
4. Declaration Letter Generator Informational Pages
5. Declaration Letter Generator Progress Bar Pages
6. Declaration Letter Generator Confirmation Pages

[Rabia2219]

All images on the site should be reviewed to see if they are using alt text appropriately.
https://www.w3.org/WAI/tutorials/images/decision-tree/
Example: The text is only shown for visual effects.
Use an empty alt attribute (alt=""). See Decorative Images.
https://expungeassist.org/

Screenshot of WAVE Tool on Alt that Should Be Empty

[Rabia2219]

Example: There are three links for more information inside an FAQ answer. One of them links to a PDF.
Inform the user that the link will open a PDF document. Because PDF documents may have limitations in accessibility (particularly for complex content) and require a separate program.
https://expungeassist.org/faq

Screenshot of WAVE Tool on Link Where it Does not Indicate PDF

[Rabia2219]

All images on the site should be reviewed to see if they are using alt label directly adjacent to the images they describe. The alt text might not be needed, see Issue ???, but in this case they are also not appropriately connected to the images they describe.
Example: The alt text for the images are placed incorrectly.
https://expungeassist.org/about-us

Screenshot of About Us Page with Incorrectly Placed Alt Text

[Rabia2219]

Repeated elements and inappropriate use of figcaption.
https://www.w3.org/WAI/WCAG22/Techniques/html/H86
https://expungeassist.org/about-us
Example: The Question? Comments? Feedback? appears twice on the page, once as a figcaption and then as a heading. Given that it is not a caption for an image or icon, is there another reason why figcaption was used?

Screenshot of the Contact Us Page As it Renders on the Site

Screenshot of the Contact Us Page Showing the Page Elements

Code Referencing "Questions? Comments? Feedback?" on the Contact Us Page

<figcaption class="jss592">Questions? Comments? Feedback?</figcaption>

<div class="jss589"><h2 id="contact-info-heading" class="jss594">Questions? Comments? Feedback?</h2><p class="jss596">Fill out the form or email us directly at <a class="jss580" href="mailto:expungeassist@hackforla.org">expungeassist@hackforla.org</a></p><p class="jss596">We’ll get back to you within 5 business days.</p></div>

[Rabia2219]

Form should have labels
https://expungeassist.org/about-us
Example: There is a Missing form label on the Contact Form on the Contact Us page

Screenshot of Contact Us Page Showing Missing Form Label