[{"data":1,"prerenderedAt":138},["ShallowReactive",2],{"post-focus-states-people-notice-it":3,"related-posts-focus-states-people-notice-it":102,"related-categories-focus-states-people-notice-it":127},{"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__":101},"blog\u002Fit\u002Fblog\u002Ffocus-states-people-notice.md","Progettare stati di focus che le persone notano davvero","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},"lanello-che-tutti-rimuovono","L'anello che tutti rimuovono",[18,19,20],"p",{},"Se ti è mai capitato di premere Tab su un sito e perdere il punto in cui ti trovavi, hai incontrato il bug di accessibilità più comune del web. Qualcuno ha rimosso il contorno di focus perché era brutto, e niente lo ha sostituito.",[18,22,23],{},"È una scelta comprensibile. I contorni predefiniti del browser raramente si adattano al design. Ma per chi naviga con la tastiera, l'indicatore di focus è il cursore. Senza di esso, la pagina diventa di fatto cieca.",[13,25,27],{"id":26},"visibile-non-invadente","Visibile, non invadente",[18,29,30,31,35,36,39],{},"La distinzione importante è tra uno stato di focus ",[32,33,34],"strong",{},"visibile"," e uno ",[32,37,38],{},"che distrae",". L'obiettivo è un anello impossibile da non vedere quando lo cerchi, e quasi invisibile quando non ti serve.",[18,41,42],{},"In UI Vintage ogni elemento interattivo usa la stessa ricetta: un anello di tre pixel nel colore primario con opacità parziale, disegnato all'esterno dell'elemento così da non spostare mai il layout.",[44,45],"blog-table",{":headers":46,":highlightCol":47,":rows":48},"[\"Approccio\",\"Visibile da tastiera\",\"Disturba chi usa il mouse\",\"Resiste agli stili personalizzati\"]","1","[[\"Contorno predefinito del browser\",\"Sì\",\"A volte\",\"Spesso si perde\"],[\"outline: none\",\"No\",\"No\",\"Non applicabile\"],[\"Solo cambio di colore\",\"A malapena\",\"No\",\"Sì\"],[\"Anello su :focus-visible\",\"Sì\",\"No\",\"Sì\"]]",[50,51,53],"h3",{"id":52},"il-contrasto-conta-ancora","Il contrasto conta ancora",[18,55,56],{},"Sembra semplice, ma un anello è utile solo se si distingue sia dall'elemento sia dalla pagina dietro. Un anello arancione su un pulsante arancione sparisce. La soluzione è un piccolo spazio tra l'elemento e l'anello, di solito nel colore di sfondo della pagina, così l'anello ha sempre qualcosa con cui contrastare.",[13,58,60],{"id":59},"provalo-nel-modo-più-noioso","Provalo nel modo più noioso",[18,62,63],{},"Non esistono scorciatoie. Scollega il mouse, o semplicemente smetti di toccarlo, e percorri una pagina con Tab, Maiusc+Tab, Invio e i tasti freccia. Se in qualsiasi momento non capisci dove ti trovi, non lo capirà nemmeno chi legge.",[18,65,66],{},"Il punto non è aggiungere decorazioni. È fare in modo che la pagina risponda in ogni momento a una domanda: dove mi trovo? Un buono stato di focus risponde con discrezione, e di solito il design ne guadagna.",{"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","Accessibilità","2026-07-24T00:00:00Z","2026-07-21T00:00:00Z","Chi naviga con la tastiera si affida all'anello di focus per sapere dove si trova. Molti design lo nascondono o lo rendono sbiadito. Poche regole lo rendono visibile ed elegante.","md",[84,87],{"question":85,"answer":86},"Perché usare focus-visible invece di focus?","Il selettore :focus-visible si attiva solo quando il browser ritiene utile un indicatore visibile, di solito durante la navigazione da tastiera. Chi usa il mouse non vede un anello dopo ogni clic, chi usa la tastiera lo vede sempre.",{"question":88,"answer":89},"Basta un cambio di colore per mostrare il focus?","Di solito no. Un semplice cambio di colore può sfuggire a chi ha una vista ridotta o non distingue bene i colori. Un anello o un contorno che cambia la forma intorno all'elemento è molto più facile da individuare.","\u002Fimages\u002Fblog\u002Ffocus-states-people-notice\u002Fcover.jpg","it",{},true,"\u002Fit\u002Fblog\u002Ffocus-states-people-notice",{"title":5,"description":81},"it\u002Fblog\u002Ffocus-states-people-notice",[98,99,100],"Accessibility","CSS","Design Systems","RK0nXlDDjAbDGR1-k5yl8Lwo-dl0zf_ynSm0nafKSPg",[103,109,115,121],{"title":104,"description":105,"image":106,"categoryText":107,"path":108},"Pubblicare una libreria Vue senza passaggio di build","UI Vintage pubblica il proprio codice sorgente e lascia che ogni app Nuxt lo compili. Questa scelta elimina un'intera categoria di problemi e ne introduce un paio di nuovi.","\u002Fimages\u002Fblog\u002Fsource-published-packages\u002Fcover.jpg","Sviluppo","\u002Fit\u002Fblog\u002Fsource-published-packages",{"title":110,"description":111,"image":112,"categoryText":113,"path":114},"Pubblicare la migrazione del blog nella libreria","Una sintesi pratica di ciò che è cambiato quando l'implementazione originale del blog è stata spostata in una libreria di componenti compatibile con Nuxt.","\u002Fimages\u002Fblog\u002Fshipping-the-blog-migration\u002Fcover.jpg","Aggiornamenti prodotto","\u002Fit\u002Fblog\u002Fshipping-the-blog-migration",{"title":116,"description":117,"image":118,"categoryText":119,"path":120},"Perché le animazioni a molla sembrano più veloci di quanto siano","Una molla che supera di poco il bersaglio può durare più di una semplice dissolvenza e sembrare comunque più rapida. Ecco perché, e dove il trucco smette di funzionare.","\u002Fimages\u002Fblog\u002Fwhy-spring-animations-feel-faster\u002Fcover.jpg","Motion design","\u002Fit\u002Fblog\u002Fwhy-spring-animations-feel-faster",{"title":122,"description":123,"image":124,"categoryText":125,"path":126},"Progettare un sistema editoriale riutilizzabile","Come abbiamo trasformato un'interfaccia blog usata una sola volta in una superficie editoriale riutilizzabile, capace di mantenere la propria identità anche fuori dal prodotto originale.","\u002Fimages\u002Fblog\u002Fdesigning-a-reusable-editorial-system\u002Fcover.jpg","Sistemi di design","\u002Fit\u002Fblog\u002Fdesigning-a-reusable-editorial-system",[128,131,134,136],{"name":119,"slug":129,"count":130,"image":118},"motion-design",1,{"name":125,"slug":132,"count":69,"image":133},"design-systems","\u002Fimages\u002Fblog\u002Fdark-mode-is-a-second-design\u002Fcover.jpg",{"name":107,"slug":135,"count":130,"image":106},"engineering",{"name":113,"slug":137,"count":130,"image":112},"product-updates",1792259223159]