Posibles Soluciones a Problemas de Accesibilidad

Problema:

El menú-móvil es un diseño creado para telefonos móvil, y por consecuencia no tiene en consideración el uso del teclado para moverse entre las opciones del menú. Si el usuario hace «Zoom» provocando que aparezca el «mobil menu», y luego intenta usar el teclado para moverse por las opciones, luego de llegar a la opción final del menú, el foco (opción seleccionada) se pierde quedando detrás del «mobil menu».  El «mobil menu» queda abierto cubriendo la mayor parte de la página. El usuario tampoco puede cerrar el «mobil menu» ya que no hay forma de saber si el foco está en el botón de cerrar.

 

Solución:

Lo que se intentó hacer es que cuando el usuario entre al «mobil menu», permanezca en el mismo rotando por las opciones y pasando por el botón de cerrar el menú para que lo pueda accionar.  También se añadió que cuando oprima la tecla «Esc» el «mobil menu» cierre.

Nota:  Antes de intentar el procedimiento de esta solución, deberán estar seguros que los focos sean visibles en todas las opciones, incluyendo el botón de cerrar el menú.

 

Procedimiento:

1. Activar el plugin “Header and Footer Scripts” – Este plugin garantiza que si pongo código en “Footer” podré tener acceso a todos los elementos de la página. (si uso “Header” – el programa se ejecuta antes de que se gener la página y no estarán accesible los elementos).
   
2. Después de activar este plugin hay que ir al menú de administración (a la izquierda) de la siguiente forma:
   
3. En la pantalla que se nos presenta, buscamos la sección de “Scripts in footer”. En el área provista, debemos escribir el código. – Recuerden al grabar escribir “<script>” al comienzo y “</script>” al final. Si ya tienen código en esta sección, hagan un espacio entre <script> y </script> para insertar el código nuevo sin borrar el viejo.
   
4. A continuación el código JavaScript que se debe insertar:

[code language=»javascript»]
//================================================================================
//=== PARA MENU DE HAMBURGER

// Buscamos el DIV que define el icono de "close" [X]
// En este caso, es el que tiene la clase "dt-close-mobile-menu-icon"
let temp = document.getElementsByClassName("dt-close-mobile-menu-icon");
if(temp.length>0) var div_close = temp[0];
//Ahora le asignamos a este DIV el atributo "tabuindex"=0 para que sea accesible con el teclado.
div_close.setAttribute("tabindex", "0");

//Necesitamos tener un manejador de eventos, para capturar acciones del TECLADO.
//Con esto podemos cotejar teclas oprimidas por el usuario
//Cuanto el usuario accione una tecla, correrá la función "handle_key_press" que esta definida mas adelante
document.addEventListener("keydown",handle_key_press);

//Como necesitamos alterar la funcionalidad de cada opcion del menú
//obtenemos todas las opciones y la gardamos en la lista "li_hmenu".
var li_hmenu = document.querySelectorAll(‘#mobile-menu>li’);
if(li_hmenu.length>0)
{ //Para hacernos la vida facil, identificamos el primer elemento del menú (first_menu_element),
//y el último (last_menu_element) que vamos a usar mas adelante.
var first_menu_element = li_hmenu[0];
var last_menu_element = li_hmenu[li_hmenu.length-1];
}

// Ya de inicio, debemos de poner los elementos dentro de este menú NO ACCESIBLE- ya que el menu-mobile está escondido al inicio también.
// De lo contrario el usuario podra navegar por las opciones del menú "tras bastidores"
li_hmenu.forEach(function(mi_li){
let a = mi_li.querySelectorAll(‘a’)[0];
a.setAttribute("aria-hidden", "true");
a.setAttribute("aria-disabled", "true");
a.setAttribute("tabindex", "-1");
});

//——– Importante para detectar si el menú está ABIERTO o CERRADO ———————————-
//Este DIV es contiene dentro el Mobil-Menu. Según su CLASS – puede mostrar o esconder el mobile-menu:
// Class="show-mobile-header" ==> Muestra el Mobile-Menu
// Class="closed-mobile-header" ==> Esconde el Mobile-Menu
var div_page = document.getElementById(‘page’);

// ================================================================================================
// Esta función se acciona cuando el usuario oprime una tecla
// "event" contiene información sobre la tecla oprimida.
function handle_key_press(event)
{
const key = event.key; //Tecla oprimida
const ShiftPressed = event.shiftKey; //Está oprimida la tecla "SHIFT"? (true/false)
const focus_element = document.activeElement; //Cual es el elemento que tiene el foco actualmente

// Cotejamos primero, ¿Esta abierto el mobil-menu??
if(div_page.classList.contains("show-mobile-header"))
{ // Si está abierto, entonces mantenemos el foco dentro de este mobile-menu de la siguiente forma:

//Si el usuario Oprime "TAB"
if(key==="Tab")
{
if(((last_menu_element.contains(focus_element)) && (! ShiftPressed)) || //<– Ultima opción de menú y vamos para el próximo
((first_menu_element.contains(focus_element)) && (ShiftPressed)) ) //<– Primera opción de menú y vamos para el anterior
{ //Estamos por salir del menu!!!
event.preventDefault(); //Evitamos que ejecute el movimiento de foco.

//Ahora asignamos el foco al botón de "Close"
div_close.focus();
}
}

//———————————————————————-
// PARA PODER SALIR DEL MENÚ:
//Si el usuario Oprime "ESCAPE"
if(key==="Escape")
{
div_close.click();
}

//Si el usuairo oprime espacio, o ENTER y el foco lo tenemos en "CLOSE" debemos cerrar!!
if( ((key===" ") || (key==="Enter")) && (focus_element==div_close) )
{
event.preventDefault(); //Evitamos que ejecute el movimiento de foco. (espacio hace que la página se mueva)
div_close.click();
}

}

}
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Fin de función handle_key_press(event)

//——————————————————————————–
// Esta funcion se llama cuando "div_page" tiene un cambio de clase
// (ver definición al final "observer")
//El propósito de esta función es:
// 1. Cuando se abre el mobil-menu:
// Poner todos los "anchors" accesibles, y luego poner el foco en el primer elemento.
// 2. Cuando se cierra el mobil-menu
// Poner todos los "anchors" inaccesibles con el teclado ya que esta escondido
function hubo_cambio_de_clase(mutationList, observer)
{
mutationList.forEach(function(mutation) {
if (mutation.type === ‘attributes’ && mutation.attributeName === ‘class’)
{// Este elemento tuvo un cambio de clase!!!

//Si cambió para ABRIR el mobile-menu:
if(mutation.target.classList.contains("show-mobile-header"))
{ // activamos los elementos para que puedan tener foco.
li_hmenu.forEach(function(mi_li){
let a = mi_li.querySelectorAll(‘a’)[0];
a.setAttribute("aria-hidden", "false");
a.setAttribute("aria-disabled", "false");
a.setAttribute("tabindex", "0");
});
// Ponemos el primer elemento con foco:
first_menu_element.querySelectorAll(‘a’)[0].focus(); // Podemos eliminarlo.
}

//Si cambió para CERRAR el mobile-menu
if(mutation.target.classList.contains("closed-mobile-header"))
{// desactivamos los elementos para que no tengan foco:

li_hmenu.forEach(function(mi_li){
let a = mi_li.querySelectorAll(‘a’)[0];
a.setAttribute("aria-hidden", "true");
a.setAttribute("aria-disabled", "true");
a.setAttribute("tabindex", "-1");
});

}

}
})
}
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//Fin de función: hubo_cambio_de_clase(mutationList, observer)

//Creamos un manejador de eventos con el "div_page" para monitorear cuando cambia el atributo "CLASS" de este div
const observer = new MutationObserver(hubo_cambio_de_clase) //<– "hubo_cambio_de_clase" es la funcion que corre cuando cambia la clase
observer.observe(div_page, {attributes: true}); //<– Añadimos el "div_page" para que observe los cambios de clase.

//FIN DE LAS DECLARACIONES Y FUNCIONES
[/code]

Problema:

Si una persona intenta utilizar el teclado para acceder los enlaces, botones o  a las opciones en el menú, visualmente no es posible de saber en cual elemento está el foco ubicado.

Solución:

Esta falla se puede en la mayoría de las partes se puede corregir con código CSS.

Nota:  Puede ser que aún añadiendo el código, otros elementos NO muestren visualmente si está enfocado.  Habrá que corregir añadiendo otro código para esa excepción.

 

Procedimiento para usuarios de Theme The7:

1. 1. En el área de administración de su página vaya al menú superior y busque «Theme Options» → «Advanced»
      
   2. Dele clic al «Tab» que dice «Custom CSS» (flecha 3)
      
   3. En el espacio provisto, añada el siguiente código  (puede cambiar el color #f28c20 por el que más le convenga, según su página): (flecha 4)

      [code language=»css»]a:focus{ border: 3px solid #f28c20;  display:inline-block;  }[/code]

   4. Al final, dele al botón «Save Options» que se encuentra al final abajo para guardar los cambios (flecha 5)
   5. Vaya a su página «frontend» en su navegador. Recomiendo que abra una nueva pantalla en modo «incognito», para que no aparezcan opciones de «administrador» (ese menú en de franja negra sobre su página).  Intente usar el «Tab» y observe si los elemento en focos son «marcados».

Problema:

El elemento «Blog Masonry and Grid» despliega un listado de «post» (generalmente noticias) que consiste en una imagen, un título, fecha autor (opcional), y un resumen de la noticia (opcional). Generalmente el usuario con el mouse puede seleccionar la noticia que desea leer y le da clic a la imagen o al títutlo.  Dado que ambos elementos tienen un enlace por separado, cuando usamos el teclado para navegar habrá 2 selecciones consecutivas que tendrán foco:  La foto, y luego el título de la noticia.  Este título, si tiene más de una línea, entonces el marco del foco puede verse mal. Tener dos focos para un mismo enlace, puede ser que no sea una falta, pero tomé la decisión de simplificar el «user experience» poniendo un solo foco para cada enlace de noticia.

Imagen del «Blog Masonry and Grid»:

Solución:

En esta ocación hay que usar una combinación de JavaScript y CSS.   Javascript se utiliza para evitar que la imagen de la noticia obtenga el foco (simplificando la experiencia a un enlace por noticia).  Mientra que el CSS se encarga de arreglar visualmente como luce el «foco» del elemento del titulo. En lugar de usar el elemento de enlace <a> que comprende el título, vamos a enmarcar el elemento <h3> del título para que cuando se active el foco al rededor del mismo, luzca mejor.

 

Procedimientos para usuarios de Theme The7

Añadiendo el Javascript para eliminar el foco de la imagen:

Añadiendo el CSS para arreglar el foco del título: