Lighthouse: Accessibility - Forms

[ExperimentsInHonesty]

Overview

We need to review the forms on the site to identify changes, so that we can create new issues to bring the site up to WCAG standards.

Details

In order for your site's form(s) to be usable by visitors using screen readers, all the form elements need labels. There are specific details and exceptions, which can be found in the guidelines below.

Action Items

• [ ] Install Chrome extension
• [ ] Go to each page on the website (see list here https://github.com/hackforla/tdm-calculator/wiki/Product-Documentation), and add each page to the List of pages with forms section of the Resources below.
• [ ] Go to each page of the site that has a form
• [ ] Open the Chrome extension
• [ ] Document the changes needed to bring the forms up to established standards. There will be other issues it finds that exceed the scope of this issue and those will be addressed on another issue. Just focus on issues regarding the forms.

Instructions

• Deque University Label guidelines https://dequeuniversity.com/rules/axe/3.2/label
• Install WAVE Chrome extension

Example from Page 1 of the calculator

List of pages with forms

• Calculator, Page 1
• Calculator, Page 2 (you can only get to this page by filling out some details on page 1, or open an existing project)
• Calculator, Page 3 (you can only get to this page by filling out some details on page 2, or open an existing project)
• Calculator, Page 4 (you can only get to this page by filling out some details on page 3, or open an existing project)

[ExperimentsInHonesty]

We will have to figure out another way to test the forms accessibility, since the lighthouse chrome extension just calls the page url, and, given that can't consent to the Privacy Policy, it just checks that every time.