{"id":3480,"date":"2025-08-08T08:00:47","date_gmt":"2025-08-08T11:00:47","guid":{"rendered":"https:\/\/aleare.com.ar\/blog\/?p=3480"},"modified":"2025-08-22T15:26:42","modified_gmt":"2025-08-22T18:26:42","slug":"no-pierdas-el-foco-guia-practica-de-focus-visible","status":"publish","type":"post","link":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/","title":{"rendered":"No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible"},"content":{"rendered":"<div class='booster-block booster-read-block'><\/div><p>Damos por sentado que todo el mundo usa un mouse o un trackpad o similar para mover el puntero por toda la pantalla y hacer click en los links. Pero, \u00bfqu\u00e9 pasa cuando el puntero no est\u00e1 presente? Tanto si estamos en un formulario o en un men\u00fa de navegaci\u00f3n, es imprescindible que el usuario sepa en qu\u00e9 elemento est\u00e1 parado (o haciendo foco, para ser precisos).<\/p>\n<p>Ah\u00ed es donde entra a la cancha la pseudoclase CSS <strong>:focus-visible<\/strong> , aplaudida por algunos y abucheada por otros. En este post vamos a repasar su utilidad para la accesibilidad y el UX de nuestros sitios web.<\/p>\n<p>Vamos a ello:<br \/>\n<span style=\"color: #ffffff;\">.<\/span><\/p>\n<h3>\u00bfQu\u00e9 es :focus-visible?<\/h3>\n<p><strong>:focus-visible<\/strong> es una pseudoclase de CSS que se activa cuando un elemento recibe foco, entonces el navegador determina que debe mostrarse un marcador de ese foco, en su cl\u00e1sica y reconocida forma de borde con puntitos.<\/p><div class=\"alear-contenido_2 alear-entity-placement\" id=\"alear-3177406406\"><div id=\"alear-3512936058\" style=\"margin-top: 15px;margin-bottom: 15px;\"><a href='https:\/\/collaborator.es?ref=x44a3s' title='\u0421ollaborator' target='_blank'><img src='https:\/\/collaborator.pro\/images\/referral\/promo\/es\/2.png' width='728' height='90' alt='\u0421ollaborator'\/><\/a><\/div><\/div>\n<p>A diferencia de <strong>:focus<\/strong>, que siempre resalta el elemento (incluso al hacer click con el mouse), :focus-visible solo aplica estilos cuando el foco proviene, por ejemplo, de la navegaci\u00f3n por teclado o de ayudas de accesibilidad.<\/p>\n<p>Su utilidad para el UI\/UX es:<\/p>\n<ul>\n<li><strong>Accesibilidad mejorada:<\/strong> Al combinar :focus-visible con :focus, nos aseguramos que los usuarios que navegan a trav\u00e9s del teclado (o lectores de pantalla) sepan en todo momento d\u00f3nde est\u00e1 el foco y puedan moverse entre las opciones.<\/li>\n<li><strong>Est\u00e9tica limpia:<\/strong> Evitamos mostrar ese contorno innecesario cuando el usuario hace click con el mouse, manteniendo el dise\u00f1o m\u00e1s limpio y profesional.<\/li>\n<li><strong>Consistencia entre navegadores:<\/strong> La especificaci\u00f3n moderna est\u00e1 soportada en la mayor\u00eda de los navegadores recientes, garantizando que la experiencia sea uniforme.<\/li>\n<\/ul>\n<p>Dec\u00eda m\u00e1s arriba que es un efecto que ha sido abucheado por muchos (y me incluyo) porque al dibujar ese borde de l\u00ednea punteada en los links, no siempre queda bonito. Podemos, con un par de l\u00edneas, evitar que aparezca y que quede todo bien a la vista. Pero a costa de sacrificar accesibilidad.<\/p>\n<p><span style=\"color: #ffffff;\">.<\/span><\/p>\n<h3>Fallback para navegadores antiguos<\/h3>\n<p>Algunos navegadores modernos ya interpretan de qu\u00e9 va :focus-visible de forma nativa. Pero otros no lo entienden, por lo que si aplicaste :focus-visible al CSS no funcionar\u00e1. Pero don&#8217;t panic, porque hay una soluci\u00f3n pr\u00e1ctica: usar un <strong>polyfill<\/strong>. Es un un peque\u00f1o script que a\u00f1ade via JavaScript una clase llamada <em>focus-visible<\/em> (valga la redundancia) cuando corresponde. Por ejemplo, si el usuario navega con teclado u otros dispositivos de teclas, como los controles de los SmartTV.<\/p>\n<p>Estos son los 3 pasos a seguir para implementarlo:<\/p>\n<p><strong>1- Incluir el polyfill<\/strong><br \/>\nDescarg\u00e1 la librer\u00eda <em>focus-visible<\/em> del <a href=\"https:\/\/github.com\/WICG\/focus-visible\" target=\"_blank\" rel=\"noopener\"><strong>WICG<\/strong><\/a> o linkeala desde un CDN. Agreg\u00e1 dentro de \u00ab&lt;head&gt;\u00bb<\/p>\n<p><strong>2- Escribir el CSS compatible\u00a0<\/strong><br \/>\nEscrib\u00ed tus reglas para la pseudoclase y para la clase que el script va a agregar:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3495 size-full\" src=\"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-02.png\" alt=\"c\u00f3mo utilizar la pseudoclase :focus-visible\" width=\"1564\" height=\"708\" srcset=\"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-02.png 1564w, https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-02-300x136.png 300w, https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-02-1024x464.png 1024w, https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-02-768x348.png 768w, https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-02-1536x695.png 1536w\" sizes=\"auto, (max-width: 1564px) 100vw, 1564px\" \/><\/p>\n<p><strong>3- Oculta el borde cuando el enfoque viene del mouse<\/strong><br \/>\nPara evitar mostrar el borde de puntitos al hacer click con el mouse pero que se haga visible si se usa el teclado, agregamos esto:<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3505 size-full\" src=\"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-03.png\" alt=\"C\u00f3mo utilizar la pseudoclase :focus-visible - Gu\u00eda Pr\u00e1ctica -- El Blog de Aleare Design\" width=\"1294\" height=\"446\" srcset=\"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-03.png 1294w, https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-03-300x103.png 300w, https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-03-1024x353.png 1024w, https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/focus-visible-03-768x265.png 768w\" sizes=\"auto, (max-width: 1294px) 100vw, 1294px\" \/><\/p>\n<p>As\u00ed, al hacer clic no ver\u00e1s el contorno punteado; pero si naveg\u00e1s con el TAB del teclado s\u00ed se mostrar\u00e1.<\/p>\n<p>El polyfill detecta cu\u00e1ndo el foco debe hacerse visible (p. ej. por teclado) y agrega la clase <strong>.focus-visible<\/strong>. Ahora s\u00ed, escrib\u00ed tu CSS usando :focus-visible para los navegadores que lo soportan, y us\u00e1 la clase .focus-visible como respaldo.<\/p>\n<p>Si prefer\u00eds no agregar scripts, pod\u00e9s quedarte con <strong>:focus<\/strong> as\u00ed tal cual (funciona en todos) pero \u00a1cuidado al ocultar indicadores visuales! La accesibilidad es lo primero.<\/p>\n<p><span style=\"color: #ffffff;\">2.<\/span><\/p>\n<h3>Consejos de uso<\/h3>\n<p>\u2705 Combinalo con :focus: As\u00ed te asegur\u00e1s de que, en navegadores sin soporte, ning\u00fan elemento quede sin indicador de foco.<\/p>\n<p>\u2705 Personaliz\u00e1 tu indicador: Lejos del cl\u00e1sico <em>outline<\/em>, prob\u00e1 sombras internas, bordes redondeados o cambios de fondo para darle un estilo \u00fanico.<\/p>\n<p>\u2705 Aplic\u00e1 en formularios complejos: Inputs de texto, selectores y botones ganan claridad al usar :focus-visible, especialmente en aplicaciones web de varios pasos.<\/p>\n<p><span style=\"color: #ffffff;\">.<\/span><br \/>\nLa pseudoclase :focus-visible es una herramienta poderosa para mejorar la accesibilidad y experiencia de usuario. Incorporarla en las hojas de estilo permite ofrecer una navegaci\u00f3n clara para todos, sin sacrificar est\u00e9tica visual.<br \/>\n<span style=\"color: #ffffff;\">.<\/span><\/p>\n<div style=\"background-color: mistyrose; padding: 1em; border-radius: 5px; display: block; margin: 2em 0 2.5em;\"><em>Te puede interesar:<\/em><br \/>\n<em><strong><a href=\"\u201c\/blog\/como-utilizar-las-listas-de-definicion-dl\/\u201c\">C\u00f3mo utilizar las Listas de Definici\u00f3n (DL)<\/a><\/strong><\/em><\/div>\n<p>Para finalizar, les dejo algunos links de referencia con ejemplos:<\/p>\n<p>\ud83d\udc49 Create Better Focus Styles with ::focus-visible (by Envato Tuts+)<br \/>\n<iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Create Better Focus Styles with ::focus-visible\" src=\"https:\/\/codepen.io\/tutsplus\/embed\/preview\/WNpPBNN?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=WNpPBNN#?secret=4TfZHao0df\" data-secret=\"4TfZHao0df\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>\ud83d\udc49 Developer Mozilla resources \u2013 :focus-visible<br \/>\nhttps:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:focus-visible<\/p>\n<p>\ud83d\udc49 Enfoques de estilo (by web.dev)<br \/>\nhttps:\/\/web.dev\/articles\/style-focus?hl=es-419<\/p>\n<p>.<\/p>\n<div class=\"alear-despues-del-contenido-2 alear-entity-placement\" id=\"alear-1299740280\"><div id=\"alear-2221467265\" style=\"margin-top: 15px;margin-bottom: 15px;\"><a href='https:\/\/collaborator.es?ref=x44a3s' title='\u0421ollaborator' target='_blank'><img src='https:\/\/collaborator.pro\/images\/referral\/promo\/es\/2.png' width='728' height='90' alt='\u0421ollaborator'\/><\/a><\/div><\/div><div id=\"alear-2720073832\" class=\"alear-despues-del-contenido alear-entity-placement\" style=\"margin-top: 30px;margin-bottom: 30px;\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5464693981010234\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5464693981010234\" \ndata-ad-slot=\"2927777050\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Damos por sentado que todo el mundo usa un mouse o un trackpad o similar para mover el puntero por toda la pantalla y hacer click en los links. Pero, \u00bfqu\u00e9 pasa cuando el puntero no est\u00e1 presente? Tanto si estamos en un formulario o en un men\u00fa de navegaci\u00f3n, es imprescindible que el usuario [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3507,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63,29],"tags":[276,128,292,393],"class_list":["post-3480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-desarrollo-web","tag-css","tag-desarrollo-web","tag-programacion","tag-ux"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible - El blog de Aleare Design<\/title>\n<meta name=\"description\" content=\"La pseudoclase CSS :focus-visible , amada y abucheada por igual, tiene gran importancia en la accesibilidad y el UX de nuestros sitios web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible - El blog de Aleare Design\" \/>\n<meta property=\"og:description\" content=\"La pseudoclase CSS :focus-visible , amada y abucheada por igual, tiene gran importancia en la accesibilidad y el UX de nuestros sitios web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/\" \/>\n<meta property=\"og:site_name\" content=\"El blog de Aleare Design\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/aleare.design\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-08T11:00:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-22T18:26:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/pseudoclase-focus-vislible-CSS-guia-practica-dev-el-Blog-de-Aleare-Design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alejandra Arellano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@alearedesign\" \/>\n<meta name=\"twitter:site\" content=\"@alearedesign\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alejandra Arellano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/\"},\"author\":{\"name\":\"Alejandra Arellano\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/27a45eff37314009fd06aa7775650f0e\"},\"headline\":\"No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible\",\"datePublished\":\"2025-08-08T11:00:47+00:00\",\"dateModified\":\"2025-08-22T18:26:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/\"},\"wordCount\":770,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/pseudoclase-focus-vislible-CSS-guia-practica-dev-el-Blog-de-Aleare-Design.jpg\",\"keywords\":[\"CSS\",\"Desarrollo web\",\"Programaci\u00f3n\",\"UX\"],\"articleSection\":[\"CSS\",\"Desarrollo Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/\",\"name\":\"No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible - El blog de Aleare Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/pseudoclase-focus-vislible-CSS-guia-practica-dev-el-Blog-de-Aleare-Design.jpg\",\"datePublished\":\"2025-08-08T11:00:47+00:00\",\"dateModified\":\"2025-08-22T18:26:42+00:00\",\"description\":\"La pseudoclase CSS :focus-visible , amada y abucheada por igual, tiene gran importancia en la accesibilidad y el UX de nuestros sitios web.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/#primaryimage\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/pseudoclase-focus-vislible-CSS-guia-practica-dev-el-Blog-de-Aleare-Design.jpg\",\"contentUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/pseudoclase-focus-vislible-CSS-guia-practica-dev-el-Blog-de-Aleare-Design.jpg\",\"width\":1400,\"height\":640,\"caption\":\"C\u00f3mo utilizar la pseudoclase :focus-visible - Gu\u00eda Pr\u00e1ctica -- El Blog de Aleare Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/no-pierdas-el-foco-guia-practica-de-focus-visible\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/\",\"name\":\"El Blog de Aleare Design\",\"description\":\"dise\u00f1o gr\u00e1fico | dise\u00f1o web | programaci\u00f3n | ecommerce | email marketing | redes sociales\",\"publisher\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#organization\"},\"alternateName\":\"El Blog de Aleare Design\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#organization\",\"name\":\"Aleare Design Estudio Creativo\",\"alternateName\":\"Aleare Design\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/aleare-design-estudio-creativo.jpg\",\"contentUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/aleare-design-estudio-creativo.jpg\",\"width\":840,\"height\":600,\"caption\":\"Aleare Design Estudio Creativo\"},\"image\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/facebook.com\\\/aleare.design\",\"https:\\\/\\\/x.com\\\/alearedesign\",\"https:\\\/\\\/instagram.com\\\/aleare.design\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/27a45eff37314009fd06aa7775650f0e\",\"name\":\"Alejandra Arellano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Alejandra Arellano\"},\"description\":\"\u00a1Hola Mundo! Soy dise\u00f1adora gr\u00e1fica y web, programadora HTML\\\/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicaci\u00f3n Digital.\",\"sameAs\":[\"https:\\\/\\\/aleare.com.ar\\\/\"],\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/author\\\/aleare\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible - El blog de Aleare Design","description":"La pseudoclase CSS :focus-visible , amada y abucheada por igual, tiene gran importancia en la accesibilidad y el UX de nuestros sitios web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/","og_locale":"es_ES","og_type":"article","og_title":"No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible - El blog de Aleare Design","og_description":"La pseudoclase CSS :focus-visible , amada y abucheada por igual, tiene gran importancia en la accesibilidad y el UX de nuestros sitios web.","og_url":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/","og_site_name":"El blog de Aleare Design","article_publisher":"https:\/\/facebook.com\/aleare.design","article_published_time":"2025-08-08T11:00:47+00:00","article_modified_time":"2025-08-22T18:26:42+00:00","og_image":[{"width":1400,"height":640,"url":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/pseudoclase-focus-vislible-CSS-guia-practica-dev-el-Blog-de-Aleare-Design.jpg","type":"image\/jpeg"}],"author":"Alejandra Arellano","twitter_card":"summary_large_image","twitter_creator":"@alearedesign","twitter_site":"@alearedesign","twitter_misc":{"Escrito por":"Alejandra Arellano","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/#article","isPartOf":{"@id":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/"},"author":{"name":"Alejandra Arellano","@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/person\/27a45eff37314009fd06aa7775650f0e"},"headline":"No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible","datePublished":"2025-08-08T11:00:47+00:00","dateModified":"2025-08-22T18:26:42+00:00","mainEntityOfPage":{"@id":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/"},"wordCount":770,"commentCount":0,"publisher":{"@id":"https:\/\/aleare.com.ar\/blog\/#organization"},"image":{"@id":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/#primaryimage"},"thumbnailUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/pseudoclase-focus-vislible-CSS-guia-practica-dev-el-Blog-de-Aleare-Design.jpg","keywords":["CSS","Desarrollo web","Programaci\u00f3n","UX"],"articleSection":["CSS","Desarrollo Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/","url":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/","name":"No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible - El blog de Aleare Design","isPartOf":{"@id":"https:\/\/aleare.com.ar\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/#primaryimage"},"image":{"@id":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/#primaryimage"},"thumbnailUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/pseudoclase-focus-vislible-CSS-guia-practica-dev-el-Blog-de-Aleare-Design.jpg","datePublished":"2025-08-08T11:00:47+00:00","dateModified":"2025-08-22T18:26:42+00:00","description":"La pseudoclase CSS :focus-visible , amada y abucheada por igual, tiene gran importancia en la accesibilidad y el UX de nuestros sitios web.","breadcrumb":{"@id":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/#primaryimage","url":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/pseudoclase-focus-vislible-CSS-guia-practica-dev-el-Blog-de-Aleare-Design.jpg","contentUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2025\/08\/pseudoclase-focus-vislible-CSS-guia-practica-dev-el-Blog-de-Aleare-Design.jpg","width":1400,"height":640,"caption":"C\u00f3mo utilizar la pseudoclase :focus-visible - Gu\u00eda Pr\u00e1ctica -- El Blog de Aleare Design"},{"@type":"BreadcrumbList","@id":"https:\/\/aleare.com.ar\/blog\/no-pierdas-el-foco-guia-practica-de-focus-visible\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/aleare.com.ar\/blog\/"},{"@type":"ListItem","position":2,"name":"No pierdas el foco \u2013 Gu\u00eda pr\u00e1ctica de :focus-visible"}]},{"@type":"WebSite","@id":"https:\/\/aleare.com.ar\/blog\/#website","url":"https:\/\/aleare.com.ar\/blog\/","name":"El Blog de Aleare Design","description":"dise\u00f1o gr\u00e1fico | dise\u00f1o web | programaci\u00f3n | ecommerce | email marketing | redes sociales","publisher":{"@id":"https:\/\/aleare.com.ar\/blog\/#organization"},"alternateName":"El Blog de Aleare Design","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/aleare.com.ar\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/aleare.com.ar\/blog\/#organization","name":"Aleare Design Estudio Creativo","alternateName":"Aleare Design","url":"https:\/\/aleare.com.ar\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2021\/06\/aleare-design-estudio-creativo.jpg","contentUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2021\/06\/aleare-design-estudio-creativo.jpg","width":840,"height":600,"caption":"Aleare Design Estudio Creativo"},"image":{"@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/aleare.design","https:\/\/x.com\/alearedesign","https:\/\/instagram.com\/aleare.design"]},{"@type":"Person","@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/person\/27a45eff37314009fd06aa7775650f0e","name":"Alejandra Arellano","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g","caption":"Alejandra Arellano"},"description":"\u00a1Hola Mundo! Soy dise\u00f1adora gr\u00e1fica y web, programadora HTML\/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicaci\u00f3n Digital.","sameAs":["https:\/\/aleare.com.ar\/"],"url":"https:\/\/aleare.com.ar\/blog\/author\/aleare\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts\/3480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/comments?post=3480"}],"version-history":[{"count":1,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts\/3480\/revisions"}],"predecessor-version":[{"id":3508,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts\/3480\/revisions\/3508"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/media\/3507"}],"wp:attachment":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/media?parent=3480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/categories?post=3480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/tags?post=3480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}