La integración de la accesibilidad en sus aplicaciones web ahora habría de ser una segunda naturaleza conforme navegamos por la tercera década del siglo veintiuno. Uno de los componentes clave de la accesibilidad es la navegación por teclado, que deja a los usuarios que tienen contrariedades para emplear un mouse navegar por su aplicación. Desafortunadamente, asegurar que todos y cada uno de los elementos interactivos sean alcanzables a través del teclado es una labor que los desarrolladores web pasan por alto con demasiada frecuencia. Un enorme ejemplo de una mala administración del enfoque es no restituir el enfoque al activador al cerrar un diálogo modal. Aun una aplicación creada con un marco como Angular no es inmune a semejantes descuidos. Últimamente trabajé en un fallo en el que el desarrollador deshabilitó el activador tras hacer click en él, rompiendo el manejo de enfoque integrado del control. Si precisa respaldar el enfoque en su aplicación, ¡este tutorial de desarrollo web le enseñará de qué manera hacerlo de la forma más simple!
¿Busca aprender desarrollo web en formato de lección o clase? Consulte nuestro tutorial que cuenta ciertos mejores cursos on-line para aprender HTML.
Propiedad document.activeElement de JavaScript
Es posible que haya oído charlar de la documento.elementoactivo propiedad, ya que ha existido por un tiempo, mas caso de que no esté bien familiarizado, el documento.elementoactivo La propiedad devuelve el factor HTML de destino actual.
Para darle una idea de de qué manera marcha, acá hay un código (asistido por jQuery), que rastrea el enfoque conforme hace click en diferentes elementos de la página:
$(documento).ready(function(){ $(this).click(function() ); });
Dado que los acontecimientos de click fluyen desde el factor original, podemos atraparlos en el nivel del documento. En la función enlazada, conseguimos una referencia al elemento enfocado de la documento.elementoactivo property e imprime su nombre y género de etiqueta en la consola. Acá hay una salida de ejemplo:
que es excelente documento.elementoactivo es que los programadores no precisan ningún género de detector de acontecimientos de estilo perceptible o supervisor de subscripción para efectuar un seguimiento del elemento de destino; puedes revisar el elemento activo propiedad siempre y cuando necesite saber qué elemento tiene el foco hoy día.
Lirio: Herramientas de administración de proyectos para desarrolladores web
Enfocable vs. Elementos tabulados en JavaScript
Ahora sería un buen instante para cubrir la diferencia entre elementos enfocables y tabulables. Ciertos elementos se pueden enfocar de forma nativa, al paso que otros requieren que establezca explícitamente un índice de tabulación. En todo caso, el factor ha de estar perceptible para ser enfocable.
Los controles de formulario, como entrada, selección, área de texto y botón, se pueden enfocar si no están deshabilitados, de la misma manera que los objetos. Otros elementos, como anclas, son enfocables si tienen un href Dónde índice de pestañas atributo. Mientras, los elementos de área se pueden desarrollar si están en un mapa con nombre, tienen un href atributo, y hay una imagen perceptible utilizando el mapa. Otros elementos son enfocables basándose solamente en su índice de pestañas atributo y visibilidad. Elementos con negativo índice de pestañas diríase que son enfocables, mas no tabulables.
Y ahora las buenas noticias; la elemento activo La propiedad no solo identificará elementos de forma tradicional enfocables, como campos de formulario y links, sino más bien asimismo cualquier elemento con un cero o un positivo. índice de tabulación valor: en otras palabras, cualquier elemento seleccionable, ya sea que se pueda tabular o no.
Comprobando que un factor ya tiene foco en JavaScript
A veces, los desarrolladores web precisan establecer el enfoque a través de programación a fin de que no se pierda. No hay nada de malo en eso, mas posiblemente desee contrastar que ningún otro elemento ya tenga el foco ya antes de configurarlo. En caso contrario, corre el peligro de mudar el enfoque, lo que incordiará al usuario sin fin.
En el código precedente se da una sugerencia esencial para determinar si un factor está hoy día enfocado o no. Si hace click en algún sitio del documento que no esté ocupado por un control de formulario, va a ver el resultado «CUERPO N/A“. es por el hecho de que el documento.cuerpo retiene el foco mientras que esté en esta página. Con eso en psique, refactoricemos nuestra función de devolución de llamada para imprimir un mensaje diferente cuando ningún elemento de formulario tenga el foco:
$(documento).ready(function(){ $(this).click(function() { var activeElement = document.activeElement; var output = activeElement === document.body ? «Ningún elemento tiene foco». : activeElement. tagName + ‘, ‘ + activeElement.type; console.log(salida); }); });
Aquí hay una salida de muestra con nuestro nuevo mensaje:
Comprobación de un factor concreto para el foco en JavaScript
A veces, no quiere saber qué elemento tiene el foco hoy día, solo si un factor en particular lo tiene o no. Para estas situaciones, sencillamente puede cotejar el elemento activo contra el en cuestión, de la misma manera que hicimos previamente con el documento.cuerpo:
// elemento falso var myElement = document.getElementById(‘myElement’); // revisar foco var isFocused = (document.activeElement === myElement);
Otras veces, los programadores pueden estar interesados en revisar si un factor no tiene hoy día el foco. Por servirnos de un ejemplo, un desarrollador podría estimar saber si un factor no tiene foco ya antes de configurarlo a través de programación. El próximo fragmento de código muestra de qué manera hacerlo:
var elementoactivo = documento.elementoactivo; var myElement = document.getElementById(‘mi-elemento’); if (activeElement !== myElement) { myElement.focus(); });
Compruebe si el documento tiene foco en JavaScript
Aunque un factor con foco es siempre y en todo momento el factor activo en el documento, un factor activo no necesariamente tiene foco. Por servirnos de un ejemplo, un factor activo en una ventana emergente que no está en primer plano no tiene foco. En semejantes casos, asimismo deseará contrastar si todo el documento tiene el foco. Para esto, puede usar el un foco() procedimiento de documento interfaz. vuelve a booleano valor que señala si el documento o cualquier elemento en el documento tiene foco.
El siguiente código invoca documento.hasFocus() cada trescientos milisegundos y presenta un mensaje que muestra el resultado. Además de esto, asimismo cambia el tono de fondo de la página de blanca a gris toda vez que la página pierde el foco:
function checkPageFocus() { const log = document.getElementById(‘log’); if (document.hasFocus()) { log.textContent=»Este documento tiene foco.»; documento.cuerpo.estilo.fondo = ‘#fff’; } else { log.textContent=»Este documento no tiene foco.»; documento.cuerpo.estilo.fondo = ‘#ccc’; } } // Revisar el enfoque de la página cada trescientos milisegundos setInterval(checkPageFocus, trescientos);
Puede ver el código precedente en acción en la demostración de codepen. Allá se puede ver en acción haciendo click en el «Abrir una nueva ventanaUna vez que la nueva ventana recibe el foco, el tono de la página de activación y el mensaje cambiarán. Al cerrar la nueva ventana, se restauran cuando el foco vuelve al documento primordial.
Reflexiones finales sobre el enfoque de elementos en JavaScript
En este tutorial de JavaScript, aprendimos de qué manera determinar qué elemento tiene el foco, lo que es un factor vital en la administración del foco. En el proceso, asimismo cubrimos la diferencia entre elementos enfocables y tabulables, como asimismo de qué manera contrastar si todo el documento tiene el foco. Armado con este conocimiento, va a poder hacer que sus páginas y aplicaciones sean más alcanzables para aquellos que tienen contrariedades para emplear un mouse.
Obtenga más información sobre la programación de JavaScript y los tutoriales de desarrollo web.
