Press "Enter" to skip to content

¿Cómo usar aXe en Firefox haciendo uso del lector de pantalla NVDA?

Last updated on 08/07/2020

aXe & Firefox
aXe & Firefox

Esta guía es original del sitio de Deque y fue actualizada según las actualizaciones que han surgido en las nuevas versiones de Firefox y llevado al español. Para consultar el artículo original acceda al siguiente link: 

Instalar aXe en Firefox con NVDA

Descargar la extensión de aXe

  1. Acceder a https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/ en Firefox para instalar la extensión de aXe. Firefox abrirá el link en una nueva pestaña o ventana dependiendo de cómo esté configurado el navegador.
  2. Navegar y seleccionar la opción “Add to Firefox” en la página de la extensión de aXe.
  3. Firefox despliega una ventana emergente desde la barra de navegación informando los requerimientos y solicitando los permisos para continuar instalando la extensión en el navegador. Seleccione la opción Alt + A para otorgar los permisos y completar la instalación de la extensión de aXe en el navegador. NVDA anunciará “aXe ha sido añadido a Firefox” después de la instalación. Presione Alt + O para cerrar la ventana que muestra un diálogo de confirmación. Nota: Póngase en contacto con el administrador de seguridad o el administrador de software sino tiene suficientes permisos para instalar la extensión en el navegador de Firefox.

Chequeando la instalación de aXe

  1. Presione Alt+T+A para acceder a la página de gestión de extensión de Firefox.
  2. Presione NVDA+TAB para verificar la localización del foco. NVDA anunciará “Descargas menú control”. Seleccionar en la lista la opción “Complementos”. Se visualizará una página que incluye cuatro elementos: Recomendaciones, Extensiones, Temas, Plugins como opciones seleccionables. Utilice las teclas de flecha abajo y flecha arriba para navegar por las opciones listadas en la página. Selecciona la opción Extensiones y presione la tecla “Enter”.
  3. Presione TAB hasta encontrar la opción de búsqueda y a continuación se listan las extensiones instaladas que se encuentran habilitadas. Use las teclas flecha abajo y flecha arriba para explorar previamente las extensiones instaladas. las extensiones se listan alfabéticamente por lo que “aXe – Web Accessibility Testing” aparecerá cerca del inicio de la lista. Repetir los pasos del 1 al 3 en caso de que no encuentre la extensión de aXe en la lista de extensiones. 
  4. Cuando aXe es seleccionada, NVDA anunciará aXe – Web Accessibility Testing. Al presionar TAB nuevamente se accede a la opción “Más opciones”. Al seleccionar la opción “Más opciones” se despliega un menú con las opciones:
    1. Desactivar: Desactiva la extensión aXe en el navegador.
    2. Eliminar: Elimina la extensión aXe del navegador.
    3. Opciones: Permite seleccionar el idioma por defecto de la herramienta.
    4. Informe: Permite informar sobre algún problema que presente la extensión aXe al grupo de Mozilla.
    5. Administrar: Permite acceder a opciones de la extensión como detalles específicos, opciones y a la información relacionada a los permisos solicitados por la extensión. 
  5. Presione Ctrl + W para cerrar la página de Complementos de Firefox. 

Configuración de las preferencias de las herramientas de desarrollo para los usuarios que hacen uso de lectores de pantalla

Acerca de las herramientas para desarrolladores

Firefox agrupa varias herramientas de inspección que han sido incorporadas. NVDA anuncia las herramientas de inspección: Marco del panel de inspección, marco del panel DOM, marco del panel de consola, marco del editor de estilo, marco del panel de depuración, marco del panel de accesibilidad, etc. El número y el orden de las herramientas dependen de cómo se personalice la caja de herramientas para desarrolladores. Pulse Ctrl+'[‘ o Ctrl+’]’ para desplazar el enfoque entre los fotogramas disponibles en las herramientas de desarrollo.

Las herramientas de desarrollo de Firefox están acopladas a la parte inferior de la ventana del navegador de forma predeterminada. Se pueden mostrar las herramientas para desarrolladores en una ventana separada como una opción de pantalla fácil de leer. Los usuarios pueden saltar entre la ventana del navegador y la ventana de herramientas de desarrollo pulsando Alt+TAB. Los usuarios pueden personalizar aún más la apariencia y el contenido de la barra de herramientas para desarrolladores si lo desean.

Pasos únicos para configurar opciones fáciles de usar para el lector de pantalla

  1. Selecciona Herramientas>Desarrollador web en la barra de menú principal de Firefox. Nota: Otros métodos para iniciar o cerrar las herramientas de desarrollo de Firefox incluyen presionar F12 o Control+Shift+I. Utilice los mismos métodos abreviados de teclado para cerrar las herramientas de desarrollo.
  2. Pulse Flecha abajo para navegar hasta Inspector en el submenú Desarrollador web. Se lanza el panel de herramientas para desarrolladores y el enfoque de NVDA se desplaza a la ventana de herramientas para desarrolladores.
  3. Pulse TAB o Shift +TAB para mover el foco de NVDA a la barra de herramientas de desarrollador.
  4. Con el foco en la barra de herramientas de desarrollador, pulse Flecha derecha repetidamente para navegar hasta un botón que se lee como «Personalizar la herramienta de desarrollador y obtener el botón de ayuda, submenú colapsado» 

Nota: Si está trabajando en Windows, el botón situado directamente a la derecha del botón “Personalizar herramienta de desarrollo” cerrará la ventana de herramientas de desarrollo. Observe que las teclas de flecha izquierda y flecha derecha atraviesan todos los paneles disponibles dentro de las herramientas del desarrollador. La extensión de aXe se incluye en la barra de herramientas de desarrollador cuando se instala correctamente.

  1. Pulse Barra espaciadora para expandir el submenú Personalizar herramienta para desarrolladores, navegue hasta la opción Ventana independiente y selecciónela, y pulse Entrar para que las herramientas para desarrolladores aparezcan en una ventana independiente si lo desea.

Usar aXe en Firefox desde la herramienta de desarrollo

Acceder a aXe

  1. Con NVDA en marcha, ejecute Firefox.
  2. Abra la página web que se va a probar. Recuerde, axe prueba la página en el estado actual como se muestra. Si la página contiene un formulario, es útil generar algunos errores de entrada y probar el formulario. Por supuesto, la forma también puede y debe ser probada en su estado inicial. 
  3. Abra el submenú Desarrollador web en el menú Herramientas de Firefox.
  4. Pulse Flecha abajo para Inspector y pulse Entrar. Alternativamente, si eres usuario de un lector de pantalla con Firefox61+, puedes encontrar Accesibilidad en el submenú. En su lugar, seleccione Accesibilidad y pulse Intro.
  5. Las herramientas para desarrolladores respetarán sus preferencias y se iniciarán en una ventana aparte.
  6. Pulse TAB o SHIFT+TAB una o dos veces para mover el foco de NVDA a la barra de herramientas para desarrolladores.
  7. Utilice las teclas de flecha Derecha e Izquierda para navegar por el enfoque hasta aXe. NVDA anuncia el «botón de cambio de aXe no pulsado Dev Panel Tool añadido por el complemento de aXe». Pulse Intro para activar aXe. El foco de Firefox se mueve al panel Axe dentro del marco de herramientas para desarrolladores. ¡Has activado con éxito las herramientas Axe en las herramientas para desarrolladores de Firefox!

Orientación hacia la interfaz de usuario de aXe y la ejecución del análisis

NVDA anuncia, «herramientas para desarrolladores» y el título y la URL de la página web correspondiente desde la que se lanzaron las herramientas para desarrolladores. Pulse la tecla NVDA+T para confirmar el título de la página web y la URL en cualquier momento.

El panel axe Tool está marcado con puntos de referencia (banner, global, navegación temática y contenido principal), encabezados y listas para facilitar la navegación. Justo al principio, en la región de los banners, NVDA anuncia el gráfico de axe Developer Tool.

La primera pestaña que se detiene en la parte superior del panel de herramientas de axe es el menú Información de versión de axe. 

Luego viene el importante botón Analizar. Al activar el botón Analizar se inicia la prueba de accesibilidad de la página. El análisis toma tiempo extra en páginas más grandes. ¡Por favor, tenga paciencia! 

NVDA anuncia un botón de menú que contiene el recuento total de violaciones de accesibilidad en el estado colapsado al completar el análisis, por ejemplo, Violaciones encontradas: 17. Presione la flecha hacia abajo o la tecla TAB para expandir otras opciones de visualización, incluyendo:  todos los errores en inglés “All Issues”,violaciones en inglés “violations”, Necesitan revisión en inglés “needs review”, Rechazado en inglés “rejected”, mejores prácticas en inglés “best practices”. 

El siguiente elemento es el botón Ejecutar de nuevo en inglés “Run again”. Utilice este botón para volver a ejecutar el análisis si cambia a la ventana del navegador y cambia el estado de la página (por ejemplo, si genera errores de entrada para un formulario) o carga una página Web diferente. Luego pulsa Alt+Tab para volver a la ventana de herramientas de desarrollo de Firefox y activa el botón Ejecutar de nuevo en aXe.

Cuando el análisis no encuentra errores, aparece el contenido principal de axe:

¡Felicitaciones! No se han encontrado violaciones de accesibilidad en el estado actual de la página. Ahora debería volver a ejecutar aXe en cada estado de la página (incluyendo modales, submenús, mensajes de error y más). También debe realizar pruebas manuales utilizando tecnologías de asistencia como NVDA, VoiceOver y JAWS.

Revisar los resultados de los análisis y los detalles específicos de la cuestión

Lista de violaciones por tipo

Justo después del enlace Ejecutar de nuevo hay una lista de enlaces bajo el encabezado Problemas de nivel 2 que contiene un elemento de la lista para cada tipo de violación de accesibilidad detectada en la página. Cada elemento de la lista también incluye el número total de ejemplares bajo un encabezamiento de nivel 2.

Contenido de la muestra:

Los botones deben tener un texto discernible 5 – elemento actual

Los elementos deben tener suficiente contraste de color 5

Las imágenes deben tener texto alternativo 3

Los elementos del formulario deben tener etiquetas 4

Emitir detalles específicos en el contenido principal

A continuación de esta sección de navegación se encuentra el contenido principal con un nivel 1 titulado Analizar.

El tipo de violación actualmente seleccionado de la lista, por ejemplo, Botones deben tener texto discernible, está marcado como encabezado del primer nivel 2. Un conjunto de botones – Anterior, Siguiente y Último se presentan para la navegación a través del conjunto de temas que coinciden con el tipo de error actualmente seleccionado.

Los botones Anterior y Primero están desactivados (anunciados como no disponibles) cuando el foco está en el primer número. Del mismo modo, los botones Siguiente y Último están desactivados cuando se desplaza el enfoque a la última edición.

Existen dos enlaces para cada número:

Inspeccionar nodo

El enlace Inspeccionar nodo mueve el foco del elemento actual al elemento en el Inspector de herramientas de desarrollador.

Destacar

El enlace Resaltar permite el modo de resaltado visual del elemento del problema actual en toda la ventana del navegador. Cuando el modo de resaltado está activado, el texto del enlace cambia a Detener resaltado. Seleccione Detener Resaltado para desactivar el resaltado visual. El texto del enlace vuelve a Resaltar cuando el resultado visual está desactivado.

Detalles para el enfoque de un error específico; por ejemplo, «error 2 de 5. Los botones deben tener texto discernible» se presentan bajo los siguientes encabezados de nivel 2:

  • Descripción del problema: Contiene un enlace de Aprenda más sobre el contenido que te redirige a la página de la Universidad de Deque donde se informa una detallada explicación de la violación detectada. 
  • Ubicación del elemento: Muestra el selector de elementos del problema actualmente seleccionado o XPath para identificar programáticamente el elemento específico de la página.
  • Fuente del elemento: Contiene el código fuente del elemento fallido.
  • Para resolver esta violación, debe seccionar: Enumera varias opciones disponibles para resolver la barrera de accesibilidad. Se debe implementar la opción de solución más apropiada para el contexto.
  • Etiquetas de emisión: Cita el criterio de éxito estándar aplicable de WCAG y la Sección 508. Por ejemplo, «WCAG412» hace referencia a WCAG 2.0 Criterio de éxito 4.1.2.

Este es el final de los resultados del análisis. Un lector de pantalla puede pulsar Shift +B para volver al panel de navegación y continuar navegando por las instancias del tipo de violación actual utilizando los botones Anterior y Siguiente. Presione Shift +L para acceder a la lista principal de infracciones que se encuentra bajo el encabezado Cuestiones.

Nota: Este manual está orientado a los usuarios de NVDA; sin embargo, los mismos comandos de teclado funcionarán para los usuarios de lectores de pantalla JAWS.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Close Bitnami banner
Bitnami