{"id":141,"date":"2023-09-06T07:23:45","date_gmt":"2023-09-06T11:23:45","guid":{"rendered":"https:\/\/accesibilidad.upr.edu\/?page_id=141"},"modified":"2023-09-06T15:26:50","modified_gmt":"2023-09-06T19:26:50","slug":"posibles-soluciones-a-problemas-de-accesibilidad","status":"publish","type":"page","link":"https:\/\/accesibilidad.upr.edu\/en\/posibles-soluciones-a-problemas-de-accesibilidad\/","title":{"rendered":"Possible Solutions to Accessibility Problems"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

Posibles Soluciones a Problemas de Accesibilidad<\/h1>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
<\/div><\/div><\/div><\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>
<\/div>

Problema del \"mobile menu\" (hamburger menu). Utilizado en el Theme \"The7\"<\/span><\/i><\/a><\/h4><\/div>
\n\t
\n\t\t
\n\t\t\t

Problema:<\/strong><\/h3>\n

El men\u00fa-m\u00f3vil es un dise\u00f1o creado para telefonos m\u00f3vil, y por consecuencia no tiene en consideraci\u00f3n el uso del teclado para moverse entre las opciones del men\u00fa. Si el usuario hace \u00abZoom\u00bb provocando que aparezca el \u00abmobil menu\u00bb, y luego intenta usar el teclado para moverse por las opciones, luego de llegar a la opci\u00f3n final del men\u00fa, el foco (opci\u00f3n seleccionada) se pierde quedando detr\u00e1s del \u00abmobil menu\u00bb.\u00a0 El \u00abmobil menu\u00bb queda abierto cubriendo la mayor parte de la p\u00e1gina. El usuario tampoco puede cerrar el \u00abmobil menu\u00bb ya que no hay forma de saber si el foco est\u00e1 en el bot\u00f3n de cerrar.<\/p>\n

 <\/p>\n

Soluci\u00f3n:<\/strong><\/h3>\n

Lo que se intent\u00f3 hacer es que cuando el usuario entre al \u00abmobil menu\u00bb, permanezca en el mismo rotando por las opciones y pasando por el bot\u00f3n de cerrar el men\u00fa para que lo pueda accionar.\u00a0 Tambi\u00e9n se a\u00f1adi\u00f3 que cuando oprima la tecla \u00abEsc\u00bb el \u00abmobil menu\u00bb cierre.<\/p>\n

Nota:\u00a0 Antes de intentar el procedimiento de esta soluci\u00f3n, deber\u00e1n estar seguros que los focos sean visibles en todas las opciones, incluyendo el bot\u00f3n de cerrar el men\u00fa.<\/strong><\/p>\n

 <\/p>\n

Procedimiento:<\/strong><\/h3>\n
    \n
  1. Activar el plugin \u201cHeader and Footer Scripts\u201d \u2013 Este plugin garantiza que si pongo c\u00f3digo en \u201cFooter\u201d podr\u00e9 tener acceso a todos los elementos de la p\u00e1gina. (si uso \u201cHeader\u201d \u2013 el programa se ejecuta antes de que se gener la p\u00e1gina y no estar\u00e1n accesible los elementos).
    \n\"Imagen<\/li>\n
  2. Despu\u00e9s de activar este plugin hay que ir al men\u00fa de administraci\u00f3n (a la izquierda) de la siguiente forma:
    \n\"Muestra<\/li>\n
  3. En la pantalla que se nos presenta, buscamos la secci\u00f3n de \u201cScripts in footer\u201d. En el \u00e1rea provista, debemos escribir el c\u00f3digo. \u2013 Recuerden al grabar escribir \u201c<script>\u201d al comienzo y \u201c<\/script>\u201d al final. Si ya tienen c\u00f3digo en esta secci\u00f3n, hagan un espacio entre <script> y <\/script> para insertar el c\u00f3digo nuevo sin borrar el viejo.
    \n\"Imagen<\/li>\n
  4. A continuaci\u00f3n el c\u00f3digo JavaScript que se debe insertar:<\/li>\n<\/ol>\n

    [code language=\u00bbjavascript\u00bb]
    \n\/\/================================================================================
    \n\/\/=== PARA MENU DE HAMBURGER<\/p>\n

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

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

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

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

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

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

    \/\/ Cotejamos primero, \u00bfEsta abierto el mobil-menu??
    \n if(div_page.classList.contains("show-mobile-header"))
    \n { \/\/ Si est\u00e1 abierto, entonces mantenemos el foco dentro de este mobile-menu de la siguiente forma:<\/p>\n

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

    \/\/Ahora asignamos el foco al bot\u00f3n de "Close"
    \n div_close.focus();
    \n }
    \n }<\/p>\n

    \/\/———————————————————————-
    \n \/\/ PARA PODER SALIR DEL MEN\u00da:
    \n \/\/Si el usuario Oprime "ESCAPE"
    \n if(key==="Escape")
    \n {
    \n div_close.click();
    \n }<\/p>\n

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

    }<\/p>\n

    }
    \n\/\/^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    \n\/\/ Fin de funci\u00f3n handle_key_press(event)<\/p>\n

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

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

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

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

    }<\/p>\n

    }
    \n })
    \n }
    \n\/\/^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    \n\/\/Fin de funci\u00f3n: hubo_cambio_de_clase(mutationList, observer) <\/p>\n

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

    \/\/FIN DE LAS DECLARACIONES Y FUNCIONES
    \n[\/code]<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

    Foco no visible - Caso General<\/span><\/i><\/a><\/h4><\/div>
    \n\t
    \n\t\t
    \n\t\t\t

    Problema:<\/strong><\/h3>\n

    Si una persona intenta utilizar el teclado para acceder los enlaces, botones o\u00a0 a las opciones en el men\u00fa, visualmente no es posible de saber en cual elemento est\u00e1 el foco ubicado.<\/p>\n

    Soluci\u00f3n:<\/strong><\/h3>\n

    Esta falla se puede en la mayor\u00eda de las partes se puede corregir con c\u00f3digo CSS.<\/p>\n

    Nota:\u00a0 Puede ser que a\u00fan a\u00f1adiendo el c\u00f3digo, otros elementos NO muestren visualmente si est\u00e1 enfocado.\u00a0 Habr\u00e1 que corregir a\u00f1adiendo otro c\u00f3digo para esa excepci\u00f3n.<\/strong><\/p>\n

     <\/p>\n

    Procedimiento para usuarios de Theme The7:<\/strong><\/h3>\n
      \n
    1. \n
        \n
      1. En el \u00e1rea de administraci\u00f3n de su p\u00e1gina vaya al men\u00fa superior y busque \u00abTheme Options\u00bb \u2192 \u00abAdvanced\u00bb
        \n\"Muestra<\/li>\n
      2. Dele clic al \u00abTab\u00bb que dice \u00abCustom CSS\u00bb (flecha 3)
        \n\"Imagen<\/li>\n
      3. En el espacio provisto, a\u00f1ada el siguiente c\u00f3digo\u00a0 (puede cambiar el color #f28c20 por el que m\u00e1s le convenga, seg\u00fan su p\u00e1gina): (flecha 4)\n

        [code language=\u00bbcss\u00bb]a:focus{ border: 3px solid #f28c20; \u00a0display:inline-block; \u00a0}[\/code]<\/p>\n<\/li>\n

      4. Al final, dele al bot\u00f3n \u00abSave Options\u00bb que se encuentra al final abajo para guardar los cambios (flecha 5)<\/li>\n
      5. Vaya a su p\u00e1gina \u00abfrontend\u00bb en su navegador. Recomiendo que abra una nueva pantalla en modo \u00abincognito\u00bb, para que no aparezcan opciones de \u00abadministrador\u00bb (ese men\u00fa en de franja negra sobre su p\u00e1gina).\u00a0 Intente usar el \u00abTab\u00bb y observe si los elemento en focos son \u00abmarcados\u00bb.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div>

        Foco no visible en los elementos de \"Blog Masonry and Grid\"<\/span><\/i><\/a><\/h4><\/div>
        \n\t
        \n\t\t
        \n\t\t\t

        Problema:<\/strong><\/h3>\n

        El elemento \u00abBlog Masonry and Grid\u00bb despliega un listado de \u00abpost\u00bb (generalmente noticias) que consiste en una imagen, un t\u00edtulo, 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\u00edtutlo.\u00a0 Dado que ambos elementos tienen un enlace por separado, cuando usamos el teclado para navegar habr\u00e1 2 selecciones consecutivas que tendr\u00e1n foco:\u00a0 La foto, y luego el t\u00edtulo de la noticia.\u00a0 Este t\u00edtulo, si tiene m\u00e1s de una l\u00ednea, entonces el marco del foco puede verse mal. Tener dos focos para un mismo enlace, puede ser que no sea una falta, pero tom\u00e9 la decisi\u00f3n de simplificar el \u00abuser experience\u00bb poniendo un solo foco para cada enlace de noticia.<\/p>\n

        Imagen del \u00abBlog Masonry and Grid\u00bb:<\/strong>
        \n\"Imagen<\/p>\n

        Soluci\u00f3n:<\/strong><\/h3>\n

        En esta ocaci\u00f3n hay que usar una combinaci\u00f3n de JavaScript y CSS.\u00a0 \u00a0Javascript se utiliza para evitar que la imagen de la noticia obtenga el foco (simplificando la experiencia a un enlace por noticia).\u00a0 Mientra que el CSS se encarga de arreglar visualmente como luce el \u00abfoco\u00bb del elemento del titulo. En lugar de usar el elemento de enlace <a> que comprende el t\u00edtulo, vamos a enmarcar el elemento <h3> del t\u00edtulo para que cuando se active el foco al rededor del mismo, luzca mejor.<\/p>\n

         <\/p>\n

        Procedimientos para usuarios de Theme The7<\/strong><\/p>\n

        A\u00f1adiendo el Javascript para eliminar el foco de la imagen:<\/strong><\/h3>\n
        \n
          \n
        1. Activar el plugin \u201cHeader and Footer Scripts\u201d \u2013 Este plugin garantiza que si pongo c\u00f3digo en \u201cFooter\u201d podr\u00e9 tener acceso a todos los elementos de la p\u00e1gina. (si uso \u201cHeader\u201d \u2013 el programa se ejecuta antes de que se gener la p\u00e1gina y no estar\u00e1n accesible los elementos).
          \n\"Imagen<\/li>\n
        2. Despu\u00e9s de activar este plugin hay que ir al men\u00fa de administraci\u00f3n (a la izquierda) de la siguiente forma:
          \n\"Muestra<\/li>\n
        3. En la pantalla que se nos presenta, buscamos la secci\u00f3n de \u201cScripts in footer\u201d. En el \u00e1rea provista, debemos escribir el c\u00f3difo. \u2013 Recuerden al grabar escribir \u201c<script>\u201d al comienzo y \u201c<\/script>\u201d al final. Si ya tienen c\u00f3digo en esta secci\u00f3n, hagan un espacio entre <script> y <\/script> para insertar el c\u00f3digo nuevo sin borrar el viejo.
          \n\"Imagen<\/li>\n
        4. A continuaci\u00f3n el c\u00f3digo JavaScript que se debe insertar:<\/li>\n<\/ol>\n

          [code language=\u00bbjavascript\u00bb]
          \n\/\/Para la p\u00e1gina de Noticias y Eventos…
          \nvar noticias = document.querySelectorAll(‘a.rollover’);
          \nif(noticias)
          \n{
          \n \/\/Esto hace que las imagenes no sean accesibles (le elimino el foco)
          \n noticias.forEach((n)=>{ n.setAttribute("aria-hidden", "true");
          \n n.setAttribute("aria-disabled", "true");
          \n n.setAttribute("tabindex", "-1");});
          \n}<\/p>\n

          [\/code]<\/p>\n<\/div>\n

          A\u00f1adiendo el CSS para arreglar el foco del t\u00edtulo:<\/strong><\/h3>\n
          \n
            \n
          1. \n
              \n
            1. En el \u00e1rea de administraci\u00f3n de su p\u00e1gina vaya al men\u00fa superior y busque \u00abTheme Options\u00bb \u2192 \u00abAdvanced\u00bb
              \n\"Muestra<\/li>\n
            2. Dele clic al \u00abTab\u00bb que dice \u00abCustom CSS\u00bb (flecha 3)
              \n\"Imagen<\/li>\n
            3. En el espacio provisto, a\u00f1ada el siguiente c\u00f3digo\u00a0 (puede cambiar el color #f28c20 por el que m\u00e1s le convenga, seg\u00fan su p\u00e1gina): (flecha 4)\n

              [code language=\u00bbcss\u00bb]
              \n\/* TITULOS DE NOTICIAS *\/
              \nh3.entry-title:focus-within { border: 3px solid #f28c20;} \/* h3 con la clase "entry-title" tendr\u00e1 el marco del foco*\/
              \nh3.entry-title:focus-within > a{ \u00a0 \u00a0border: none;} \u00a0\/*Evita que el anchor <a> tenga marco a la misma vez que h3 *\/
              \n[\/code]<\/p>\n

               <\/li>\n

            4. Al final, dele al bot\u00f3n \u00abSave Options\u00bb que se encuentra al final abajo para guardar los cambios (flecha 5)<\/li>\n
            5. Vaya a su p\u00e1gina \u00abfrontend\u00bb en su navegador. Recomiendo que abra una nueva pantalla en modo \u00abincognito\u00bb, para que no aparezcan opciones de \u00abadministrador\u00bb (ese men\u00fa en de franja negra sobre su p\u00e1gina).\u00a0 Intente usar el \u00abTab\u00bb y observe si los elemento en focos son \u00abmarcados\u00bb de forma correcta.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
              <\/span><\/div><\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"

              Posibles Soluciones a Problemas de Accesibilidad Problema del \u00abmobile menu\u00bb (hamburger menu). Utilizado en el Theme \u00abThe7\u00bb Problema: El men\u00fa-m\u00f3vil es un dise\u00f1o creado para telefonos m\u00f3vil, y por consecuencia no tiene en consideraci\u00f3n el uso del teclado para moverse entre las opciones del men\u00fa. Si el usuario hace \u00abZoom\u00bb provocando que aparezca el \u00abmobil…<\/p>","protected":false},"author":237,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-141","page","type-page","status-publish","hentry","description-off"],"_links":{"self":[{"href":"https:\/\/accesibilidad.upr.edu\/en\/wp-json\/wp\/v2\/pages\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/accesibilidad.upr.edu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/accesibilidad.upr.edu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/accesibilidad.upr.edu\/en\/wp-json\/wp\/v2\/users\/237"}],"replies":[{"embeddable":true,"href":"https:\/\/accesibilidad.upr.edu\/en\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":31,"href":"https:\/\/accesibilidad.upr.edu\/en\/wp-json\/wp\/v2\/pages\/141\/revisions"}],"predecessor-version":[{"id":181,"href":"https:\/\/accesibilidad.upr.edu\/en\/wp-json\/wp\/v2\/pages\/141\/revisions\/181"}],"wp:attachment":[{"href":"https:\/\/accesibilidad.upr.edu\/en\/wp-json\/wp\/v2\/media?parent=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}