Comenzar a Desarrollar con Axe DevTools Linter

Este artículo describe cómo comenzar a usar los servicios REST API proporcionados por la edición local de Axe DevTools Linter o Axe DevTools Linter SaaS. Los servicios son proporcionados por endpoints REST, por lo que necesitas experiencia con una herramienta REST como Postman, CocoaRestClient o la extensión REST Client de VS Code. También puedes acceder a los servicios con un lenguaje de programación como Python.

Las diferencias entre las dos ediciones de Axe DevTools Linter (Axe DevTools Linter Saas vs. el servidor local) son que la oferta SaaS requiere autorización mediante una API con cada solicitud de linter (el endpoint /lint-source).

Primeros Pasos

Si estás usando la edición SaaS del servidor Axe DevTools Linter, primero necesitas obtener una clave API. Puedes encontrar los pasos necesarios para obtener la clave en Obtener una Clave API de Axe DevTools Linter SaaS.

Para la versión local del servidor Axe DevTools Linter, necesitarás configurarlo (como se detalla en Instalación del Servidor Local de Axe DevTools Linter) y luego obtener la dirección IP del servidor. También necesitarás el puerto en el que el servidor está escuchando (el predeterminado es el puerto 3000).

Probando Tu Conexión con curl

Dos de los endpoints REST de Axe DevTools Linter SaaS no requieren autenticación, así que puedes probar tu conexión antes de obtener una clave API.

Si deseas ejecutar una prueba simple de si puedes acceder al servidor, puedes usar curl (o un navegador web). El siguiente ejemplo de curl muestra cómo usar el endpoint estado de Axe DevTools Linter SaaS:

curl https://axe-linter.deque.com/status

Para la versión local, deberías escribir lo siguiente:

curl http://<server IP address>:<server port>/status

Necesitas reemplazar <dirección IP del servidor> y <puerto del servidor> en el comando anterior.

Si el servidor está disponible, responderá con:

Ok

También puedes visitar la misma URL (por ejemplo, https://axe-linter.deque.com/status) con un navegador web y deberías ver el mismo resultado.

El siguiente ejemplo muestra cómo acceder al endpoint verificación de estado:

curl https://axe-linter.deque.com/healthcheck

El servidor debería responder con lo siguiente:

{
  "version": "4.4.0"
}

Como con el endpoint estado, también puedes visitar https://axe-linter.deque.com/healthcheck con un navegador web y obtener el mismo resultado que con curl.

Para comprobar el origen de errores de accesibilidad, necesitas crear una solicitud POST. Puedes usar curl o una herramienta como Postman.

En Postman u otra herramienta REST, necesitas crear un encabezado como el que se muestra a continuación:

POST https://axe-linter.deque.com/lint-source
content-type: application/json
authorization: <YOUR API KEY>

Si estás utilizando Axe DevTools Linter SaaS, necesitas reemplazar con tu clave API. Si estás utilizando el servidor local, no necesitas usar el encabezado autorización, pero necesitas cambiar la URL a la dirección IP y puerto de tu servidor local.

Con curl el encabezado equivalente al mostrado arriba sería:

curl --request POST --url https://axe-linter.deque.com/lint-source \
  --header 'content-type: application/json' \
  --header 'authorization: <YOUR API KEY>'

También necesitas especificar un cuerpo de solicitud como un objeto JSON antes de que la solicitud esté completa:

{
  "source": "# Heading\n### Another Heading\n",
  "filename": "file.md"
}

El comando completo curl es:

curl --request POST --url https://axe-linter.deque.com/lint-source \
  --header 'content-type: application/json' \
  --header 'authorization: <YOUR API KEY>'
  --data '{ "source": "# Heading\n### Another Heading\n",
    "filename": "file.md" }'

Para el servidor local, necesitas cambiar el argumento --url y eliminar la línea --header 'authorization: <TU CLAVE API>'.

Lo siguiente muestra una respuesta de ejemplo a la solicitud anterior:

HTTP/1.1 200 OK
Date: Mon, 14 Mar 2022 14:04:19 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 419
Connection: close
X-Powered-By: Express
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0
ETag: W/"1a3-cfgZ30xjvW815mLDpbjoGXreu2o"

{
  "report": {
    "errors": [
      {
        "ruleId": "heading-order",
        "helpURL": "https://dequeuniversity.com/rules/axe/4.4/heading-order?application=axe-linter",
        "description": "Ensures the order of headings is semantically correct",
        "lineContent": "### Another heading",
        "lineNumber": 2,
        "linterType": "md",
        "column": 1,
        "endColumn": 20
      }
    ]
  }
}

Debido a que este ejemplo tiene un problema de accesibilidad, has recibido una respuesta que contiene un objeto informe con un arreglo errores de objetos error. Consulta Respuesta para obtener más información sobre este objeto de respuesta.

Si tu clave API no existe cuando usas Axe DevTools Linter SaaS, recibirás una respuesta como esta:

HTTP/1.1 404 Not Found
Date: Fri, 11 Mar 2022 22:38:51 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 33
Connection: close
X-Powered-By: Express
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0
ETag: W/"21-HAVNeHb+a8RfOcMl419aKM67S20"

{
  "error": "No API key found"
}

En este caso, puedes intentar recrear tu clave API o contactar a el Centro de Ayuda de Deque para obtener ayuda.

Ver También

• Consulta Obteniendo una Clave API para los pasos necesarios para obtener una clave API necesaria para usar Axe DevTools Linter SaaS.
• Consulta Referencia del REST API del Servidor Axe DevTools Linter para obtener una referencia sobre las API proporcionadas por el Servidor de Axe DevTools Linter, así como opciones adicionales para el endpoint origen-del-linter.
• El Ejemplo de Uso del REST API de Axe DevTools Linter contiene un ejemplo de curl y un ejemplo de Python que puedes usar con el Servidor de Axe DevTools Linter.