Dev: WAVE Page Audit: View Archived Accounts

[JRParryY]

Overview

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

Details

We will need to audit all user interactions on the page to ensure 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: http://tdm-dev.azurewebsites.net/archivedaccounts
  • Requires sign in: [true]
    • User Profile Required: [Security]
  • Can access page directly from URL: [false]

Action Items

• Review the Known Issues and Solutions wiki page.
• Open the Audit Page Log spreadsheet and fill in your GitHub username in the Auditor column that matches this issue.
• Create an audit trail in the Audit Log for any unaddressed issues. (Use your best judgment—there’s no need to fill out 100 issues if they appear to be the same.)
• 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

• 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

• Final Requirement (Pick one and verify the correct label and status)
  • No Code Changes (ignore if a PR was created)
    • Remove label: deck: missing
    • Add label: ready for accessibility lead
    • Change status to: Technical Review
  • Code Changes and PR (complete if code changes were made)
    • Remove label: deck: missing
    • Add label: ready for accessibility lead
    • Change status to: Technical Review
    • Complete PR steps as normal

Resources/Instructions

• 1.01 TDM Wiki Pages
  • 1.01.01 Accessibility Audits
  • 1.01.02 How to run the WAVE browser extension
  • 1.01.03 Known Issues and Solutions
• 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="">

Slides

• Staging Deck
  • Staging Deck, slide 2719
• Release deck
  • 2026-01-20 Release deck, slide 2719

[rayneng]

This ticket is ready for PM to move to Prioritized Backlog👍🏼