Possible Solutions to Accessibility Problems

Problem:

The mobile-menu is a design created for mobile phones, and therefore does not take into account the use of the keyboard to move between the menu options. If the user "Zooms" causing the "mobil menu" to appear, and then tries to use the keyboard to move through the options, after reaching the final menu option, the focus (selected option) is lost, remaining behind the " mobile menu». The “mobile menu” remains open, covering most of the page. The user cannot close the mobile menu either, as there is no way to know if the focus is on the close button.

 

Solution

What was tried to do is that when the user enters the "mobile menu", he remains in it, rotating through the options and going through the button to close the menu so that he can activate it. It was also added that when you press the "Esc" key the "mobil menu" closes.

Note: Before attempting the procedure in this solution, you must make sure that the focus indicators are visible on all options, including the close menu button.

 

Procedure:

1. Activate the “Header and Footer Scripts” plugin – This plugin ensures that if I put code in the “Footer” I will be able to access all the elements of the page. (if I use “Header” – the program is executed before the page is generated and the elements will not be accessible).
   
2. After activating this plugin you have to go to the administration menu (on the left) as follows:
   
3. On the screen that appears, we look for the “Scripts in footer” section. In the area provided, we need to write the code. – Remember when recording to write “” at the end. If you already have code in this section, make a space between to insert the new code without deleting the old one.
   
4. Below is the JavaScript code to be inserted:

[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]

Problem:

If a person tries to use the keyboard to access links, buttons or options in the menu, it is not visually possible to know which element the focus is on.

Solution

This flaw can, in most parts, be corrected with CSS code.

Note:  It may be that even if you add the code, other elements DO NOT visually show if it is in focus. It will have to be corrected by adding another code for that exception.

 

Procedure for Theme The7 users:

1. 1. In the admin area of ​​your page go to the top menu and look for “Theme Options” → “Advanced”
      
   2. Click on the “Tab” that says “Custom CSS” (arrow 3)
      
   3. In the space provided, add the following code (you can change the color #f28c20 to whatever suits you best, depending on your page): (arrow 4)

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

   4. At the end, hit the “Save Options” button at the bottom bottom to save the changes (arrow 5)
   5. Go to your frontend page in your browser. I recommend that you open a new screen in "incognito" mode, so that "administrator" options (that black strip menu on your page) do not appear. Try using the "Tab" and see if the items in focus are "checked".

Problem:

The «Blog Masonry and Grid» element displays a list of «posts» (usually news) consisting of an image, a title, author date (optional), and a summary of the news (optional). Generally, the user with the mouse can select the news that he wants to read and clicks on the image or the title. Since both elements have a separate link, when we use the keyboard to navigate there will be 2 consecutive selections that will have focus: The photo, and then the news title. This title, if it has more than one line, then the focus frame may look bad. Having two spotlights for the same link may not be a mistake, but I made the decision to simplify the "user experience" by putting a single spotlight for each news link.

Image from the “Masonry and Grid Blog”:

Solution

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.

 

Procedures for Theme The7 users

Adding the Javascript to remove the focus from the image:

Adding the CSS to fix the title focus: