Introducción al desarrollo con axe DevTools Linter

Este artículo describe cómo comenzar a utilizar los servicios de API REST proporcionados por la edición local de axe DevTools Linter o axe DevTools Linter SaaS. Los servicios son proporcionados por puntos finales REST, por lo que necesita experiencia con una herramienta REST como Postman, CocoaRestClient o la extensión VS Code REST Client. 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 punto final /lint-source ).

Primeros Pasos

Si está utilizando la edición SaaS de axe DevTools Linter Server, primero deberá obtener una clave API. Puede 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, deberá configurarlo (como se detalla en Instalación del servidor axe DevTools Linter local) y luego obtener la dirección IP del servidor. También necesitarás el puerto en el que está escuchando el servidor (el predeterminado es el puerto 3000).

Probando su conexión con curl

Dos de los puntos de acceso REST de axe DevTools Linter SaaS no requieren autenticación para que pueda probar su conexión antes de obtener una clave API.

Si desea ejecutar una prueba simple para saber si puede acceder al servidor, puede usar curl (o un navegador web). El siguiente ejemplo de curl muestra cómo utilizar el punto final de estado de axe DevTools Linter SaaS:

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

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

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

Debe reemplazar la <dirección IP del servidor> y la <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ía ver el mismo resultado.

El siguiente ejemplo muestra cómo acceder al ** punto final de control de estado** :

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

El servidor debería responder con lo siguiente:

{
  "version": "4.4.0"
}

Al igual que con el endpoint de estado, también puede visitar **** https://axe-linter.deque.com/healthcheck Con un navegador web para obtener el mismo resultado que con curl.

Para verificar la fuente en busca de errores de accesibilidad, debe crear una solicitud POST . Puedes utilizar curl o una herramienta como Postman.

En Postman u otra herramienta REST, debes 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á utilizando axe DevTools Linter SaaS, debe reemplazar con su clave API. Si está utilizando el servidor local, no necesita utilizar el encabezado autorización , pero debe cambiar la URL a la dirección IP y del puerto de su servidor local.

Con curl el encabezado equivalente al que se muestra 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 debe especificar un cuerpo de solicitud como un objeto JSON antes de que se complete la solicitud:

{
  "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, debe cambiar el argumento --url y eliminar el --header 'authorization: <YOUR API KEY>'línea.

A continuación se muestra un ejemplo de respuesta 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, recibió una respuesta que contiene un objeto reporte que contiene una matriz errores de objetos error . Consulte 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, puede intentar recrear su clave API o comunicarse con la mesa de ayuda de Deque para obtener ayuda.

Consulte también

• Consulte Obtener una clave API para conocer los pasos necesarios para obtener una clave API necesaria para usar axe DevTools Linter SaaS.
• Consulte Referencia de API REST de axe DevTools Linter Server para obtener una referencia a las API proporcionadas por axe DevTools Linter Server, así como opciones adicionales para el endpoint linter-source .
• El ejemplo de uso de la API REST de axe DevTools Linter contiene un ejemplo de curl y un ejemplo de Python que puedes usar con axe DevTools Linter Server.