Focus styles: Select color for focus style and identify other focus methods, if necessary

[davidakennedy]

Context

The VA.gov Design System needs updated focus styles for better accessibility because the current styles don't meet color contrast guidelines in the Web Content Accessibility Guidelines. In updating the styles, we want to also think ahead to future versions of WCAG, which likely have more stringent requirements for focus styles.

Specifically, the current focus style fails to meet compliance in the scenario of white button on dark background (e.g. the active search button).

Links:

• Success Criterion 1.4.11 Non-text Contrast
• What's New in WCAG 2.2?
• 2.4.11 Focus Appearance(AA)
• 2.4.12 Focus Not Obscured (Minimum) (AA)
• Testing, Evaluation, and Documentation: Double box-shadow focus styling
  
• VA Design System Focus Styles: Questions and Assumptions
• Use double box-shadow for focus styling #654

Work to be done

This work is to:

• select a color for the double box shadow focus method. - Colors should be from this palette.
• explore alternative focus methods, if needed for other elements, and select a color for it (will be the same as the above).
• create demos for new focus styles, so they can be tested and evaluated by stakeholders for feedback.

Feedback needed:

• Does the color work well in the stress cases identified in Testing, Evaluation, and Documentation: Double box-shadow focus styling?
• Does the color harmonize well with other visual elements on VA.gov?

Acceptance criteria

• Color recommendations selected, at least two options.
• Alternative focus method explored, at least two alternatives explored.
• Demos created showing both methods with colors.
• All artifacts shared with stakeholders and/or added to tickets.

[davidakennedy]

This work isn't complete, but I've started thinking through some possible color options and wanted to share and explain the thinking here. The color explorations can be seen in the audit recommendations and notes doc I created. Some thoughts on why I went the direction I did in starting with those colors:

• I steered clear of blue colors because so much of VA.gov is already blue. So a blue focus style wouldn't stand out very well in a sea of blue.
• All of the colors fall into the 50 range on the color token color scale. My reasoning there is that the colors in this range have a 4.6:1 contrast ratio on white. That means we'd have some wiggle room for the contrast to still meet the required 3:1 needed for interface elements on background colors like light blue or light yellow, found in Alerts and elsewhere. The next step up in colors (the 40 range) all have a contrast of 3.2:1 on white. That means once they get on any other color, they'd likely wouldn't meet contrast ratio requirements.

A few other thoughts on where I'm at with this work:

• These colors are only starting points. They need to be explored further and put through testing on elements.
• I'd recommend testing them with a color blindness simulator, creating a color palette with a tool like this or similar, and testing them in the browser on real content on the VA's site.
• I'd also recommending creating a PR with Storybook to help visualize how the colors and implementation techniques will look on components in the design system.

[humancompanion-usds]

@davidakennedy - While working on the Back-to-Top change from button to link I came across the Scottish Design System's focus state (Laura, I think, also pointed me to it in another issue; great minds and all that). Instead of using a border ring for focus on buttons and links it flips the colors and adds a bottom inset drop shadow as a border. Worth a look I think: https://designsystem.gov.scot/styles/states/

[danbrady]

Hi @davidakennedy - We're working on porting the VADS table component to v3. I noticed when a table is sorted, the USWDS gives a blue color background to the actively sorted column:

When the same scenario happens in VADS, the focus ring - which is currently yellow - wouldn't meet contrast guidance:

I see you're working through this issue, so I wanted to bring it to your attention. Or if you have any thoughts, let us know. Thanks!

[davidakennedy]

@danbrady Thanks for the report! I'm not actively working on this, but definitely encourage you all to drop gotchas in this ticket so the team has it when work begins again.

[davidakennedy]

I've started to work on this between other team work. A few notes:

• All of this is in progress, and I haven't landed on any recommendations yet. Sharing here for transparency.
• I've gathered some initial feedback from accessibility specialists, but hope to share progress soon with the design system team.
• This repo has my ongoing notes and code. The demo page is linked from there, but you can access it here too.
• I'm going to continue building out demos with the other colors and share it with the team soon.

[davidakennedy]

An update for this work:

• Presenting at the Design System Council today (Dec. 19th).
• Work is ready for feedback from the Council, to help shape next steps.

Recommendation:

• Yellow vivid 20 face00 + Background color and underline plus double outline
• Demo in the design system.

Why:

• My top choice would be Background color and underline plus double outline. This is the same method used by Gov.uk. The use of box-shadow on inline links that wrap isn't an issue here since the box-shadow is only applied to the bottom. This style allows for a dual color setup. The methods are different, depending on the element, but still work well together.
• The yellow and black color combination help meet the principle of "The style should be highly visible, but not distracting." It also is yellow, so it's an evolution of the current design and not too different.

[caw310]

DK presented this to DSC during the Dec 19 meeting.
This ticket is in the DST backlog.

DSC meeting notes: https://docs.google.com/document/d/15Sg_cifRNJMhseuUC6dxktQ0cLU5HidZ7OFeB2Djxpw/edit?usp=sharing

[davidakennedy]

Thanks, Carol!

Some takeaways for me on next steps:

• Go through the design system PR and look for any focus styles on components that could use more work/need tweaking. Note those.
• Iterate on the checkbox/radio button styles. Particularly, the radio buttons look smaller when focused. Maybe move the black outline to the outside, rather than inside.
• Start compiling implementation notes for the design system team.