[{"data":1,"prerenderedAt":135},["ShallowReactive",2],{"post-focus-states-people-notice-en":3,"related-posts-focus-states-people-notice-en":101,"related-categories-focus-states-people-notice-en":125},{"id":4,"title":5,"author":6,"authorImageUrl":7,"authorUrl":8,"body":9,"categorySlug":77,"categoryText":78,"dateModified":79,"datePublished":80,"description":81,"extension":82,"faqs":83,"image":90,"language":91,"meta":92,"navigation":93,"path":94,"seo":95,"stem":96,"tags":97,"__hash__":100},"blog\u002Fblog\u002Ffocus-states-people-notice.md","Designing Focus States People Actually Notice","Bruma","\u002Fimages\u002Fauthors\u002Fbruma.jpg","https:\u002F\u002Fbrumaombra.com",{"type":10,"value":11,"toc":67},"minimark",[12,17,21,24,28,40,43,49,54,57,61,64],[13,14,16],"h2",{"id":15},"the-ring-that-everyone-removes","The ring that everyone removes",[18,19,20],"p",{},"If you have ever pressed Tab on a website and lost track of where you were, you have met the most common accessibility bug on the web. Someone removed the focus outline because it looked ugly, and nothing replaced it.",[18,22,23],{},"It is an understandable decision. Default browser outlines rarely match a design. But for people who navigate with a keyboard, the focus indicator is the cursor. Without it, the page is effectively blind.",[13,25,27],{"id":26},"visible-not-loud","Visible, not loud",[18,29,30,31,35,36,39],{},"The important distinction is between a focus state that is ",[32,33,34],"strong",{},"visible"," and one that is ",[32,37,38],{},"distracting",". The goal is a ring you can't miss when you are looking for it and barely notice when you are not.",[18,41,42],{},"In UI Vintage, every interactive element uses the same recipe: a three-pixel ring in the primary color at partial opacity, drawn outside the element so it never shifts the layout.",[44,45],"blog-table",{":headers":46,":highlightCol":47,":rows":48},"[\"Approach\",\"Visible to keyboard users\",\"Bothers mouse users\",\"Survives custom styles\"]","1","[[\"Browser default outline\",\"Yes\",\"Sometimes\",\"Often lost\"],[\"outline: none\",\"No\",\"No\",\"Not applicable\"],[\"Color change only\",\"Barely\",\"No\",\"Yes\"],[\"Ring on :focus-visible\",\"Yes\",\"No\",\"Yes\"]]",[50,51,53],"h3",{"id":52},"contrast-still-applies","Contrast still applies",[18,55,56],{},"That sounds simple, but a ring is only useful if it stands out from both the element and the page behind it. An orange ring on an orange button disappears. The fix is a thin gap between the element and the ring, usually the page background color, so the ring always has something to contrast against.",[13,58,60],{"id":59},"test-it-the-boring-way","Test it the boring way",[18,62,63],{},"There is no shortcut here. Unplug the mouse, or just stop touching it, and walk through a page with Tab, Shift+Tab, Enter, and the arrow keys. If you can't tell where you are at any point, a reader can't either.",[18,65,66],{},"The point is not to add decoration. It is to make sure the page answers one question at every moment: where am I? A good focus state answers it quietly, and the design usually looks better for it.",{"title":68,"searchDepth":69,"depth":69,"links":70},"",2,[71,72,76],{"id":15,"depth":69,"text":16},{"id":26,"depth":69,"text":27,"children":73},[74],{"id":52,"depth":75,"text":53},3,{"id":59,"depth":69,"text":60},"accessibility","Accessibility","2026-07-24T00:00:00Z","2026-07-21T00:00:00Z","Keyboard users rely on the focus ring to know where they are. Most designs hide it or make it faint. A few small rules make it both visible and good-looking.","md",[84,87],{"question":85,"answer":86},"Why use focus-visible instead of focus?","The :focus-visible selector only matches when the browser thinks a visible indicator helps, which usually means keyboard navigation. Mouse users don't see a ring after every click, and keyboard users always do.",{"question":88,"answer":89},"Is a color change enough to show focus?","Usually not. A color change alone can be missed by people with low vision or color blindness. A ring or outline that changes the shape around the element is much easier to spot.","\u002Fimages\u002Fblog\u002Ffocus-states-people-notice\u002Fcover.jpg","en",{},true,"\u002Fblog\u002Ffocus-states-people-notice",{"title":5,"description":81},"blog\u002Ffocus-states-people-notice",[78,98,99],"CSS","Design Systems","AXuvQSpPXMu0ql5dJ5V5f4jfg4FfXaHkwhSmWhL-FAw",[102,107,113,119],{"title":103,"description":104,"image":105,"categoryText":99,"path":106},"Dark Mode Is a Second Design, Not a Filter","Inverting colors gives you a dark theme that technically works and looks slightly wrong everywhere. Semantic tokens fix most of it. Shadows and accents need extra care.","\u002Fimages\u002Fblog\u002Fdark-mode-is-a-second-design\u002Fcover.jpg","\u002Fblog\u002Fdark-mode-is-a-second-design",{"title":108,"description":109,"image":110,"categoryText":111,"path":112},"Shipping the Blog Migration Into the Library","A practical summary of what changed once the original blog implementation was moved into a reusable Nuxt-friendly component library.","\u002Fimages\u002Fblog\u002Fshipping-the-blog-migration\u002Fcover.jpg","Product Updates","\u002Fblog\u002Fshipping-the-blog-migration",{"title":114,"description":115,"image":116,"categoryText":117,"path":118},"Shipping a Vue Library Without a Build Step","UI Vintage publishes its source and lets each Nuxt app compile it. That choice removes a whole class of problems, and adds a couple of new ones.","\u002Fimages\u002Fblog\u002Fsource-published-packages\u002Fcover.jpg","Engineering","\u002Fblog\u002Fsource-published-packages",{"title":120,"description":121,"image":122,"categoryText":123,"path":124},"Why Spring Animations Feel Faster Than They Are","A spring that overshoots slightly can take longer than a plain fade and still feel quicker. Here is why, and where the trick stops working.","\u002Fimages\u002Fblog\u002Fwhy-spring-animations-feel-faster\u002Fcover.jpg","Motion Design","\u002Fblog\u002Fwhy-spring-animations-feel-faster",[126,128,131,133],{"name":99,"slug":127,"count":69,"image":105},"design-systems",{"name":117,"slug":129,"count":130,"image":116},"engineering",1,{"name":111,"slug":132,"count":130,"image":110},"product-updates",{"name":123,"slug":134,"count":130,"image":122},"motion-design",1792259222199]