Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y]: Fix color contrast and missing H1 elements in views #3898

Open
lsr-explore opened this issue Jan 20, 2025 · 0 comments
Open

[a11y]: Fix color contrast and missing H1 elements in views #3898

lsr-explore opened this issue Jan 20, 2025 · 0 comments

Comments

@lsr-explore
Copy link
Contributor

Why is this issue important?

User's with low vision may find it more difficult to navigate the site if color contrast is low.

Views without H1 elements impact screen reader users who use the Landmarks view of the rotor menu to understand the structure of a page.

Fix the issues identified by running axe DevTools chrome extension

Fix Color contrast issues- use Grants branded blue

Used Contrast Finder for suggestions for other colors

  • Views
    • StandardForm.vue - Create User view - Save button
    • AgenciesView.vue - Create new Agency button
    • LoginView.vue
    • NewTemplateView.vue - Cancel button
    • NewUploadView.vue - Submit button
    • ReportingPeriodsView.vue - multiple buttons
    • UploadsView.vue - multiple buttons
    • UservsView.vue

Missing H1 elements

  • LoginView.vue
  • TemplateView.vue
  • UserView.vue

Current State

See comments in PR #3811 - a11y(arpa): fix headings and color contrast issues for screenshots

Expected State

When axe DevTools is run, no color contrast or missing h1 errors should be flagged.

Implementation Plan

Use the Grants color scheme

Relevant Code Snippets

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 👀 In review
Development

No branches or pull requests

1 participant