Focus

[IanPouncey]

https://bbc.github.io/gel/foundations/focus/

[IanPouncey]

Extrapolation from GEL technical recommendations

Required

• Focus styles must be visible under all circumstances
• Action dialogs must take focus upon being opened
• Focus can be moved away from any focusable element

Recommended

• Only interactive elements should be focusable by keyboard
• Only semantic HTML be used for interactive elements
• Avoid layouts in which content/focus order differes from block flow direction
  • Avoid float that reverse visual order
  • Avoid order property
• Suppress focus styles that appear when an element is clicked for mouse users in browsers that support :focus-visible.
• Remove the default focus style and provide your own
• Provide a reasonably thick outline on focus that matches the text's colour
• Users should be able to press Tab to focus the next interactive element, and Shift and Tab to focus the previous one.
• Avoid positive tabindex values
• Under all circumstances, it should be possible to leave the web page, and the browser, via keyboard

Implied

• Interactive elements should be focusable by a keyboard
• Interactive elements should be activable using a keyboard

Suggested ACT expectations

• Focus styles must be visible under all circumstances
• Focus can be moved away from any focusable element
• Only interactive elements should be focusable by keyboard
• Interactive elements must be focusable by a keyboard
• Interactive elements must be activable using a keyboard

[micmath]

re "Provide a reasonably thick outline on focus that matches the text's colour" do I interpret that correctly that if the text was black then the focus outline should also be black? I've been looking at the Gov.uk design guide and they use a bright, contrasting colour for the focus outline. Wouldn't an easy-to-spot colour be better than black?

refers to:

"In most circumstances, this should share the text's color (since the contrast for color should already differentiate it from the local background). Just omit a color value to achieve this."

[micmath]

I agree with the suggested ACT expectations.

[micmath]

After the Technical Documentation for Focus was published, the GEL Design Docs were modified to include new guidance on Forms. Based on that, as well as industry standard practice, I've amended the Technical Documentation to be less proscriptive about colour. So Provide a reasonably thick outline on focus that matches the text's colour. can become Provide a reasonably thick outline on focus with adequate colour contrast.