Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
focus

16 Articles
{
,

}
Direct link to the article How We Improved the Accessibility of Our Single Page App Menu
:focus-within accessibility focus menu navigation

How We Improved the Accessibility of Our Single Page App Menu

I recently started working on a Progressive Web App (PWA) for a client with my team. We’re using React with client-side routing via React Router, and one of the first elements that we made was the main menu. Menus …

Avatar of Luke Denton
Luke Denton on Feb 25, 2021
Direct link to the article Beautiful accessibility with Floating Focus
accessibility focus

Beautiful accessibility with Floating Focus

Direct Link

Imagine if your :focus styles animated from element to element as you tab through a site. Like the focus ring up and flew across the page to the next element. The spirit of it is similar to smooth scrolling: it’s …

Avatar of Chris Coyier
Shared by Chris Coyier on Feb 15, 2021
Direct link to the article Focus management and inert
accessibility focus inert

Focus management and inert

Many forms of assistive technology use keyboard navigation to understand and take action on screen content. One way of navigating is via the Tab key. You may already be familiar with this way of navigating if you use it to …

Avatar of Eric Bailey
Eric Bailey on Oct 19, 2020 (Updated on Feb 8, 2021)
Direct link to the article The :focus-visible Trick
:focus-visible focus outline

The :focus-visible Trick

Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element.

But if you use :focus alone for this, it has a side effect that …

Avatar of Chris Coyier
Chris Coyier on Oct 16, 2020
Direct link to the article Using a brightness() filter to generically highlight content
buttons filter focus hover

Using a brightness() filter to generically highlight content

Direct Link

Rick Strahl:

I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients, and opacity to effectively ‘highlight’ a control. All that works of

…
Avatar of Chris Coyier
Shared by Chris Coyier on Sep 11, 2020
Direct link to the article Copy the Browser’s Native Focus Styles
focus outline

Copy the Browser’s Native Focus Styles

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 …

Avatar of Chris Coyier
Chris Coyier on Aug 28, 2020
Direct link to the article Quick Tips for High Contrast Mode
accessibility focus high-contrast

Quick Tips for High Contrast Mode

Direct Link

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

…
Avatar of Chris Coyier
Shared by Chris Coyier on Jun 26, 2020
Direct link to the article Having a Little Fun With Custom Focus Styles
accessibility focus outline outline-offset

Having a Little Fun With Custom 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 …

Avatar of Lari Maza
Lari Maza on Dec 2, 2019
Direct link to the article Weekly Platform News: WebAPK Limited to Chrome, Discernible Focus Rectangles, Modal Window API
android edge firefox focus modal

Weekly Platform News: WebAPK Limited to Chrome, Discernible Focus Rectangles, Modal Window API

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.…

Avatar of Šime Vidas
Šime Vidas on Oct 24, 2019
Direct link to the article :focus-visible
:focus-visible focus

:focus-visible

The :focus-visible pseudo-class (also known as the “Focus-Indicated” pseudo-class) is a native CSS way to style elements that:

  1. Are in focus
  2. Need a visible indicator to show focus (more on this later)

:focus-visible is used similarly to :focus: to …

Avatar of Andy Adams
Andy Adams on Jan 11, 2019 (Updated on Feb 10, 2021)
Direct link to the article Keyboard-Only Focus Styles
:focus-visible accessibility focus

Keyboard-Only 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; }, …

Avatar of Chris Coyier
Chris Coyier on Nov 14, 2018
  • 1
  • 2
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top