Saltar al contenido

Módulo de mecánica · WCAG 2.4.11 · Nivel AAA

Enfoque visible

Proporciona un anillo de enfoque nítido y siempre visible en todos los elementos enfocables, con un contraste AAA.

Lo que hace

Función en una oración — y en tres oraciones

Muchos restablecimientos modernos de CSS eliminan el foco predeterminado del navegador ("outline: none"). Si el tema no proporciona un reemplazo, los usuarios de teclado no podrán ver su posición actual en la página. Criterio de eliminación durante las auditorías de WCAG.

El módulo aplica un anillo de contorno de 3 píxeles de grosor con contraste AAA (al menos 7:1 con respecto al fondo) a todos los elementos interactivos, independientemente del tema.

Así es como lo implementa el complemento.

Medidas técnicas

  • Contorno de 3 px + desplazamiento de 2 px — visualmente claro, sin alterar el diseño.
  • Cálculo de contraste por elemento: selecciona automáticamente el contorno oscuro sobre fondo claro y el contorno claro sobre fondo oscuro.
  • `:focus-visible` en lugar de `:focus` — Los clics del ratón no muestran un círculo (comportamiento moderno), el foco del teclado siempre lo muestra.
  • Elementos personalizados: `tabindex="0"` en divs / spans también obtienen el anillo.
  • Ajuste del radio del borde: El contorno sigue la forma redondeada (sin marco de bordes afilados alrededor de los botones redondos).
En el backend del plugin

Puedes encontrar estos ajustes en la pestaña del módulo.

  • Grosor del anillo (1–5 px, valor predeterminado 3)
  • Color del anillo: Automático / Color HEX fijo / Variable CSS
  • Desplazamiento (0–6 píxeles, valor predeterminado 2)
  • Animación al aparecer: desactivada / suave (respeta `prefers-reduced-motion`)
  • Selectores de excepción (CSS): Elementos sin anillo de anulación

Ruta en el administrador: WP-Admin → Accesibilidad → Módulos → Visible Focus

¿Cuándo necesitas el módulo?

Caso de uso

Un módulo obligatorio para cada página. WCAG 2.4.11 tiene nivel AAA, pero incluso 2.4.7 (enfoque visible) con nivel AA lo requiere.

Esto es particularmente crítico con temas que usan restablecimientos CSS agresivos o con botones personalizados a través de `

`.

Módulos relacionados

Eso encaja temáticamente.

  • Navegación con teclado

    WCAG 2.1.1

    Asegúrese de que todos los elementos interactivos sean accesibles sin usar el ratón: Tab, Enter, teclas de flecha, Esc.

  • Administrador de tabulación

    WCAG 2.4.3

    Repara el orden de tabulación, elimina los valores positivos de `tabindex` y corrige los saltos defectuosos.

  • Saltar enlaces y puntos de referencia

    WCAG 2.4.1

    Establece roles de referencia semánticos y enlaces de salto visibles para usuarios de teclado y lectores de pantalla.

¿Activar el módulo para su sitio?

En la consulta inicial de 15 minutos, aclararemos si el módulo es relevante para su tema y tipo de contenido, y cómo es la configuración.

Consulta inicial de 15 minutos
Ver todos los módulos