--- title: "Indicating focus to improve accessibility" url: https://daily.dev/posts/indicating-focus-to-improve-accessibility-vqucvgpmo source_url: https://hidde.blog/indicating-focus-to-improve-accessibility type: article source: "Hidde de Vries — hidde.blog" published: 2026-05-31T07:48:41.760Z updated: 2026-05-31T09:35:47.663Z tags: ["css", "accessibility"] reading_time: 8 upvotes: 0 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Indicating focus to improve accessibility **[Hidde de Vries — hidde.blog](https://daily.dev/sources/hiddedevries)** · 8 min read · 0 upvotes · 0 comments ## Summary Focus indicators are essential for keyboard and assistive technology users, yet many websites remove them with `outline: none`. This guide explains what focus is, who benefits from visible focus styles, and how to design good focus indicators using CSS. It covers the `:focus` vs `:focus-visible` pseudo-classes, contrast requirements per WCAG 2.1, proper use of `tabindex`, and how to test keyboard accessibility across browsers and platforms. The post argues that focus styles should never be removed and recommends designing custom, on-brand focus outlines rather than relying solely on browser defaults. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#css](https://daily.dev/tags/css), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/indicating-focus-to-improve-accessibility-vqucvgpmo)