search

department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
282 stars 199 forks source link

[AXE-CORE]: Facility Name links MUST be distinguished from surrounding text in a way that does not rely on color #8245

Closed jenstrickland closed 4 years ago

jenstrickland commented 4 years ago

508-defect-3

Feedback framework

Description

People who cannot distinguish between colors or who experience low contrast issues can tell when text is a link by verifying the link has either a distinct style that does not rely on color alone or has a contrast difference of greater than 3:1 from the surrounding text. The blue heading link color is rgb(0,71,149), the surrounding text color (as well as an unlinked h2) is rgb(50,58,69). The contrast ratio is 1.27.

Screen Shot 2020-04-21 at 6 38 48 PM

Why it Matters

Some people with low vision experience low contrast, meaning that there aren't very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in luminance (brightness) to the background can be hard to read.

There are nearly three times more individuals with low vision than those with total blindness. One person in twelve has a color deficiency - about 8% of men and 0.4% of women in the US. A person with low vision or color blindness is unable to distinguish text against a background without sufficient contrast.

When a sufficient color contrast ratio of 3:1 is not present to distinguish link text color from surrounding text color, users with low vision who experience low contrast cannot detect visually that the text is intended to function as a link.

Point of Contact

VFS Point of Contact: Jennifer

Acceptance Criteria

As a low-vision user I want to distinguish links on a page so that I may know where the interactive content relevant to me is.

Environment

Steps to Recreate

  1. Enter https://staging.va.gov/find-locations in browser
  2. Using the axe-coconut browser extensions, audit the page
  3. Verify the serious issue "Links must be distinguished from surrounding text in a way that does not rely on color" is listed and associated with the h2 linked facility headings

Possible Fixes (optional)

Add an underline to the linked headings, like on the VA.gov homepage heading links.

Screen Shot 2020-04-21 at 6 42 47 PM

WCAG or Vendor Guidance (optional)

mmiddaugh commented 4 years ago

This is an important issue but unrelated to the facility-level operating status. It was an existing issue in the backlog.

jenstrickland commented 4 years ago

Removing from this operating status epic.

mmiddaugh commented 4 years ago

This should be resolved in the new design implementation. Please validate at your convenience, @jenstrickland

jenstrickland commented 4 years ago

validated 🎉