Usar Axe Expert con Tecnología de Asistencia

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data
warning

La extensión axe Expert está oficialmente retirada. Lea más sobre esto en la página Reemplazo de axe Expert. Estas páginas serán eliminadas en julio de 2024. Envíe un correo electrónico a helpdesk@deque.com con cualquier pregunta o preocupación.

Deque Systems, Inc. considera NVDA/Windows como la plataforma principal para los usuarios de lectores de pantalla de la extensión axe Expert. Recomendamos usar NVDA o JAWS en Windows, y VoiceOver en Mac.

Antes de comenzar:

Por favor, vea Informe de conformidad de accesibilidad voluntaria para axe Expert Extension.pdf para revisar el informe de conformidad de accesibilidad voluntaria de Deque para axe Expert Extension.

Usar la extensión axe Expert para Google Chrome con NVDA

Referencia de atajos de teclado de Chrome DevTools:

Antes de comenzar: Google ha actualizado recientemente la Guía del usuario de herramientas de desarrollo de Chrome y los materiales de referencia web. Para obtener atajos de teclado aplicables en general al usar axe Expert Extension en Google Chrome, consulte Referencia de atajos de teclado - Google Developers Chrome DevTools.

Las siguientes instrucciones explican generalmente cómo usar la extensión axe Expert en Google Chrome con lectores de pantalla basados en Windows, incluido NVDA. Se proporcionan instrucciones para instalar, iniciar, navegar por la interfaz de usuario, ajustar configuraciones, realizar un análisis de accesibilidad y exportar resultados. Esta documentación no incluye instrucciones para trabajar con la funcionalidad SimulAT o Scripting de axe Expert Extension en NVDA, ni las instrucciones contienen el nivel de detalle involucrado en el resto de esta guía del usuario. La documentación incluida aquí solo sirve como guía de inicio rápido para los usuarios del software lector de pantalla NVDA.

En este tema:

Instalar la extensión axe Expert

Instalar la extensión axe Expert en las herramientas de desarrollo de Google Chrome es ligeramente diferente a instalar la extensión axe Expert de Deque para Mozilla Firefox, la cual tiene un proceso de instalación diferente para los usuarios de axe Monitor (quienes usan un enlace de instalación desde la aplicación), al que es para los usuarios de la extensión axe Expert (que descargan un archivo .xpi de un repositorio primero).

Importante

Las siguientes instrucciones se proporcionan solo como un ejemplo para darte una idea del proceso de instalación. Los pasos específicos del proceso pueden diferir según los requisitos únicos de seguridad y tipo/versión de tu navegador. Por ejemplo, dependiendo de tu organización, podrías necesitar cargar una desempaquetado extensión con el modo Desarrollador habilitado. Consulta a tu administración para obtener instrucciones específicas de instalación. La práctica recomendada por Deque es que todos los clientes trabajen con su Gerente de Compromiso de Deque o con el Servicio de Ayuda de Deque para obtener la versión correcta y los archivos de instalación con la licencia adecuada.

Desde la página de Extensiones de Chrome Web Store

La forma más fácil de instalar la extensión axe Expert es a través de un enlace directo a la página de extensiones de Google Chrome en Chrome Web Store. Si alguna vez has instalado una extensión del navegador Google Chrome antes, el proceso es el mismo. Sin embargo, la extensión axe Expert generalmente no es buscable en Chrome Web Store, por lo que se requiere un enlace directo:

Enlace a axe Expert en Chromestore.

Para obtener instrucciones completas de instalación utilizando el enlace proporcionado, consulta el tema Descargar e instalar en la sección Primeros Pasos de esta guía.

Desde un Enlace de Instalación

El archivo de instalación comprimido .crx puede accederse directamente desde un enlace en el menú de la barra lateral derecha de axe Monitor, lo que te permite iniciar el proceso de instalación desde el navegador Google Chrome.

Para instalar la extensión axe Expert desde un enlace de instalación (axe Monitor):

  1. Navega a la sección de Enlaces Rápidos en la pantalla de inicio de axe Monitor usando el navegador Chrome.
  2. Selecciona Descargar extensión axe Expert 3.5.

Cuando selecciones el enlace de instalación de la extensión axe Expert, se mostrará un mensaje preguntando si deseas instalar la extensión axe Expert.

  1. Presiona la pestaña y selecciona el botón Cargar Extensión Desempaquetada... (o presiona Alt_I).

Desde un Archivo CRX

La extensión de Google Chrome empaquetada se ofrece como un archivo comprimido con la extensión de archivo .crx, y ofrece una clave privada para que nunca tengas que preocuparte por actualizar manualmente la extensión, ya que esto se maneja automáticamente.

Para instalar la extensión axe Expert desde un archivo .crx (extensión axe Expert):

  1. Contacta a tu Gerente de Compromiso de Deque o al Servicio de Ayuda de Deque para obtener el instalador del archivo CRX necesario.
  2. Navega al archivo .crx descargado en tu computadora.
  3. Presiona Enter.

Verificar instalación

La instalación debería tomar solo unos segundos. Cuando la instalación se complete, se reproducirá un mensaje que indicará que la extensión axe Expert se instaló correctamente. Siempre puedes verificar el éxito de la instalación intentando abrir la extensión axe Expert en las herramientas de desarrollo de Google Chrome. Para más información, consulta Abrir la extensión axe Expert. Los siguientes pasos te guiarán en la verificación de la instalación a través de la navegación a la entrada de la extensión axe Expert en la página de extensiones de Google Chrome.

  1. En el campo de dirección (ubicación) de Google Chrome, escribe chrome://extensions/ y presiona Enter.

  2. Activa TAB tres veces para acceder a la lista de extensiones instaladas de Google Chrome.

  3. Presiona la tecla Down Arrow para localizar el elemento de la lista de la extensión axe Expert.

    Las extensiones de Google Chrome se muestran en orden ascendente y de instalación más reciente, por lo que debería ser el primer elemento de la lista.

  4. Escucha las opciones "desactivar, eliminar". Cuando escuches estas opciones anunciadas después de axe Expert, la extensión se instaló exitosamente.

Abre la extensión axe Expert en Google Chrome

La extensión axe Expert está instalada en la barra de pestañas de las herramientas de desarrollo de Chrome.

  1. Mantén presionado Ctrl+Shift+I para iniciar las herramientas de desarrollo de Chrome.
  2. Mantén presionado Ctrl\_\] hasta que escuches "axe Expert".

Cuando se instala por primera vez, y no existen otras extensiones que se integren con las herramientas de desarrollo de Google Chrome, la pestaña de axe Expert estará en el lado derecho de la barra de pestañas de herramientas.

  1. Presiona Enter para habilitar la pestaña de axe Expert en la ventana de herramientas de desarrollo.

La extensión axe Expert ahora está activa en la ventana de herramientas de desarrollo de Google Chrome y lista para usar.

Entender y navegar la interfaz de usuario de la extensión axe Expert

Selección del panel del menú principal

En el panel izquierdo de la extensión axe Expert, independientemente de qué panel esté actualmente seleccionado, tienes un menú desplegable principal que proporciona enlaces a cada uno de los cinco paneles principales dentro de la extensión axe Expert.

  1. Verifica la activación de la pestaña axe Expert presionando la tecla Tab para mover el enfoque al Menú Principal, que se lee como "Navegación Global".

    El marco se anuncia como marco "data/index".

    Pestaña predeterminada: El panel Analizar está activo de manera predeterminada cuando se inicia la extensión axe Expert. Usa la pestaña Analizar para realizar análisis de accesibilidad; es probable que sea la pestaña que utilices el 99.5% del tiempo. Usa el menú Options de la extensión axe Expert para seleccionar Settings y Sign in to axe Monitor.

  2. Mueva el foco al menú principal de navegación global de la extensión axe Expert y presione Entrar.

    El menú principal de la extensión axe Expert se abre y muestra cinco opciones de panel:

  3. Presione las teclas down arrow y up arrow para navegar por los elementos del menú principal de la extensión axe Expert. Presione Enter para seleccionar un elemento del menú.

El menú se cierra y el lector de pantalla anuncia "botón colapsado", seguido del nombre del elemento del menú seleccionado.

Menú de contexto específico del panel (menú Analizar)

Acceda a controles adicionales específicos del panel y enlaces a paneles asociados y funcionalidad relacionada en otros paneles para el panel seleccionado mediante el menú desplegable del botón de elipsis verticales en la barra superior del panel de contenido derecho en el panel de Analizar. Este menú desplegable a veces se denomina informalmente como un "menú de tres puntos".

Use el menú de contexto del panel Analizar:
  • Tab desde el botón Analyze en el panel Analyze para mover el foco a un menú de contexto que se anuncia como el main landmark Analyze google menu button collapsed.
  • Presione Enter para mostrar los elementos del menú de contexto de Analizar.
  • Arrow down o arriba para resaltar un elemento del menú y presione Enter para seleccionar el elemento del menú actualmente resaltado.

Cada panel dentro de la extensión axe Expert se compone de dos a tres subpaneles de información. Los subpaneles también contienen secciones de información identificadas con encabezados.

Cambiar de un panel a otro

  • En el modo de exploración, presione Flecha arriba o Flecha abajo para seleccionar el panel que desea habilitar y presione Entrar.
  • En el modo de formularios, tabule al panel activo y luego use las teclas de flecha (flecha derecha o flecha izquierda) para cambiar a otros paneles (no es necesario presionar Entrar).

Para forzar a NVDA a volver al modo de exploración, presione la tecla NVDA y la barra espaciadora después de trabajar en el modo de formularios.

Diseño del teclado y modo de formularios

Diseño del teclado NVDA: Presione la tecla Esc o la tecla NVDA y la barra espaciadora para salir del modo de formularios en NVDA. La tecla NVDA es la tecla insert, a menos que la cambie a Caps Lock, lo cual puede hacer en el menú de configuración de NVDA.

Seleccionar un conjunto de reglas

Es posible que desee ajustar la opción del conjunto de reglas en el panel de Reglas. El panel de Reglas contiene casillas de verificación con el título Conjunto de reglas, en el que se pueden encontrar tres conjuntos de reglas. Las reglas de WCAG 2.0 AA están activas de forma predeterminada. Usar un conjunto de reglas diferente al predeterminado de WCAG 2.0 AA implica hacer ajustes opcionales en la pestaña de Reglas.

Puede realizar un análisis sin conexión utilizando uno de los conjuntos de reglas estándar de la extensión axe Expert sin conectarse a un servidor axe Monitor, o puede usar su propio conjunto de reglas personalizado.

Estándar predeterminado: Si utiliza la extensión axe Expert tal como se entrega, realizará un análisis WCAG 2.1 AA usando el conjunto de reglas predeterminado WCAG 2.1 AA.

Seleccionar un conjunto de reglas:

  1. Presione R en NVDA.

La casilla de verificación WCAG 2.1 nivel AA está marcada de forma predeterminada. Este es un conjunto de reglas estándar que se incluye con la extensión axe Expert. El conjunto de reglas predeterminado se utiliza hasta que le indique a la extensión axe Expert que use uno diferente. No puede eliminar conjuntos de reglas que se incluyen como parte de la extensión axe Expert.

  1. Seleccione un conjunto de reglas a través de la casilla de verificación asociada.

No es necesaria una confirmación adicional.

Configuración: Conexión al servidor, selección de proyectos y alcance

Lo primero que notará en el panel de Configuración es un conjunto de campos de formulario que le permiten conectar la extensión axe Expert a un servidor axe Monitor. Después de iniciar sesión en axe Monitor, se muestra un menú de selección de proyectos con botón. Se muestran dos nuevas secciones cuando selecciona un proyecto: Descargar problemas y Alcance.

Es posible que desee conectarse a su servidor axe Monitor y seleccionar un proyecto para habilitar la descarga y carga de resultados de análisis. Si la extensión axe Expert no está conectada a un servidor axe Monitor, el menú desplegable se anuncia como "sin conexión sin proyecto" o "clicable sin conexión sin proyecto clicable", y la funcionalidad de selección de proyectos se anuncia como "no disponible". Para obtener detalles completos, vea Iniciar sesión en axe Monitor y Seleccionar un proyecto de axe Monitor respectivamente.

Antes de usar el panel de Análisis para analizar una página web, es posible que desee ajustar las opciones en la sección de Alcance del panel de Configuración para refinar lo que se va a focalizar o ignorar. Para obtener detalles completos, vea Definiciones de alcance.

Opciones de Grabación de Eventos

El panel de Opciones de Grabación de Scripts al que se accede a través del enlace Opciones en el panel de la pestaña Scripts tiene una sección llamada Eventos para Capturar que contiene casillas de verificación donde puede configurar qué eventos grabar o ignorar al grabar scripts. Para más información, consulte Seleccionar Eventos para Capturar.

Analizar una Página para Detectar Violaciones de Reglas de Accesibilidad

  1. Abra la página que desea probar en Chrome.

  2. Abra las DevTools de Chrome (Ctrl_Shift_I) y seleccione la pestaña axe Expert.

    Consulte Abrir Extensión axe Expert para más información.

  3. Ubique el botón ANALIZAR o el enlace Ejecutar de nuevo si está reanalizando una página en el panel de Análisis de la extensión axe Expert (no importa cuál seleccione, ambos realizan la misma función).

  4. El botón Analizar.

La etiqueta del botón Analizar cambia para mostrar analizando durante un escaneo.

Sabe que el escaneo ha terminado cuando puede desplazarse con flechas o tabulador lejos del botón Analizar.

Cuando No Se Encuentran Violaciones de Accesibilidad

Si no se encuentran violaciones de accesibilidad, la línea después del botón de carga dice: ¡Felicitaciones! No se encontraron violaciones de accesibilidad. Ahora debe realizar pruebas manuales usando tecnologías de asistencia como NVDA, VoiceOver y JAWS.

Trabajar con Resultados de Análisis

Botón de exportación y conteo de violaciones: Si se descubrieron uno o más errores, use la quinta opción de enlace, Export, en el menú del panel Analyze para exportar los resultados a un archivo CSV.

Enlaces Download y Upload: El menú del panel Analyze también incluye elementos para descargar... y cargar.... Estos elementos se anuncian como "deshabilitados" cuando no están conectados a un servidor axe Monitor. Para más información, consulte Cargar Resultados del Análisis y Descargar un script.

Analizar resultados de la extensión axe Expert de dos maneras:

  • Exportar los resultados a un programa de hojas de cálculo para un análisis más detallado.
  • Revisar los resultados dentro del panel de Análisis.

Exportar Resultados

Si necesita trabajar con los resultados del análisis en un programa de hojas de cálculo como Microsoft Excel, permitiendo ordenar y otras manipulaciones de datos, seleccione Export del menú Analyze de la extensión axe Expert para descargar un archivo de valores separados por comas (CSV). Trabajar con resultados exportados es particularmente útil para los usuarios de lectores de pantalla para facilitar la navegación sencilla entre violaciones cuando los resultados incluyen múltiples violaciones de múltiples reglas.

Exportar resultados a un archivo CSV:

  1. Seleccione Export en el menú desplegable específico del panel Analyze.

Se muestra un cuadro de diálogo típico para Guardar Archivo.

  1. Seleccione una carpeta conveniente, proporcione un nombre descriptivo para el archivo, seleccione Save.

    Asegúrese de que la carpeta deseada esté seleccionada utilizando shift+tabbing para el árbol de carpetas la primera vez que abra el cuadro de diálogo Guardar Archivo usando el enlace de Exportación. La extensión axe Expert guarda los resultados exportados en la ubicación de descarga predeterminada configurada en la configuración de su navegador Chrome. Una vez que se selecciona una carpeta, la extensión axe Expert recuerda su selección para futuras exportaciones.

Revisar Resultados del Análisis en la Extensión axe Expert

Todos los resultados del análisis de la extensión axe Expert se muestran bajo el encabezado Violaciones encontradas. Por lo general, este es el único encabezado en el panel Analyze, por lo que usar h debería llevarlo directamente allí.

Revisar violaciones de reglas:

  • Presione la flecha hacia arriba dos veces para ver la línea donde se informa el número de violaciones encontradas.

    La extensión axe Expert muestra una lista ordenada de pruebas que identificaron violaciones, junto con el número de violaciones por cada regla. Los nombres de las reglas en la lista son enlaces, que al mostrarse, muestran una lista de todas las violaciones para esa regla.

    Una lista típica de violaciones podría verse así:

lista de x elementos

  1. Enlace: Los elementos deben tener suficiente contraste de color x violaciones (donde x es el número de violaciones).
  2. Enlace: El valor del atributo ID debe ser único violaciones...

Examinar a fondo las violaciones individuales:

  • Seleccione el enlace de la regla en la lista.

Cuando se selecciona un enlace de regla, verá un panel que muestra la primera violación de la regla.

Resumen del Panel de Violaciones de Resultados de Análisis

Esta sección describe la información secuencial que se muestra a medida que se desplaza hacia abajo dentro de una violación de regla individual.

  • Mostrando una Violación Individual: Comience en la lista de reglas que produjeron violaciones (vea la sección anterior para una descripción y un ejemplo de cómo se ve la lista).

  • Navegación e Impacto de Múltiples Violaciones

  • Botón anterior: Al final de la lista verá un botón llamado anterior. El botón anterior está deshabilitado cuando visualiza la primera violación de la regla.

  • N.º de Violaciones Totales: Bajando con la flecha desde el botón Anterior para ver una línea que dice: „violación 1 de X“ donde X es el número total de violaciones específicas de la regla activa.

  • Impacto: Bajando más allá de la línea de N.º de Violaciones Totales se muestra la información de impacto relacionada con la violación. La línea de impacto contiene la calificación de impacto: menor, moderado, serio o crítico.

  • Next botón: Un botón de siguiente se muestra después de la información de impacto. El botón siguiente se anuncia como desactivado si estás revisando la última violación de una regla específica.

  • Description: Bajando con la flecha desde el botón siguiente se muestra una descripción de una línea de la regla violada junto con un enlace Más info. Por ejemplo, esta línea dirá „Asegura que el contraste entre los colores de primer plano y de fondo cumple con los umbrales de relación de contraste de WCAG 2 AA“ cuando se registra una violación de la regla de contraste de color.

  • More info enlace: Seleccione Más Info para revisar el contenido de Deque University que proporciona más contexto e información de fondo sobre la regla violada además de información detallada sobre cómo solucionarlo.

  • Applicable Ruleset (Standard) and Success Criteria: Una lista de dos elementos sigue al enlace Más info. El primer elemento de la lista enumera el conjunto de reglas activas utilizado durante el escaneo de análisis de la extensión axe Expert. WCAG 2.0 AA es el conjunto de reglas de la extensión axe Expert, anotado como „wcag2aa“. El segundo elemento de la lista especifica el criterio de éxito para la regla activa (por ejemplo, wcag143 para el criterio de éxito 1.4.3 de WCAG 2.0 - contraste de color).

  • Inspect and Highlight links: El enlace Inspeccionar resalta el elemento infractor en DevTools. El segundo enlace, Resaltar, destaca visualmente el elemento de la página web en la ventana principal del navegador Chrome.

  • Section Navigation: Varias cabeceras h2 adicionales representan secciones del panel de contenido dentro de una violación:

  • Target: El objetivo identifica un camino de selector CSS al elemento HTML infractor.

  • HTML: muestra un fragmento de marcado HTML que incluye el elemento infractor.

  • Summary: El resumen contiene una sección de arreglar cualquiera de las siguientes seguida de una lista de posibles soluciones. El diseño y la redacción exactos de una solución sugerida dependen de la violación específica. La lista de soluciones sugeridas es información esencial en cualquier informe o análisis, ya que generalmente ayuda a identificar el error exacto y a menudo proporciona la solución más sencilla.

Notas de Navegación de Múltiples Violaciones

Usar los botones Previous y Next

Use los botones previous y next para ir a la violación anterior/siguiente si el análisis registró múltiples violaciones de reglas. La línea de violación actualizada x de y se anuncia automáticamente por la mayoría de los lectores de pantalla al seleccionar los botones previous o next. Por ejemplo, si el panel muestra actualmente violación uno de diez y selecciona el botón next, NVDA anuncia automáticamente „violación dos de diez“. Los botones next y previous proporcionan el único medio de navegación a una violación de regla particular.

Para llegar a la violación ocho de diez para la regla x, haga clic en la regla x y luego haga clic next siete veces.

Sobre la última violación

Hacer clic en next cuando la última violación de una regla determinada se está mostrando no muestra automáticamente la primera violación de la siguiente regla. De hecho, el botón next está desactivado cuando se muestra la última violación de regla. Navegue de vuelta a la lista de reglas y seleccione la siguiente regla para inspección.

Revise todas las violaciones de accesibilidad para todas las reglas. Exporte el informe a un archivo CSV para revisar rápidamente todas las violaciones de reglas en un solo lugar.

Usar Reglas Personalizadas

El panel Rules es la cuarta selección en el menú principal. Si ha escrito un archivo JSON de reglas personalizadas para que la extensión axe Expert escanee, use el panel Rules para agregar su conjunto de reglas. Una vez agregado al panel Rules, puede seleccionar su conjunto de reglas desde la pestaña Rules. El panel Custom Ruleset contiene dos campos de formulario y un botón: Name for Custom Rules, Enter JSON, y SAVE Y USE RULESET.

Agregar reglas personalizadas

  1. Especifique un nombre para su conjunto de reglas personalizadas en el campo (Nombre para Reglas Personalizadas e Ingrese JSON).

Asegúrese de que el nombre contenga solo letras o números (no se permiten espacios, guiones u otros símbolos como parte del nombre del conjunto de reglas).

  1. Ingrese o pegue sus reglas JSON en el campo Enter JSON.

  2. Seleccione SAVE Y USE RULESET.

El panel Rules muestra un mensaje de éxito o error si especificó un nombre no válido o usó un JSON no válido. Puede ver el nombre de su conjunto de reglas en la sección de conjuntos de reglas personalizadas del menú de la barra lateral izquierda en el panel Reglas. Elimine un conjunto de reglas personalizadas seleccionando la casilla correspondiente y luego seleccionando Eliminar conjunto de reglas.

Is this page helpful?

Help us improve this page

Still need help?