Articles Tagged focus

Remy documented this the other day. Firefox supports a Highlight keyword and both Chrome and Safari support a -webkit-focus-ring-color keyword. So if you, for example, have removed focus from something and want to put it back in the same style as the browser default, or want to apply a focus style to an element when it isn’t directly in focus itself, this can be useful.… Read article “Copy the Browser’s Native Focus Styles”

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 be looking to remove it yourself.

So you do a little research and find out that this is strongly discouraged, because the focus outline is there for a reason: it provides visual feedback for keyboard navigation (using the Tab … Read article “Having a Little Fun With Custom Focus Styles”

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; }, for example, then you’d better do a button:focus { /* something else very obvious visually */ }. I handled a ticket just today where a missing focus style was harming a user who relies on visual focus styles to … Read article “Keyboard-Only Focus Styles”

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. With these forms of input comes the need for focus styles.… Read article “Focusing on Focus Styles”

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 can’t be focused on their own, so we’ll need:

<div tabindex="0">
</div>

There is content in this div. Not just text, but links as well.

<div tabindex="0">
  <p>This little piggy went to market.</p>
  <a href="#market">Go to market</a>
</div>

This is … Read article “Keeping Parent Visible While Child in :focus”