[a11y]: Dashboard and top navigation - Fix color contrast and structure issues found by axe-dev

[lsr-explore]

Why is this issue important?

If the color contrast is not sufficient, low vision and color blind users may have difficulty seeing the elements on the page

Incomplete structure can impact the navigability of the site for customers who use screen readers

Findings from axe devTools chrome extension

Color Contrast ratio threshold

WCAG 1.43 AA

https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

All elements that failed color contrast shown from Microsoft's Accessibility Insights Chrome Extension

---

Structure

Current State

When user visits ARPA reporter home page - https://staging.grants.usdr.dev/arpa_reporter/

There are accessibility issues that may impact customer's ability to use the site.

Expected State

When user visits ARPA reporter home page - https://staging.grants.usdr.dev/arpa_reporter/

No accessibility issues

Implementation Plan

Color Contrast

• Use USDR blue used in Grants Finder for the blue links
• Darken the light gray text
• Use USDR blue for the blue buttons
• Identify a darker version of the cyan color for the "Send Audit Report by Email" button

Structure

• Add main landmark for the main content
• Add an H1 heading element

Relevant Code Snippets

Note: Bootstrap page on accessibility

Color contrast
Most colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to insufficient color contrast (below the recommended WCAG 2.0 color contrast ratio of 4.5:1) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios.

[ClaireValdivia]

This all looks great in staging!