loading...

re: Designing button focus states for better usability VIEW POST

FULL DISCUSSION
 

I like GOV.UK’s approach; they use a heavy outline in a unique color that is uniform across all their focus styles. This allows the user to look for that specific color whenever they move focus.

.govuk-button:focus {
    outline: 3px solid #ffbf47;
    outline-offset: 0;
}

design-system.service.gov.uk/compo...

 

I agree — it seems much easier to follow focus when the style always looks the same. That makes a lot of sense but I don't think I'd ever had that thought. Thanks for pointing it out!

This is interesting though because while that outline looks bold and obvious to me, it actually doesn't have a high enough color contrast ratio in some cases (like when it's against a white background).

There's an issue in GitHub about it, but it was closed recently and I'm not sure why:
github.com/alphagov/govuk-frontend...

 

I think it might be because there is also an issue about meeting WCAG 2.1 standards: github.com/alphagov/govuk-design-s...

code of conduct - report abuse