DEV Community

Discussion on: Designing button focus states for better usability

Collapse
 
capsule profile image
Thibaut Allender

Thanks for the reminder, but while Example 3 and 4 indeed clearly change on focus, I'm not sure you'd understand they have focus in an isolated case, where they receive focus by default. It's a bit of an edge case, but you could think their default state was just designed like that.

Also, using an inverted and/or underlined style would force you to use a different focus style for inputs, and links, leading to confusion.

I know this is an article about button focus states, but you probably want to look at the bigger picture and think about a common solution, across all the focusable elements.

Collapse
 
elizabethschafer profile image
Elizabeth Schafer

Yes, great points! I actually made a similar comment recently in a discussion around upcoming WCAG changes around focus indicators (github.com/w3c/wcag/issues/812#iss...

At best you'd be able to maybe notice this change as it happens, but it'd be almost impossible to notice if you're coming back to a page without knowing where the focus is.

I agree that using a single style for everything (that's not obviously the default state) would be ideal.