Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.
Here’s the first trick:
…[…] if the default CSS outline property doesn’t give you the
Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it. Or you might even …
In this week’s roundup: “Add to home screen” has different meanings in Android, Chrome and Edge add some pop to focus rectangles on form inputs, and how third-party sites may be coming to a modal near you.…
The :focus-visible pseudo-class (also known as the “Focus-Indicated” pseudo-class) is a native CSS way to style elements that:
:focus-visible is used similarly to :focus: to …
Like Eric Bailey says, if it’s interactive, it needs a focus style. Perhaps your best bet? Don’t remove the dang outlines that focusable elements have by default. If you’re going to rock a button { outline: 0; }, …
Patrick H. Lauke covers the future CSS pseudo class :focus-visible. We’re in the early days of browser support, but it aims to solve an awkward situation:
…… focus styles can often be undesirable when they are applied as a
Not everyone uses a mouse to browse the internet. If you’re reading this post on a smartphone, this is obvious! What’s also worth pointing out is that there are other forms of input that people use to get things done. …
Say we have a <div></div>.
We only want this div to be visible when it’s hovered, so:
div:hover {
opacity: 1;
}We need focus styles as well, for accessibility, so:
div:hover,
div:focus {
opacity: 1;
}But div’s …
David Gilbertson:
Removing the focus outline is like removing the wheelchair ramp from a school because it doesn’t fit in with the aesthetic.
So David shows how you can remove it unless you detect that the user is tabbing, then …
Last month, Heather Migliorisi looked at the accessibility of Smooth Scrolling. In order to do smooth scrolling, you:
