:focus-visible Is Here

With Chromium 86 and now recently Firefox 85 supporting :focus-visible, it’s a good time to refer to this post by Matthias Ott: The :focus-visible pseudo-class lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator. You use :focus-visible …

How Discord Implemented App-Wide Keyboard Navigation

When working on creating a complete keyboard navigation experience for Discord, using styling with :focus and outline, the folks at Discord ran into issues where the outline would not match the shape of actual element being rendered. Thinks like border-radius, overflow: hidden; on the container, padding got in the way. So they set out to …

Clicking Buttons: Inconsistent behavior across browsers

Great research by Zell Liew: I noticed browsers were inconsistent in how they handle a click on <button>. Some browsers choose to focus on the button. Some browsers don’t. In this article, I want to show you my test and findings. Then, I want to talk about a way to overcome these inconsistencies. Great to …

Indicating focus to improve accessibility

Great article by Hidde. It totally rhymes with my Building Better Forms™ by not taking away affordances post. It’s a common, but fairly easy-to-fix accessibility issue: lack of indicating focus. In this post I will explain what we mean by focus and show you how focus outlines make your site easier to use. Indicating focus …

Spectacle CodeSlide: Present code with style

Present code with style using spectacle. Awesome way to present code, and putting the focus of the reader where it needs to be. It also lets you jump to specific lines even if they’ve already been displayed before (because code tends to jump). import React from 'react'; import { Spectacle, Deck } from 'spectacle'; import …

We’re not ‘appy. Not ‘appy at all.

The British Government Digital Service (a new team within Cabinet Office, which in its turn supports the Prime Minister and Deputy Prime Minister) is totally getting it: Stand-alone mobile apps will only be considered once the core web service works well on mobile devices, and if specifically agreed with the Cabinet Office. Above that: Apps …