Workshop guidelines on focus states

[CharlotteDowns]

What

We want to improve the consistency of focus states and expected focus behaviour across GOV.UK. As a team, we need to set some principles for our ideal focus states, when and how they are used.

Why

In order to publish documentation on focus states we need to determine some appropriate rules/guides.

Who needs to know about this

Designers, Developer, all the team

Further detail

• Focus states - an audit
• Understanding focus states in get started guidance

Done when

• Collect examples of focus states
• Present back at team show and tell
• Workshop with team

[36degrees]

Related (but previously resolved) issues:

• Inability to tab to accordion plus/minus 'control' flagged in accessibility audit – Inability to tab to accordion plus/minus 'control' flagged in accessibility audit govuk-frontend#1770
• Focus indicator is potentially confusing for tabs and accordion components – Focus indicator is potentially confusing for tabs and accordion components govuk-frontend#1405

Other useful reference:

• Colour contrast and Focus for WCAG 2.1 (Presentation, June 2019)
• Review of new focus success criteria in initial WCAG 2.2 public draft (Presentation, August 2020)
• Focus States User Research Findings Round One (Presentation, July 2019)
• GitHub Issues relating to WCAG 2.2 2.4.11 focus appearance on the WCAG repo

[36degrees]

Related, unresolved, issues that we might end up doing as part of this work:

• Consider adding focus styles guidance on links with large touch areas Consider adding focus styles guidance on links with large touch areas #1162
• Improve the focus style guidance to include linked images/ videos Improve the focus style guidance to include linked images/ videos #1101
• Include extra example of how to style focused items Suggestion: include extra example of how to style focused items #1317

[CharlotteDowns]

The team worked on grouping and establishing some principles for focus states on the 21 Jun 2021. Here is the padlet from the session.