Apply WCAG standards to log in screen

[SLDonnelly]

As a SPAR User I want SPAR to follow WCAG standards So That I can use assistive technologies to help me complete my work

Acceptance Criteria

For the SPAR log in screen

• Semantic HTML structure
• Ensure all images have alternative text (for the photo on the log in screen use: "Picture of spruce tree branches with needles and cones".
• Accessible forms
• Keyboard navigation
• ARIA (Accessible Rich Internet Applications) roles and attributes
• Focus management
• Check that contrast is above 4.5:1
• Tested - Use accessibility tools and screen readers during development.

Additional Context

• More information here: https://github.com/bcgov/nr-spar/wiki/Coding-for-accessibility:-Screen-readers

Definition of Done

• Ready to Demo in Sprint Review
• Does what I have made have appropriate test coverage?
• Documentation and/or scientific documentation exists and can be found
• Peer Reviewed by 2 people on the team
• Manual testing of all PRs in Dev and Prod
• QA from UX team member
• Merged

[ngunner15]

To Do before working on WCAG tickets:

• Read up on the documentation for various HTML element's WCAG requirements.
• Example scenario

What is the correct tag for a text? Is it <h1>, <p> or for styling purposes it should be <div>. If we use <div> and it should behave as a heading or title then we have to add aria labels to show <div> as a heading.
eg <div role="heading" aria-level="2">Title Text Here</div>

• Find a screen reader testing tool preferably one that can be integrated with a browser like a Chrome extension, for eg WAVE

[kevinginley]

@ngunner15 I did a manual review using WAVE and the page is meeting the outlined criteria. Great work!