Una guía para la accesibilidad del teclado: JavaScript (Parte 2)

Taller de diseño conductual, con Susan y Guthrie Weinschenk

Implemente rápidamente. Implementar inteligentemente

Índice

Los basicos
Patrones de componentes

Este artículo es la segunda de dos partes sobre una guía para hacer que los sitios web sean accesibles para los usuarios de teclados. Aquí, Cristian Diaz cubre un conjunto de herramientas en JavaScript que puede combinar en diferentes componentes para crear una excelente experiencia para los usuarios de teclados.

En el artículo anterior , hablamos sobre cómo mejorar la accesibilidad para los usuarios de teclado usando HTML y CSS. Esos lenguajes pueden hacer el trabajo la mayor parte del tiempo, pero ciertos requisitos de diseño y la naturaleza de ciertos componentes crean la necesidad de interacciones más complejas, y aquí es donde JavaScript entra en juego.

Para fines de accesibilidad del teclado, la mayor parte del trabajo se realiza con herramientas básicas que abren muchas posibilidades para la interactividad del teclado. Este artículo cubre un conjunto de herramientas que puede combinar en diferentes componentes para mejorar la accesibilidad para los usuarios de teclados.

Los basicos

La mayoría de las veces, su trabajo con JavaScript para mejorar la accesibilidad del teclado de los componentes se realizará con solo un puñado de herramientas, incluido el uso de detectores de eventos y ciertos métodos de JavaScript de un par de API web que pueden ayudarnos en esta tarea.

Una de las herramientas más importantes que tenemos para agregar interactividad a nuestros proyectos es la existencia de eventos, que es la ejecución de funciones que se disparan cuando el elemento que estás verificando recibe un cambio.

keydownEvento

Un ejemplo de un evento que puede escuchar con esta API web es el keydownevento, que verifica cuándo se presiona una tecla.

Ahora, esto no se usa para agregar accesibilidad de teclado a elementos como botones o enlaces porque, de forma predeterminada, cuando les agrega un clickdetector de eventos, esto también activará el evento cuando use las teclas Enter(para botones y enlaces) y ( Spacebotón únicamente). En cambio, la utilidad del keydownevento surge cuando necesita agregar funcionalidad a otras claves.

Para agregar un ejemplo, volvamos a la información sobre herramientas que creamos en la primera parte de este artículo . Mencioné que esta información sobre herramientas debe cerrarse cuando presionas la Esctecla. Necesitaríamos un keydowndetector de eventos para verificar si la tecla presionada es Esc. Para eso, necesitamos detectar la tecla presionada del evento. En este caso, verificaremos la keypropiedad del evento.

Usaremos keycode.info para verificar el volcado de eventos de esta clave. Si presiona la Esctecla en esta página, notará que e.keyes igual a "Escape".

Nota: Hay otras dos formas de detectar la tecla presionada, y son verificar e.keyCodey e.which. Le devolverán un número. En el caso de la Escclave, será 27 . Pero tenga en cuenta que se trata de alternativas obsoletas y, aunque funcionan, e.keyes la opción preferida.

Con eso, necesitamos seleccionar nuestros botones y agregar el detector de eventos. Mi enfoque en este asunto es usar este detector de eventos para agregar una clase al botón y agregar esta clase como una excepción para mostrarla usando la :not()pseudoclase. Empecemos a cambiar un poco nuestro CSS:

button:not(.hide-tooltip):hover + [role="tooltip"],button:not(.hide-tooltip):focus + [role="tooltip"],[role="tooltip"]:hover { display: block;}

Ahora, con esta excepción agregada, ¡creemos nuestro detector de eventos!

const buttons = [...document.querySelectorAll("button")]buttons.forEach(element = { element.addEventListener("keydown", (e) = { if (e.key === "Escape") { element.classList.add("hide-tooltip") } })})

¡Y ahí lo tienes! Con solo una pizca de JavaScript, hemos agregado una función de accesibilidad a nuestra información sobre herramientas. Y eso fue solo el comienzo de lo que podemos hacer con un keydowndetector de eventos. Será una herramienta crucial para mejorar la accesibilidad del teclado para múltiples componentes, pero hay otro detector de eventos que debemos tener en cuenta.

blurEvento

Hay otro evento que usaremos con frecuencia. Este detecta cuando el elemento deja de recibir foco. Este detector de eventos es importante y, la mayoría de las veces, lo utilizará para revertir los posibles cambios que haya realizado con el keydowndetector de eventos.

Volvamos a la información sobre herramientas. En este momento, tiene un problema: si presionas la Esctecla para cerrar la información sobre herramientas y luego te enfocas en el mismo elemento nuevamente, la información sobre herramientas no aparecerá. ¿Por qué? Porque agregamos la hide-tooltipclase cuando presionas la Esctecla, pero nunca eliminamos esta clase. Aquí es donde blurentra en juego. Agreguemos un detector de eventos para revertir esta funcionalidad.

element.addEventListener("blur", (e) = { if (element.classList.contains("hide-tooltip")) { element.classList.remove("hide-tooltip"); }});

Otros oyentes de eventos (y por qué es posible que no los necesite)

Mencioné que vamos a necesitar dos detectores de eventos en nuestro conjunto de herramientas, pero hay otros detectores de eventos que puedes usar, como focusouto focus. Sin embargo, creo que los casos de uso para ellos son bastante escasos. Hay una mención especial focusporque incluso si puedes encontrar buenos casos de uso, debes tener mucho cuidado. Al fin y al cabo, si no lo utilizas correctamente, puedes provocar un cambio de contexto.

Las WCAG definen un cambio de contexto como "cambios importantes que, si se realizan sin el conocimiento del usuario, pueden desorientar a los usuarios que no pueden ver la página completa simultáneamente". Algunos ejemplos de cambio de contexto incluyen:

Abriendo una nueva ventana;
Cambiar significativamente el diseño de su sitio;
Mover el foco a otra parte del sitio.

Es importante tener esto en cuenta porque crear un cambio de contexto al momento de centrarse en un elemento es una falla del criterio WCAG 3.2.1:

Cuando cualquier componente de la interfaz de usuario recibe atención, no inicia un cambio de contexto.

— Criterio de Conformidad 3.2.1: Orden de enfoque

Si no tienes cuidado, el mal uso de una función que escucha el focusevento puede generar un cambio de contexto. ¿Eso significa que no deberías usarlo? Realmente no, pero para ser honesto, difícilmente encuentro un uso para este evento. La mayoría de las veces, utilizará la :focuspseudoclase para crear funcionalidades similares.

Dicho esto, hay al menos un patrón de componente que puede beneficiarse de este detector de eventos en algunos casos, pero lo cubriré más adelante cuando empiece a hablar sobre componentes, así que dejemos de lado ese tema por ahora.

focus()Método

¡ Esto es algo que usaremos con cierta frecuencia! Este método de la API HTMLElement nos permite llevar el foco del teclado a un elemento en particular. De forma predeterminada, dibujará el indicador de enfoque en el elemento y desplazará la página hasta la ubicación del elemento. Este comportamiento se puede cambiar con un par de parámetros:

preventScroll
Cuando esté configurado en true, hará que el navegador no se desplace hasta el elemento enfocado mediante programación.
focusVisible
Cuando se establece en false, hará que el elemento enfocado mediante programación no muestre su indicador de enfoque. Esta propiedad sólo funciona en Firefox en este momento .

Tenga en cuenta que para enfocar el elemento, debe poder enfocarse o tabularse. Si necesita enfocar un elemento que normalmente no se puede tabular (como una ventana de diálogo), deberá agregar el atributo tabindexcon un número entero negativo para que se pueda enfocar. Puedes comprobar cómo tabindexfunciona en la primera parte de esta guía .

buttonBring focus/buttondiv role="dialog" tabindex="-1" h2Modal content/h2/div

Luego agregaremos un clickdetector de eventos al botón para enfocar la ventana de diálogo:

const button = document.querySelector("#openModal");const modal = document.querySelector("#modal")button.addEventListener("click", () = { modal.focus()})

¡Y ahí lo tienes! Este método será muy útil en muchos componentes junto con el keydownatributo, por lo que comprender cómo funcionan ambos es crucial.

Cambiar atributos HTML con JavaScript

Ciertos atributos HTML deben modificarse con JavaScript para crear accesibilidad en patrones de componentes complejos. Dos de los más importantes para la accesibilidad del teclado son tabindexy el agregado más recientemente inert. tabindexse puede modificar usando setAttribute. Este atributo requiere dos parámetros:

name
Comprueba el nombre del atributo que deseas modificar.
value
Agregará la cadena que este atributo requiere si no requiere un atributo en particular (por ejemplo, si agrega los atributos hiddeno contenteditable, necesitará usar una cadena vacía).

Veamos un ejemplo rápido de cómo usarlo:

const button = document.querySelector("button")button.setAttribute("tabindex", "-1")

setAttributeAyudará mucho a la accesibilidad en general. (¡Lo uso mucho para cambiar los atributos ARIA cuando es necesario!) Pero, cuando hablamos de accesibilidad del teclado, tabindexes casi el único atributo que modificará con este método.

Mencioné el inertatributo antes y este funciona de manera un poco diferente porque tiene su propia propiedad en la API web HTMLElement. HTMLElement.inertes un valor booleano que nos permitirá alternar el inertatributo.

Tenga en cuenta un par de cosas antes de pensar en utilizar este atributo:

Necesitará un polyfill porque no está completamente implementado en todos los navegadores y aún es bastante reciente. Este polyfill creado por ingenieros de Chrome funciona bastante bien en las pruebas que he realizado, por lo que si necesita esta propiedad, este es un enfoque seguro, pero tenga en cuenta que puede tener comportamientos inesperados.
setAttribute¡También puedes usarlo para cambiar este atributo! Ambos funcionan igual de bien, incluso con polyfill. Lo que decidas utilizar depende de ti.

const button = document.querySelector("button")// Syntax with HTMLElement.inertbutton.inert = true// Syntax with Element.setAttribute()button.setAttribute("inert", "")

Esta combinación de herramientas será útil para fines de accesibilidad del teclado. ¡Ahora comencemos a verlos en acción!

Patrones de componentes

Consejos de alternancia

Punta de palanca del sistema de diseño de carbono. ( Vista previa grande )

Aprendimos cómo crear información sobre herramientas en la parte anterior y mencioné cómo mejorarla con JavaScript, pero hay otro patrón para este tipo de componente llamado toggletip , que es una información sobre herramientas que funciona cuando haces clic en ellos, en lugar de pasar el cursor sobre ellos. a ellos.

Revisemos una lista rápida de lo que necesitamos para asegurarnos de que esto suceda:

Cuando presiona el botón, la información debe anunciarse a los lectores de pantalla. Eso debería suceder cuando presiones el botón nuevamente. Al presionar el botón no se cerrará la información de alternancia .
La información de alternancia se cerrará cuando haga clic fuera de la información de alternancia, deje de enfocar el botón o presione la Esctecla.

Tomaré el enfoque de Heydon Pickering del que habla en su libro Componentes inclusivos . Entonces, comencemos con el marcado:

pIf you need to check more information, check here span button span aria-hidden="true"?/span divMás información/div /button span role="status"/span /span/p

La idea es inyectar el HTML necesario dentro del elemento con la extensión role="status". Eso hará que los lectores de pantalla anuncien el contenido cuando hagas clic en él. Estamos usando un buttonelemento para hacerlo tabulable. Ahora, ¡creemos el script para mostrar el contenido!

toggletipButton.addEventListener("click", () = { toggletipInfo.innerHTML = ""; setTimeout(() = { toggletipInfo.innerHTML = toggletipContent; }, 100);});

Como menciona Heydon en su libro, utilizamos este enfoque de eliminar primero el contenido HTML del contenedor y luego agregarlo setTimeoutpara asegurarnos de que cada vez que haga clic en él, se anuncie a los usuarios de lectores de pantalla. Ahora debemos comprobar que cuando haces clic en otro lugar, el contenido deja de mostrarse. Mazos del Hearthstone

document.addEventListener("click", (e) = { if (toggletipContainer !== e.target) { toggletipInfo.innerHTML = "" }})

Una vez aclarado esto, es hora de agregar accesibilidad del teclado a este componente. No necesitamos hacer que el contenido de la información de alternancia se muestre cuando presiona el botón porque una buena semántica HTML ya lo hace por nosotros. Necesitamos hacer que el contenido de la información de alternancia deje de mostrarse cuando presionas la Esctecla y cuando dejas de enfocarte en este botón. Funciona de manera muy similar a lo que hicimos con la información sobre herramientas en la sección anterior como ejemplos, así que comencemos a trabajar con eso. Primero, usaremos el keydowndetector de eventos para verificar cuándo Escse presiona la tecla:

toggletipContainer.addEventListener("keydown", (e) = { if (e.key === "Escape") { toggletipInfo.innerHTML = "" }})

Y ahora, necesitamos verificar el blurevento para hacer lo mismo. Este debería estar en el buttonelemento en lugar del contenedor en sí.

toggletipButton.addEventListener("blur", () = { toggletipInfo.innerHTML = "";});

¡Y este es nuestro resultado!

Vea el Pen [demostración de Toggletip [bifurcado]](https://codepen.io/smashingmag/pen/WNyjeJK) de Cristian Diaz .

Como mencioné, esto funciona de manera muy similar a la información sobre herramientas que creamos, pero lo hice por una razón. A menos que estés haciendo algo muy poco convencional, esos patrones se repetirán con bastante frecuencia.

Como menciona Stephanie Eckles en su artículo “ 4 pruebas requeridas antes de enviar nuevas funciones ”, hay algunos comportamientos esperados que los usuarios de teclados esperan de los componentes, como poder cerrar algo que acaba de abrir presionando la Esctecla o poder navegar por un grupo de opciones relacionadas usando las Arrowteclas.

Si tiene en cuenta esos patrones, notará una superposición en el comportamiento de ciertos componentes, y eso se repetirá cuando comience a crear código JavaScript para garantizar la accesibilidad del teclado. Por lo tanto, tener esta lista en mente le ayudará a comprender qué requisitos necesitarán los componentes que está creando.

Hablando de eso, veamos otro patrón de componentes común.

Pestañas

Pestañas del sistema de diseño de carbono. ( Vista previa grande )

Errabundotabindex

Las interfaces con pestañas son patrones que aún puedes ver de vez en cuando. Tienen una funcionalidad muy interesante cuando hablamos de navegación por teclado: al presionar la Tabtecla, irá al panel de pestañas activas. Para navegar entre la lista de pestañas, necesitará usar las Arrowteclas. Esta es una técnica llamada itinerantetabindex que consiste en eliminar la capacidad de los elementos no activos de ser tabulados agregando el atributo tabindex="-1"y luego usando otras claves para permitir la navegación entre esos elementos.

Con las pestañas, este es el comportamiento esperado para aquellos:

Cuando presionas las teclas Lefto Up, el foco del teclado se moverá a la pestaña anterior. Si el foco está en la primera pestaña, lo moverá a la última pestaña.
Cuando presionas las teclas Righto Down, el foco del teclado se moverá a la siguiente pestaña. Si el foco está en la primera pestaña, lo moverá a la última pestaña.

La creación de esta funcionalidad es una combinación de tres técnicas que vimos antes: modificar tabindexcon setAttribute, el keydowndetector de eventos y el focus()método. Comencemos verificando el marcado de este componente:

ul role="tablist" li role="presentation" button role="tab" aria-selected="true"Tomato/button /li li role="presentation" button role="tab" tabindex="-1"Onion/button /li li role="presentation" button role="tab" tabindex="-1"Celery/button /li li role="presentation" button role="tab" tabindex="-1"Carrot/button /li/uldiv section role="tabpanel" aria-labelledby="tab1" tabindex="0" /section section role="tabpanel" aria-labelledby="tab2" tabindex="0" hidden /section section role="tabpanel" aria-labelledby="tab3" tabindex="0" hidden /section section role="tabpanel" aria-labelledby="tab4" tabindex="0" hidden /section/div

Estamos usando aria-selected="true"para mostrar cuál es la pestaña activa y estamos agregando tabindex="-1"para que las pestañas no activas no se puedan seleccionar con la Tabtecla. Los paneles de pestañas deben poder ser tabulados si no hay ningún elemento tabulado dentro de ellos, por eso agregué el atributo tabindex="0"y los paneles de pestañas no activos se ocultan usando el atributo hidden.

Es hora de agregar la navegación con las teclas de flecha. Para esto, necesitaremos crear una matriz con las pestañas y luego crear una función para ella. Nuestro siguiente paso es comprobar cuál es la primera y la última pestaña de la lista. Esto es importante porque la acción que ocurrirá cuando presiones una tecla cambiará si el foco del teclado está en uno de esos elementos.

const TABS = [...TABLIST.querySelectorAll("[role='tab']")];const createKeyboardNavigation = () = { const firstTab = TABS[0]; const lastTab = TABS[TABS.length - 1];}

Después de eso, agregaremos un keydowndetector de eventos a cada pestaña. Comenzaré agregando la funcionalidad con las flechas Lefty Up.

// Previous code of the createKeyboardNavigation functionTABS.forEach((element) = { element.addEventListener("keydown", function (e) { if (e.key === "ArrowUp" || e.key === "ArrowLeft") { e.preventDefault(); if (element === firstTab) { lastTab.focus(); } else { const focusableElement = TABS.indexOf(element) - 1; TABS[focusableElement].focus(); } } }}

Esto es lo que está pasando aquí:

En primer lugar comprobamos que la tecla pulsada es la flecha Upo Left. Para eso revisamos el event.key.
Si eso es cierto, debemos evitar que esas teclas se desplacen por la página porque, recuerde, de forma predeterminada, lo hacen. Podemos utilizar e.preventDefault()para este objetivo.
Si la tecla enfocada es la primera pestaña, automáticamente traerá el foco del teclado a la última. Esto se hace llamando al método focus()para enfocar la última pestaña (que almacenamos en una variable).
Si no es el caso, debemos comprobar cuál es la posición de la pestaña activa. Mientras almacenamos los elementos de la pestaña en una matriz, podemos usar el método indexOf()para verificar la posición.
Mientras intentamos navegar a la pestaña anterior, podemos restar 1del resultado indexOf()y luego buscar el elemento correspondiente en la TABSmatriz y enfocarlo mediante programación con el focus()método.

Ahora necesitamos hacer un proceso muy similar con las teclas Downy Right:

// Previous code of the createKeyboardNavigation functionelse if (e.key === "ArrowDown" || e.key === "ArrowRight") { e.preventDefault(); if (element == lastTab) { firstTab.focus(); } else { const focusableElement = TABS.indexOf(element) + 1; TABS[focusableElement].focus(); }}

Como mencioné, es un proceso muy similar. En lugar de restar uno del indexOf()resultado, sumamos 1 porque queremos llevar el foco del teclado al siguiente elemento.

Mostrar el contenido y cambiar los atributos HTML

Creamos la navegación y ahora necesitamos mostrar y ocultar el contenido, así como manipular los atributos aria-selectedy tabindex. Recuerde, debemos hacer que cuando el foco del teclado esté en el panel activo y presione Shift+ Tab, el foco debe estar en la pestaña activa.

Primero, creemos la función que muestra el panel.

const showActivePanel = (element) = { const selectedId = element.target.id; TABPANELS.forEach((e) = { e.hidden = "true"; }); const activePanel = document.querySelector( `[aria-labelledby="${selectedId}"]` ); activePanel.removeAttribute("hidden");};

Lo que estamos haciendo aquí es verificar que idla pestaña esté presionada, luego ocultar todos los paneles de pestañas y luego buscar el panel de pestañas que queremos activar. Sabremos que es la pestaña porque tiene el atributo aria-labelledbyy usa el mismo valor que el de la pestaña id. Luego lo mostramos eliminando el atributo hidden.

Ahora necesitamos crear una función para cambiar los atributos:

const handleSelectedTab = (element) = { const selectedId = element.target.id; TABS.forEach((e) = { const id = e.getAttribute("id"); if (id === selectedId) { e.removeAttribute("tabindex", "0"); e.setAttribute("aria-selected", "true"); } else { e.setAttribute("tabindex", "-1"); e.setAttribute("aria-selected", "false"); } });};

Lo que estamos haciendo aquí es, nuevamente, verificar el idatributo y luego mirar cada pestaña. Comprobaremos si esta pestaña idse corresponde con la del elemento presionado id.

Si es el caso, haremos que se pueda tabular mediante el teclado eliminando el atributo tabindex(porque es un button, por lo que se puede tabular mediante el teclado de forma predeterminada) o agregando el atributo tabindex="0". Además, agregaremos un indicador para los usuarios de lectores de pantalla de que esta es la pestaña activa agregando el atributo aria-selected="true".

Si no corresponde, tabindexy aria-selectedse establecerá en -1y false, respectivamente.

Ahora, todo lo que necesitamos hacer es agregar un clickdetector de eventos a cada pestaña para manejar ambas funciones.

TABS.forEach((element) = { element.addEventListener("click", (element) = { showActivePanel(element), handleSelectedTab(element); });});

¡Y eso es! Creamos la funcionalidad para que las pestañas funcionen, pero podemos hacer algo más si es necesario.

Activar pestaña en foco

¿Recuerdas lo que mencioné sobre el focusdetector de eventos? Debes tener cuidado al usarlo porque puede crear un cambio de contexto por accidente, pero tiene cierta utilidad, ¡y este componente es una oportunidad perfecta para usarlo!

De acuerdo con la Guía de prácticas de autoría (APG) de ARIA , podemos hacer que el contenido mostrado se muestre cuando te concentras en la pestaña. Este concepto a menudo se denomina enfoque de seguimiento y puede resultar útil para los usuarios de teclados y lectores de pantalla porque permite navegar más fácilmente por el contenido.

Sin embargo, es necesario tener un par de consideraciones al respecto:

Si mostrar el contenido significa hacer muchas peticiones y, por extensión, ralentizar la red, no es deseable que el contenido mostrado siga el enfoque.
Si cambia el diseño de manera significativa, puede considerarse un cambio de contexto. Eso depende del tipo de contenido que quieras mostrar, y hacer un cambio de contexto en el foco es un tema de accesibilidad, como expliqué anteriormente.

En este caso, la cantidad de contenido no supone un gran cambio ni en la red ni en el diseño, por lo que haré que el contenido mostrado siga el foco de las pestañas. Esta es una tarea muy sencilla con el focusdetector de eventos. Literalmente podemos copiar y pegar el detector de eventos que creamos y simplemente cambiarlo clicka focus.

TABS.forEach((element) = { element.addEventListener("click", (element) = { showActivePanel(element), handleSelectedTab(element); }); element.addEventListener("focus", (element) = { showActivePanel(element), handleSelectedTab(element); });});

¡Y ahí lo tienes! Ahora el contenido mostrado funcionará sin necesidad de hacer clic en la pestaña. Hacer eso o hacer que funcione solo con un clic depende de usted y, sorprendentemente, es una pregunta con muchos matices. Personalmente, me limitaría a hacer que se muestre cuando presionas la pestaña porque creo que la experiencia de cambiar el atributo aria-selectedsimplemente enfocándote en el elemento puede ser un poco confusa. Aún así, es sólo una hipótesis por mi parte, así que toma lo que digo con cautela y compruébalo siempre con los usuarios.

keydownOyentes de eventos adicionales

Volvamos al tema createKeyboardNavigationpor un momento. Hay un par de claves que podemos agregar. Podemos hacer que la tecla Homey Endlleve el foco del teclado a la primera y última pestaña, respectivamente. Esto es completamente opcional, así que está bien si no lo haces, pero solo para reiterar cómo keydownayuda un detector de eventos, lo haré.

Es una tarea muy fácil. Podemos crear otro par de ifdeclaraciones para comprobar si se están presionando las teclas Homey End, y como hemos almacenado la primera y la última pestaña en variables, podemos enfocarlas con el focus()método.

// Previous code of the createKeyboardNavigation functionelse if (e.key === "Home") { e.preventDefault(); firstTab.focus()} else if (e.key === "End") { e.preventDefault(); lastTab.focus()}

¡Y este es nuestro resultado!

Vea el Pen [Tab demo [bifurcado]](https://codepen.io/smashingmag/pen/YzvVXWw) de Cristian Diaz .

Con este código, hemos hecho que este componente sea accesible para usuarios de teclados y lectores de pantalla. Esto muestra cuán útiles son los conceptos básicos del keydowndetector de eventos, el focus()método y los cambios que podemos realizar setAttributepara manipular componentes complejos. Veamos uno más, uno muy complicado, y cómo el inertatributo puede ayudarnos a manejar esta tarea fácilmente.

modales

Modalidad del sistema de diseño de carbono. ( Vista previa grande )

Los modales son un patrón bastante complejo cuando hablamos de accesibilidad del teclado, así que comencemos con una tarea sencilla: abrir y cerrar el modal.

De hecho, es fácil, pero debes tener algo en cuenta: es muy probable que el botón abra el modal y el modal esté lejos en el DOM. Por lo tanto, debe administrar el foco mediante programación cuando administra este componente. Hay un pequeño inconveniente aquí: es necesario almacenar qué elemento abrió el modal para que podamos devolver el foco del teclado a este elemento en el momento en q

Tal vez te puede interesar:

Una guía para la accesibilidad del teclado: JavaScript (Parte 2)

Una guía para la accesibilidad del teclado: JavaScript (Parte 2)

keydownEventoblurEventoOtros oyentes de eventos (y por qué es posible que no los necesite)focus()MétodoCambiar atributos HTML con JavaScriptConsejos de alter

programar

es

https://aprendeprogramando.es/static/images/programar-una-guia-para-la-accesibilidad-del-teclado-javascript-parte-2-1161-0.jpg

2024-11-27

Una guía para la accesibilidad del teclado: JavaScript (Parte 2) — Una guía para la accesibilidad del teclado: JavaScript (Parte 2)

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

Update cookies preferences