{
  "id": 4187257,
  "title": "The outline: none Debate Has Been Over Since 2020",
  "url": "https://urgent.news/2026/08/29/the-outline-none-debate-has-been-over-since-2020",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-29T12:32:08.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/parsajiravand/the-outline-none-debate-has-been-over-since-2020-jli"
  },
  "original_language": "en",
  "account": "The issue of invisible focus outlines on buttons has been a long-standing problem in web design. A design review once flagged a chunky blue ring that appeared around a button each time it was clicked, deeming it \"broken\". After a few weeks, an accessibility audit revealed that keyboard users couldn't determine which element had focus, rendering the clean-looking button indistinguishable from other pixels on the screen. This lack of an outline was a WCAG 2.4.7 success criterion failure. The instinct was to either remove the ring or make it conditional for keyboard users. However, the correct solution was to use the :focus-visible pseudo-class, which exposes to CSS whether a focus event originated from a keyboard or a pointer. This allowed for a clean and accessible button design that works in every modern browser.",
  "summary": "A design review flags it every time: a button gets clicked, and a chunky blue ring slaps itself around the edge for half a second. \"Can we remove that? It looks broken.\" The engineer knows the one-line fix. * :focus { outline : none ; } Ship it. The review passes. The button looks clean in every screenshot, in every browser, on every click. Three weeks later an accessibility audit comes back with…",
  "key_points": [
    "Invisible focus outlines on buttons have been a long-standing web design problem.",
    "WCAG 2.4.7 success criterion failure due to lack of focus indication for keyboard users.",
    ":focus-visible pseudo-class solution for clean, accessible button design in modern browsers."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}