:focus-visible
==============

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
La pseudo-clase **`:focus-visible`** se aplica mientras un elemento coincide con la pseudo-clase `:focus` y el UA (Agente de Usuario (en-US)) determina mediante heurística que el foco debe hacerse evidente en el elemento. (Muchos navegdores muestras un "anillo de enfoque" por defecto en este caso.

Este selector es útil para proporcionar un indicador de enfoque diferente basado en la modalidad de entrada del usuario (ratón vs teclado).

Nótese que Firefox soporta una funcionalidad similar a través de una pseudo-clase prefijada — `:-moz-focusring`.

Sintaxis
--------

Error: could not find syntax for this itemEjemplos
--------

### Ejemplos básicos

En este ejemplo, el selector `:focus-visible` usa el comportamiento del UA para deteminar cuándo emparejar. Compara lo que sucede cuando haces clic en los diferentes controles con un ratón con lo que sucede cuando los atraviesas con el teclado. Note la diferencia de comportamiento con respecto a los elementos con estilo `:focus`.


```html
<input value="Default styles" /><br />
<button>Default styles</button><br />
<input class="focus-only" value=":focus only" /><br />
<button class="focus-only">:focus only</button><br />
<input class="focus-visible-only" value=":focus-visible only" /><br />
<button class="focus-visible-only">:focus-visible only</button>
```



```css
input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}
```

### Mostrando selectivamente el indicador de enfoque

Un control personalizado, como un botón de elemento personalizado, puede utilizar `:focus-visible` para aplicar selectivamente un indicador de enfoque sólo en el enfoque del teclado. Esto coincide con el comportamiento de enfoque nativo para controles como `<button>`.


```html
<custom-button tabindex="0" role="button">Click Me</custom-button>
```


```
custom-button {
  display: inline-block;
  margin: 10px;
}

custom-button:focus {
  /* Provide a fallback style for browsers
     that don't support :focus-visible */
  outline: none;
  background: lightgrey;
}

custom-button:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
     that do support :focus-visible */
  background: transparent;
}

custom-button:focus-visible {
  /* Draw a very noticeable focus style for
     keyboard-focus on browsers that do support
     :focus-visible */
  outline: 4px dashed darkorange;
  background: transparent;
}
```

Polyfill
--------

You can polyfill `:focus-visible` usando focus-visible.js.

Problemas de accesibilidad
--------------------------

### Baja visión

Asegúrate de que el indicador de enfoque visual pueda ser visto por personas con baja visión. Esto también beneficiará a cualquier persona que utilice una pantalla en un espacio brillantemente iluminado (como el exterior en el sol). WCAG 2.1 SC 1.4.11 Contraste Sin Texto requiere que el indicador de enfoque visual sea al menos 3 a 1.

* Indicadores de enfoque visual accesibles: Déle a su sitio un poco de enfoque! Consejos para diseñar indicadores de enfoque útiles y utilizables
### Cognición

Puede que no sea obvio por qué el indicador de enfoque aparece y desaparece si una persona está utilizando formas mixtas de entrada. Para los usuarios con preocupaciones cognitivas, o que tienen menos conocimientos tecnológicos, esta falta de comportamiento consistente para los elementos interactivos puede ser confusa.

Especificaciones
----------------

| Specification |
| --- |
| Selectors Level 4 # the-focus-visible-pseudo |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Vea también
-----------

* `:focus`
* `:focus-within`