Problemas con la accesibilidad en la web

Hola Carlos,

Efectivamente, en tu archivo functions.php sigue cargándose el código original del tema que incluye el código que compartiste, ese código desactiva el zum (user-scalable=0 y maximum-scale=1.0). Aunque añadiste un snippet con valores correctos, el navegador puede estar tomando el primero que encuentra y eso genera conflicto.

👉 Lo recomendable es eliminar o comentar esa función et_add_viewport_meta de tu tema hijo (o con un snippet que la desactive con remove_action).
Después de eso, deja solo tu snippet que nos compartes de primero:

function new_meta_viewport() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10">';
}
add_action( 'wp_head', 'new_meta_viewport', 1 );

Para comprobarlo, además de probar en el móvil, puedes usar la herramienta Lighthouse de Chrome (Auditoría de accesibilidad) y verificar que ya no aparece la advertencia. Con respecto al segundo punto lo que piden es que la navegación con el teclado (usando la tecla TAB) siga un orden lógico. Si quiers verificarlo una forma sencilla de hacerlo seria:

Abre la web en tu ordenador.

Pulsa la tecla TAB varias veces y observa cómo se van enfocando los elementos (botones, menús, enlaces).

Si notas que salta de forma “extraña” o poco predecible, revisa el orden de los elementos en el constructor de tu sitio.

Un saludo 🖐️ 

Hola,

He solucionado el primer problema de viewport, tal y como me comentaste. He analizado la web con Lighthouse y ya no aparece ese error, y he visto alguna cosilla más que también he solucionado, pero me falta el del orden del foco, le doy al tabulador y veo que hace dos saltos, pero no entiendo a dónde salta y por qué, cuál es el criterio que sigue el TAB.

Necesito ayuda para saber qué tengo que hacer para que el foco haga lo correcto, ¿cómo lo hago?

Gracias

Hola Carlos, 

Entiendo que te refieres al pulsar en la barra espaciadora va haciendo scroll en tu sitio web, este es un comportamiento normal del navegador, cuando el foco está en el body de tu página y no está escribiendo nada en ningún campo la barra espaciadora hace scroll hacia abajo. 

Desactivar esto no es recomendable ya que afecta el comportamiento normal del navegador y puede afectar la accesibilidad del sitio web. 

Un Saludo

Hola,

No, no me refiero a la barra espaciadora sino al comportamiento de la web al pulsar el TAB, es lo que puse en la primera entrada del hilo:

Orden del foco: Algunos elementos tienen un valor de [tabindex] superior a 0. Me explican: Cuando una persona navega con teclado (usando la tecla TAB), espera que el enfoque avance de forma lógica por los elementos de la página. Si el orden del foco es incorrecto (por ejemplo, porque se usa tabindex superior a 0), la navegación puede volverse confusa y poco predecible. Esto dificulta mucho el uso para personas que dependen del teclado.

Tu compañero me dijo esto:

Pulsa la tecla TAB varias veces y observa cómo se van enfocando los elementos (botones, menús, enlaces).

Si notas que salta de forma “extraña” o poco predecible, revisa el orden de los elementos en el constructor de tu sitio.

Coloco el ratón en el primer texto de la web y pulso la tecla TAB, se va al único botón que hay y al volver a pulsar se va al enlace que hay por debajo de ese botón. Supongo que debería parar en el acordeón para poder abrir las pestañas, ¿será eso? 

Con Lighthouse me indican esto:

He leído esto: https://web.dev/articles/control-focus-with-tabindex?hl=es-419 , pero aunque más o menos entiendo algo, sigo sin saber cómo corregirlo ¿qué hago con el [tabindex]?

Gracias

Hola Carlos, 

Entiendo, en este caso el comportamiento sobre la tecla de TAB sucede de acuerdo a la forma como esté construido el sitio web, cuando en el sitio hay elementos con tabindex mayor a 0 o algunos módulos o bloques como el acordeón no están definidos como un botón real el foco salta de forma extraña, no se detiene en cada título. 

En este sentido puede estar ocurriendo porque tienes elementos con tab index positivo y los títulos del acordeón en Divi no son botones nativos, como tal es por ello que el tab no se detiene allí.

Una posible solución que puedes probar es añadir el siguiente código en el function PHP de tu tema o un plugin como code snippets

add_action('wp_enqueue_scripts', function () {
$js = <<<JS
(function(){
// 1) Normaliza tabindex: evita prioridades artificiales (1,2,3...) → 0
function normalizePositiveTabindex(){
document.querySelectorAll('[tabindex]').forEach(function(el){
var v = el.getAttribute('tabindex');
if (v !== null) {
var n = parseInt(v, 10);
if (!isNaN(n) && n > 0) el.setAttribute('tabindex', '0');
}
});
}

// 2) Acordeón Divi accesible: foco + rol + teclado + estado ARIA
function makeDiviAccordionAccessible(){
var toggles = document.querySelectorAll('.et_pb_accordion .et_pb_toggle');
toggles.forEach(function(toggle, idx){
var title = toggle.querySelector('.et_pb_toggle_title');
var content = toggle.querySelector('.et_pb_toggle_content');
if(!title) return;

// Enfocable por TAB y semántica de botón
if(!title.hasAttribute('tabindex')) title.setAttribute('tabindex', '0');
title.setAttribute('role', 'button');

// Relación accesible entre título y panel
var contentId = content && !content.id ? ('accordion-panel-' + idx) : (content ? content.id : null);
if(content && !content.id) content.id = contentId;
if(contentId) title.setAttribute('aria-controls', contentId);

// Estado inicial según clase de Divi
var isOpen = toggle.classList.contains('et_pb_toggle_open');
title.setAttribute('aria-expanded', isOpen ? 'true' : 'false');

// Teclado: Enter o Espacio = click
title.addEventListener('keydown', function(e){
if(e.key === 'Enter' || e.key === ' '){
e.preventDefault();
title.click();
}
});

// Sincroniza aria-expanded al abrir/cerrar
title.addEventListener('click', function(){
var open = toggle.classList.contains('et_pb_toggle_open');
title.setAttribute('aria-expanded', open ? 'true' : 'false');
});
});
}

// 3) Asegura que el foco sea visible (si el tema oculta el outline)
function ensureFocusVisible(){
var s = document.createElement('style');
s.innerHTML = ':focus{outline:auto!important;outline-offset:2px}';
document.head.appendChild(s);
}

document.addEventListener('DOMContentLoaded', function(){
normalizePositiveTabindex();
makeDiviAccordionAccessible();
ensureFocusVisible();
});
})();
JS;

// Inyecta después de jQuery para mantener orden de carga en Divi
wp_add_inline_script('jquery-core', $js);
}, 30);

Puedes probarlo y verificar como va todo

Un Saludo

Hola,

Gracias por el código, ahora veo como va pasando el foco por todas las partes de la web, pero cuando paso el Lighthouse me sigue poniendo el mensaje de [tabindex] superior a 0:

Además, me sigue indicando como elemento con errores el icono del plugin de Accesibilidad y no entiendo demasiado de código pero sí veo que aparece un tabindex="1"

<button style="background-color: var(--ea11y-widget-accent); border-radius: 100%;" class="ea11y-widget-button ea11y-widget-button--open-widget ea11y-widget-open-but…" tabindex="1" aria-label="Opciones de Accesibilidad" aria-controls="ea11y-widget-container" aria-haspopup="dialog" aria-expanded="false">

¿Se puede modificar eso?

Gracias

Hola Carlos,

Siguiendo de cerca los comentarios de mi compañeros en este caso la alerta que aun queda por resolver es enfocada en el botón de accesibilidad que añade el plugin Ally – Web Accessibility & Usability https://wordpress.org/plugins/pojo-accessibility/

Ahora bien, no podemos modificar el código base el plugin ya que esto trataría de un ajuste personalizado que no podemos hacer lo que si podemos probar es ajustar el comportamiento del botón para cumplir con la revisión de Lighthouse 

Considerando el fragmento compartido por mi compañera, podemos agregar lo siguiente

// 4) Corrige tabindex del botón de accesibilidad 
function fixAccessibilityButtonTabindex(){
var interval = setInterval(function(){
var btn = document.querySelector(".ea11y-widget-button.ea11y-widget-button--open-widget");
if (btn) {
btn.setAttribute("tabindex", "0");
clearInterval(interval);
}
}, 500);
}

Justo despues del punto 3 en el fragmento de código general que ya tienes

Si aun asi sigue sin funcionar, siempre es valido elevar la solicitud a uno de nuestros colaboradores que con gusto podrán ver tu caso con mayor detalle https://www.webempresa.com/directorio-colaboradores.html

Saludos!