Ax es un motor de pruebas de accesibilidad para sitios web y otras interfaces de usuario basadas en HTML. Es rápido, seguro, liviano y fue diseñado para integrarse perfectamente con cualquier entorno de prueba existente para que pueda automatizar las pruebas de accesibilidad junto con sus pruebas funcionales habituales.
Regístrese para recibir noticias de axe para obtener lo último sobre funciones de axe, lanzamientos futuros y eventos.
Axe-core tiene diferentes tipos de reglas, para WCAG 2.0, 2.1, 2.2 en el nivel A, AA y AAA, así como una serie de mejores prácticas que lo ayudan a identificar prácticas de accesibilidad comunes, como garantizar que cada página tenga un encabezado h1
y ayudar evitas "errores" en ARIA, como cuando un atributo ARIA que utilizaste será ignorado. La lista completa de reglas, nivel WCAG agrupado y mejores prácticas se puede encontrar en doc/rule-descriptions.md.
Con axe-core, puedes encontrar en promedio el 57% de los problemas WCAG automáticamente . Además, axe-core devolverá elementos como "incompletos" de los que axe-core no puede estar seguro y se necesita una revisión manual.
Para detectar errores en una fase más temprana del ciclo de desarrollo, recomendamos utilizar la extensión axe-linter vscode. Para mejorar aún más la cobertura de las pruebas, recomendamos las pruebas guiadas inteligentes en la extensión axe.
Primero descargue el paquete:
npm install axe-core --save-dev
Ahora incluye el archivo javascript en cada uno de tus iframes en tus aparatos o sistemas de prueba:
< script src =" node_modules/axe-core/axe.min.js " > script >
Ahora inserte llamadas en cada punto de sus pruebas donde una nueva parte de la interfaz de usuario se vuelve visible o expuesta:
axe
. run ( )
. then ( results => {
if ( results . violations . length ) {
throw new Error ( 'Accessibility issues found' ) ;
}
} )
. catch ( err => {
console . error ( 'Something bad happened:' , err . message ) ;
} ) ;
La web sólo puede convertirse en un espacio accesible e inclusivo si los desarrolladores están facultados para asumir la responsabilidad de las pruebas de accesibilidad y las prácticas de codificación accesibles.
Las pruebas de accesibilidad automatizadas ahorran mucho tiempo, no requieren experiencia especial y permiten a los equipos centrar recursos expertos en los problemas de accesibilidad que realmente los necesitan. Desafortunadamente, la mayoría de las herramientas de accesibilidad están diseñadas para ejecutarse en sitios y aplicaciones que han llegado al final del proceso de desarrollo y, a menudo, no brindan resultados claros o consistentes, lo que causa frustración y demoras justo cuando pensaba que su producto estaba listo para enviarse.
Axe se creó para reflejar cómo funciona realmente el desarrollo web. Funciona con todos los navegadores, herramientas y entornos de prueba modernos que un equipo de desarrollo podría utilizar. Con axe, las pruebas de accesibilidad se pueden realizar como parte de las pruebas unitarias, de integración, de navegador y cualquier otra prueba funcional que su equipo ya realice a diario. Incorporar pruebas de accesibilidad en el proceso de desarrollo inicial ahorra tiempo, recursos y todo tipo de frustraciones.
La API axe-core es totalmente compatible con los siguientes navegadores:
Soporte significa que corregiremos errores e intentaremos probar cada navegador con regularidad. Actualmente, solo Chrome y Firefox se prueban en cada solicitud de extracción.
Hay soporte limitado para JSDOM. Intentaremos hacer que todas las reglas sean compatibles con JSDOM, pero cuando esto no sea posible, recomendamos desactivar esas reglas. Actualmente se sabe que la regla color-contrast
no funciona con JSDOM.
Solo podemos admitir entornos donde las funciones sean compatibles de forma nativa o se completen correctamente. No admitimos la implementación obsoleta de Shadow DOM v0.
El paquete API axe-core consta de:
axe.js
: el archivo JavaScript que debe incluirse en su sitio web bajo prueba (API)axe.min.js
: una versión minimizada del archivo anterior Axe se puede construir usando su idioma local. Para hacerlo, se debe agregar un archivo de localización al directorio ./locales
. Este archivo debe nombrarse de la siguiente manera:
. Para compilar axe usando esta configuración regional, en lugar de la predeterminada, ejecute axe con el indicador --lang
, así:
grunt build --lang=nl
o equivalente:
npm run build -- --lang=nl
Esto creará una nueva compilación para axe, llamada axe.
y axe.
. Si desea compilar todas las versiones localizadas, simplemente pase --all-lang
en su lugar. Si desea crear varias versiones localizadas (pero no todas), puede pasar una lista de idiomas separados por comas al indicador --lang
, como --lang=nl,ja
.
Para crear una nueva traducción para axe, comience ejecutando grunt translate --lang=
. Esto creará un archivo json en el directorio ./locales
, con el texto en inglés predeterminado para que usted lo traduzca. Alternativamente, puedes copiar ./locales/_template.json
. Damos la bienvenida a cualquier localización para axe-core. Para obtener detalles sobre cómo contribuir, consulte la sección Contribuciones a continuación. Para obtener detalles sobre la sintaxis del mensaje, consulte Comprobar plantilla de mensaje.
Para actualizar un archivo de traducción existente, vuelva a ejecutar grunt translate --lang=
. Esto agregará nuevos mensajes usados en inglés y eliminará mensajes que no se usaron en inglés.
Además, la configuración regional se puede aplicar en tiempo de ejecución pasando un objeto locale
a axe.configure()
. El objeto de configuración regional debe tener la misma forma que las configuraciones regionales existentes en el directorio ./locales
. Por ejemplo:
axe . configure ( {
locale : {
lang : 'de' ,
rules : {
accesskeys : {
help : 'Der Wert des accesskey-Attributes muss einzigartig sein.'
}
// ...
} ,
checks : {
abstractrole : {
fail : 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
} ,
'aria-errormessage' : {
// Note: doT (https://github.com/olado/dot) templates are supported here.
fail : 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
}
// ...
}
}
} ) ;
Axe-core admite las siguientes configuraciones regionales. Tenga en cuenta que, dado que nuestra comunidad aporta las configuraciones regionales, no se garantiza que incluyan todas las traducciones necesarias en una versión.
Axe-core tiene una nueva versión menor cada 3 a 5 meses, que generalmente introduce nuevas reglas y características. Recomendamos programar tiempo para actualizar a estas versiones. Las actualizaciones de seguridad estarán disponibles para líneas de versiones menores de hasta 18 meses de antigüedad .
DEQUE, DEQUELABS, AXE® y AXE-CORE® son marcas comerciales de Deque Systems, Inc. El uso de las marcas comerciales de Deque debe realizarse de acuerdo con la política de marcas comerciales de Deque.
Consulte el soporte de ARIA de axe-core para obtener una lista completa de roles y atributos admitidos por ARIA por axe.
Lea la guía Propuesta de reglas para Axe-core
Lea la documentación sobre la arquitectura.
Lea la documentación sobre cómo contribuir
Lista de proyectos que utilizan axe-core
Gracias a Marat Dulin por su implementación css-selector-parser que se incluye para soporte de DOM oculto. Otro agradecimiento a los implementadores de Slick Parser por su contribución. Hemos utilizado algunos de sus algoritmos en nuestro código de soporte de DOM oculto. Gracias a Lea Verou y Chris Lilley por su biblioteca colorjs.io que hemos utilizado para convertir entre formatos de color.
Axe-core se distribuye bajo la licencia pública de Mozilla, versión 2.0. Viene con varias dependencias que se distribuyen según sus propios términos. (Ver LICENCIA-TERCEROS-PARTE.txt)