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)