Discovery: Accessible design pattern for CMS table row hover states

[EWashb]

Background

An accessibility audit found that on all products and all tables, the main content listing has tables that do not pass WCAG accessibility standards for hover states. Table rows currently have a hover state that changes to light blue.

On hover, the background color of the table rows changes to light blue. However, because of this, the color contrast between elements no longer passes:

1. Between the links and the background
2. And between the backgound and the link hover background color

Image of defective area:

Possible Solution

There does not have to be a hover state on the table row, this can be removed if desired. Or if it should stay for design reasons, the color should be changed to make sure it passes ratio requirements with the standard link color and the link hover background color

Accessibility Standard

WCAG version 2.0 AA, Criterion 1.4.3

Acceptance Criteria

• Discovery of table usage across products to determine if the hover is necessary for design or other reasons not immediately obvious in audit
• WCAG AAA considered
• Hover state pattern with appropriate color contrast for link color
• Design is reviewed with Accessibility Lead
• Document changes to links in the CMS DS and changelog
• tech implementation ticket created

[EWashb]

After fixing this issue, additional tickets for hover state color contrast on links across the CMS?

[EWashb]

Hey team! Please add your planning poker estimate with ZenHub @cjterdi @laflannery

[cjterdi]

Per our accessibility review for links, we have come up with the follow criteria. This applies to 9916 and 9915

All standard links will be changed to the dark blue (004795)
hover/focus state link color will be darker blue (003e73)
We think having a background color would be beneficial as this would keep it as a similar format as the front end (they have a background color on hover)
The hover/focus state should be the lighter blue (e4eff9). This is currently the color on some CMS links, not all. It is also different than the VA.gov front end hover color
Footer links will remain white
Footer links on hover/focus will keep their current background color (e4eff9) but the text will be darker blue (003e73)
All links should have underline on default and then no underline on hover/focus

[EWashb]

Implementation ticket for these changes has been created.