• Autor: Accessolutions, Frédéric Brugnot , Yannick Plassiard, Julien Cochuyt, André-Abush Clause
  • Versión actual: 2024.04.11 en desarrollo
  • Compatibilidad con NVDA: de 2021.1 en adelante
  • Descargar versión en desarrollo
  • Ver código fuente en GitHub

Copyright (C) 2015-2024 Accessolutions

Módulos web

Los módulos web permiten, interactivamente, crear scripts para NVDA para facilitar y personalizar la navegación por sitios web o aplicaciones web corporativas.

Creación de un módulo web

Sitúa el foco en una de las páginas del sitio web para el que quieres crear un módulo. Pulsa NVDA+w, y elige «Nuevo módulo web» en el menú. Se abrirá el diálogo «Nuevo módulo web».
En el campo «Nombre del módulo web», da un nombre significativo que identifique este sitio web (este nombre debe ajustarse a la sintaxis de nombres de archivo de Windows).
En la lista desplegable «URL», elige la parte de la URL común a todas las páginas del sitio deseado. Pulsa las flechas arriba y abajo para obtener los posibles subconjuntos de la URL actual. En la mayoría de casos, puedes usar la primera propuesta, ya que contiene sólo la primera parte de la URL hasta la primera barra («/»).
En la lista desplegable «Título de ventana», puedes introducir parte del título de la ventana del navegador. Usa sólo este parámetro si la coincidencia de URL no es capaz de identificar el sitio. En la mayoría de casos, se debería dejar este campo vacío.
Pulsa el botón «Aceptar» para crear el módulo. Se crea un archivo con extensión «.json» en la carpeta «webModule» dentro de la carpeta de usuario de NVDA.

Modificación de un módulo web

Sitúa el foco en una de las páginas del sitio web cuyo módulo quieres modificar. Pulsa NVDA+w, y elige «Editar módulo web» en el menú. Alternativamente, elige «Gestionar módulos web» en el menú. Se abrirá el diálogo «Gestor de módulos web».
Selecciona el módulo que quieres modificar o eliminar, y pulsa los botones «Editar» o «Borrar», respectivamente.

Reglas de un módulo

Un módulo está formado por un conjunto de reglas. Cada regla se usa para identificar un elemento concreto de una página web y actuar sobre él.
Hay varios tipos de reglas que permiten estructurar la navegación a lo largo de la aplicación web. Nos centraremos en el tipo de regla «marcador», que permite asignar atajos de teclado y acciones automáticas.

Creación de una regla

Para crear una regla, sitúa el cursor en modo exploración en la página web sobre el elemento para el que quieres crearla. Luego, pulsa NVDA+w. En el menú, elige «Nueva regla». Se abrirá una ventana mostrando varias categorías, con la categoría General resaltada.
En el campo «Tipo de regla», elige «Marcador».
En el campo «Nombre de regla», da un nombre a esta nueva regla. Este nombre se anunciará automáticamente cuando se pulse más adelante el atajo de teclado asignado a esta regla.

Criterios de filtrado

Desplázate a la categoría «Criterio». Pulsa el botón «Nuevo…» (o pulsa alt+n). Los siguientes campos se usan para definir el criterio que identifica al elemento al que se aplicará la regla. Se pueden indicar uno o varios criterios. En cada lista desplegable, al pulsar la flecha abajo, obtendrás propuestas de más a menos concretas para el elemento actual. Se aconseja normalmente elegir entre las primeras propuestas. Técnicamente, estas propuestas son atributos desde los ascendientes HTML hasta el elemento HTML actual.

Texto

En el campo «Texto», introduce una cadena de texto a buscar. Si la cadena empieza con el símbolo menor que («<"), la búsqueda localizará el elemento anterior. Esto es especialmente útil para encontrar un campo de texto cuya etiqueta está justo antes de él.

Rol

En la lista desplegable «Rol», selecciona uno de los roles propuestos para este elemento.

Etiqueta

En la lista desplegable «Etiqueta», selecciona la etiqueta HTML usada para este elemento. Ya que el concepto de rol y etiqueta muchas veces se solapan, se podría configurar uno u otro, pero rara vez ambos.

ID

En la lista desplegable «ID», selecciona una de las cadenas que más identifique de forma concreta el elemento, si la hay.

Clase

En la lista desplegable «Clase», elige una cadena que identifique de la forma más concreta posible el elemento, si la hay.
Al igual que con los nombres de archivo, las cadenas en los campos «ID» y «Clase» pueden contener un asterisco («*») para coincidir con una subcadena.

SRC

El campo «SRC» sólo es útil en elementos de imagen con un nombre de archivo o una URL como origen.

Índice

Si varios elementos encajan en el criterio de la regla, este campo establece el índice del elemento que se busca.
Una vez se han configurado los criterios, se puede pulsar la tecla intro o el botón «Aceptar» para cerrar el diálogo.

Atajos de teclado
  1. Desplázate a la categoría «Acciones».
  2. Pulsa el botón «Añadir…» (o pulsa alt+a).
  3. Pulsa el atajo de teclado que quieres asignar.
  4. Empareja una acción. Las acciones disponibles son:
    • «Moverse a»: desplaza el cursor del modo exploración al elemento y lo anuncia.
    • «Verbalizar»: anuncia el texto del elemento, pero no mueve el cursor.
    • «Verbalizar todo»: mueve el cursor del modo exploración al elemento y empieza a leer el texto en voz alta todo el texto desde esa posición.
    • «Activar»: hace clic con el botón izquierdo del ratón en ese elemento.
    • «Mover ratón»: mueve el cursor del ratón sobre ese elemento, pero no hace clic.

Se pueden asignar varios atajos de teclado con distintas acciones a una misma regla.

Gestión especial de la acción «Verbalizar»:

Cuando se asigna un atajo de teclado a la acción «Verbalizar», realizará la acción «Mover a» si se pulsa rápidamente dos veces.
Esto se puede usar para definir un atajo que lea en voz alta un mensaje de error mostrado en una página web sin moverse, y poder moverse a él para una lectura más precisa con órdenes de voz o braille, todo con un sólo atajo para memorizar.

Acciones automáticas

Una acción automática no se asocia a un atajo de teclado. Se ejecuta automáticamente cuando se encuentra un elemento que coincide con el criterio de la regla en la página web. Se puede usar para mover el cursor automáticamente a una posición de inicio concreta cuando se carga la página. Alternativamente, también permite leer en voz alta un mensaje de error según aparece.
Precaución: aunque son muy útiles, las acciones automáticas pueden llevar a un comportamiento de navegación impredecible si no se definen con cuidado. Lo más probable es que la acción «Verbalizar» sea inofensiva. Las acciones «Mover a» y «Verbalizar todo» pueden terminar por bloquear al usuario. Se debería evitar la acción «Activar» a menos que sea estrictamente necesaria.

Propiedades
Varios resultados disponibles

Por defecto, si varios elementos de una página encajan en el criterio de una regla, sólo se tiene en cuenta el primero. Todas las demás coincidencias se ignoran. Si se marca esta casilla, se tienen en cuenta todas las coincidencias. Esto quiere decir que las teclas retroceso y avance página podrían moverse por todos los elementos que coincidan con la regla.
No obstante, esto no cambia el comportamiento del atajo de teclado asignado, que únicamente se aplica al primer elemento que coincide. Se aconseja marcar esta casilla para una regla que coincida con los resultados de búsqueda en una página. De lo contrario, sólo se identificará el primer resultado.

Activar modo foco

Esta casilla indica si se debería activar el modo foco automáticamente tras moverse al elemento. Por defecto, viene marcada cuando se crea una regla para un cuadro de edición.

Verbalizar nombre de regla

Esta casilla indica si se verbaliza el nombre de la regla al activarla. Viene marcada por defecto, y se puede desmarcar para evitar un anuncio doble cuando el nombre de la regla y el texto del elemento son parecidos.

Saltar con avance página

Esta casilla indica si el cursor debería detenerse en el elemento que coincida con la regla al pulsar las teclas retroceso página y avance página.

Mejores prácticas

Para que el usuario final de un módulo aprenda, entienda y recuerde fácilmente los atajos de teclado y la estructura de las páginas, se aconseja al desarrollador del módulo que siga, en la medida de lo posible, algunas recomendaciones.

Sé coherente al elegir atajos de teclado

El mismo atajo debería tener el mismo efecto en todas las páginas del sitio web. Por ejemplo, control+shift+p debería llevar a la barra principal de botones, sin importar la página.
Se puede definir cualquier atajo de teclado, pero se recomienda asignar control+shift+letras para prevenir en la medida de lo posible conflictos con otros usos existentes.

Define las zonas que estructuran una página

La mayoría de sitios web tienen un esqueleto común en todas sus páginas. Se sigue esta disposición para una comprensión visual inmediata, pero a veces puede ser difícil de entender con voz o braille.
Los atajos de teclado no sólo permiten al usuario moverse más deprisa, también le ayudan a comprender mejor la estructura de la página.
Por tanto, se recomienda usar siempre los mismos atajos para las zonas principales que componen un sitio web. Por ejemplo:

  • Control+shift+l: moverse al principio del contenido principal de la página.
  • Control+shift+e: moverse al primer cuadro de edición del formulario principal.
  • Control+shift+h: moverse al menú principal (no del navegador, sino del sitio web).
  • Control+shift+o: moverse a los títulos de las pestañas (en páginas con pestañas, no las pestañas del navegador).
  • Control+shift+b: moverse a la barra principal de botones (normalmente debajo del formulario principal).
  • Control+shift+a: moverse al control de navegación en árbol (con frecuencia mostrado en el lado izquierdo de la página).
  • Control+shift+f: moverse al campo principal de búsqueda, si lo hay, en modo foco.
  • Control+shift+m: anunciar un mensaje informativo o de error.
  • Control+intro: hacer clic en el botón de validación del formulario principal.

Esta lista, por supuesto, no es obligatoria ni está completa.

Manejo de mensajes de error e informativos

Los mensajes de error o informativos son con frecuencia bastante difíciles de detectar con lectores de pantalla cuando no se anuncian adecuadamente con ARIA. Se deberían mostrar al editar un campo o cuando se valida un formulario, y se debería configurar una acción automática que los anuncie tan pronto como se detecten.

Autor: José Manuel Delicado Alcolea

Ingeniero de software y máster en Ingeniería Informática por la Universidad Rey Juan Carlos. Me encanta todo lo relacionado con la informática, la accesibilidad y las nuevas tecnologías. Trabajo como consultor de accesibilidad.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.