[Topic] Styling focus and hover

[rianrietveld]

URL: https://wpaccessibility.org/docs/topics/design/focus-hover/
Code: https://github.com/wpaccessibility/wp-a11y-docs/blob/main/docs/topics/design/focus-hover/index.md

Please read How to contribute before you start.

Tasks

This content needs to be rewritten and extended.

Resources

Sara Soueidan A guide to designing accessible, WCAG-conformant focus indicators.

Amber Hinds in Post Status. I usually try to have two changes between states, not just one. So pick at least two of these:

• Change pointer
• Remove underline
• Change color (3:1 contrast ratio between colors)
• Show the focus outline (you can do this on hover too)
• If using a border bottom, change the thickness or shift it down
• Reveal an icon (like a right arrow)
• Stretch out or reposition an icon that is already there
• If it's a link button, change the shape or border radius or some other design aspect of the button.