Muestra siempre dónde está el foco

Pulsas la tecla Tab – y ya no sabes dónde estás. Eso les pasa a las personas que usan un sitio web con el teclado. Aquí, en Miradorlago: navegación, botón, pie de página, formulario. Y en ninguna parte se ve dónde está el foco. El tema lo oculta, o cada elemento muestra algo distinto. Sin embargo, el criterio WCAG 2.4.7 exige un foco de teclado visible. Con Focus Outlines en EZZE WCAG Pro lo haces uniforme. En minutos.

Encuentras la función en el menú de WordPress, en EZZE WCAG Pro, en el grupo Optimización del sitio, en la pestaña Focus Outlines. Arriba está el interruptor principal: Activar Focus Outlines. Si está activado, tus estilos de foco se aplican en el sitio web público.

Debajo eliges uno de tres perfiles. El Foco estándar siempre está activo y se aplica a todos los elementos enfocables: enlaces, botones y todo lo que se alcanza con el teclado. El Foco alternativo crea un contraste con el estilo estándar, para las zonas que se ven distintas, por ejemplo un pie de página oscuro en una página clara, o al revés. Y los campos de formulario reciben, si quieres, su propio estilo. Los dos últimos los activas con «Usar perfil». Y cada una de estas tres Focus Outlines la personalizas por completo: método, línea, grosor, color, radio, distancia, por separado en cada perfil.

Empecemos con el Foco estándar. Para el método CSS, lo mejor es elegir Outline: normalmente es la más fiable y no cambia el tamaño del elemento. Luego ajustas el estilo de línea, el grosor y el color. Para Miradorlago usamos un azul intenso, tres píxeles, línea sólida. El radio de esquina y la distancia redondean el anillo. Cada cambio lo ves al instante a la derecha, en la vista previa en vivo.

El pie de página de Miradorlago se ve distinto: es oscuro. Un anillo azul apenas se distingue allí. Para eso existe el Foco alternativo. Activa el perfil, elige un anillo claro y despliega los selectores CSS. En el campo «Selectores para el estilo alternativo» ya hay, como ejemplo, enlaces y botones del pie de página, los candidatos típicos. Puedes añadir los selectores que quieras: escríbelos, pulsa coma o Intro, listo. Estos elementos los excluye automáticamente la Outline estándar. No mantienes nada por duplicado.

A veces un elemento no debe recibir ningún anillo, por ejemplo un elemento decorativo de un slider o el enlace del logotipo. Para eso existe el campo «Selectores excluidos». Pero ¿cómo encuentras el selector? Con el navegador. Haz clic, por ejemplo en el navegador Chrome, con el botón derecho sobre el elemento y elige «Inspeccionar». En el panel «Elements» aparece marcada la línea correspondiente. Aquí hay un elemento A, es decir, un enlace, con la clase site-logo. La clase se escribe con un punto delante: .site-logo. Con un ID se pone una almohadilla delante: #header-logo. Este selector lo introduces en el campo. Varios se separan con una coma. Si la clase también aparece en otro lugar, limítala con un ID de zona: #footer .btn.

También los campos de entrada reciben un estilo propio. Activa ahora el tercer perfil, los campos de formulario. Se aplica a campos de entrada, campos de selección y áreas de texto, es decir, input, select y textarea. El botón Enviar queda excluido a propósito.

Ahora haces clic en «Guardar ajustes». Aparece el mensaje: Ajustes guardados correctamente. De vuelta en Miradorlago, el anillo de foco recorre, Tab tras Tab, la navegación, «Ver habitaciones», el pie de página y el formulario de contacto. Visible en todas partes. Uniforme en todas partes.

Con esto, el foco de teclado de tu sitio web es visible, uniforme y está justo donde tú quieres. Comprueba el resultado tú mismo, a ser posible una vez: pulsa la tecla Tab y recorre la página. Quien se mueve con el teclado te lo agradecerá. Focus Outlines en EZZE WCAG Pro: Foco visible. Para todos.