Should inputs and buttons have the same focus state?

Question

Should text input text focus state be the same as buttons keyboard focus state?

Answer

While there isn't a WCAG requirement regarding focus state consistency, significant changes in the focus states for different types of components may impact the usability of your website. However, it is important that your focus state still meets other relevant WCAG criteria, such as 1.4.11 Non-text Contrast and 1.4.1 Use of Color.

If you have different background colors on different elements and need to use a different focus state to avoid a contrast failure, use similar designs to provide consistent visual language for what's in focus. You can also avoid contrast failures due to changing element or background colors by designing focus states in such a way that it will work regardless of the background color. For example, by using both a light and a dark border for all components.

For more information on focus states and color contrast, check out the Accessibility Concepts for Designers course from Accessible Web.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.