Configurando axe DevTools Linter

Link to Configurando axe DevTools Linter copied to clipboard

Una guía de referencia para configurar axe DevTools Linter

Not for use with personal data

Este artículo proporciona una referencia para las opciones de configuración de axe DevTools Linter.

Visión general

El punto final de la API REST usa JSON para la configuración, y la extensión axe Accessibility Linter para VS Code, el complemento JetBrains y el conector axe DevTools Linter usan YAML para la configuración. En esta guía se muestran ejemplos JSON y YAML de configuraciones de axe DevTools Linter.

Configuraciones de ejemplo

El siguiente ejemplo de YAML demuestra una configuración simple que utiliza la opción rules para usar con la extensión axe Accessibility Linter para VS Code, el complemento JetBrains o el conector axe DevTools Linter:

rules:
  html-has-lang: false

El siguiente ejemplo demuestra la misma configuración que un objeto de solicitud completo con la opción rules para el servicio REST de axe DevTools Linter con su objeto incrustado resaltado config :

{
  "source": "<html></html>",
  "filename": "file.html",
  "config": {    "rules": {      "html-has-lang": false    },    "exclude": [],
    "tags": []
  }
}

En ambos casos, estas configuraciones hacen que axe DevTools Linter ignore los errores de accesibilidad cuando al elemento html le falta un atributo lang . (Consulte la regla html-has-lang para obtener más información).

note

Para todos los ejemplos JSON de este artículo, se incluye el objeto config para proporcionar una ubicación de referencia para la configuración.

Las siguientes secciones describen cada opción de configuración y dan ejemplos de su uso.

Múltiples archivos de configuración

La extensión axe Accessibility Linter para VS Code, el complemento JetBrains y el conector axe DevTools Linter (cuando se usan con la opción --config sin parámetros) buscarán en el directorio actual y los directorios superiores archivos de configuración axe-linter.yml en el árbol de directorios de tu proyecto y usarán el primero que encuentren. Una práctica útil es colocar un archivo de configuración en la raíz de su proyecto que contenga su configuración predeterminada y anularlo (si es necesario) con archivos de configuración en diferentes subdirectorios. También puede colocar un archivo de configuración en su directorio de inicio que se utilizará de forma predeterminada si no hay archivos de configuración en su proyecto.

Los pasos utilizados para localizar los archivos de configuración son: axe-linter.yml

Utilice el archivo de configuración en el directorio actual (el directorio que contiene el archivo que se está editando con VS Code, un IDE de JetBrains o el directorio actual del símbolo del sistema con axe DevTools Linter Connector).
Si no se encuentra ninguna configuración en el paso 1, busque en los directorios superiores hasta encontrar un archivo de configuración, deteniéndose en tu carpeta de inicio si el proyecto está en el árbol de tu directorio de inicio o en el directorio raíz si está fuera de tu carpeta de inicio. axe-linter.yml
Utilice un archivo de configuración ubicado en tu directorio de inicio (incluso si tu proyecto está ubicado en un directorio fuera de tu carpeta de inicio o en otra unidad en Windows). axe-linter.yml Por ejemplo, estos son los archivos típicos utilizados:
- /home/username/axe-linter.yml (Linux)
- /Usuarios/username/axe-linter.yml (macOS)
- C:\Usuarios\username\axe-linter.yml (Windows)

La búsqueda se detiene cuando se encuentra el primer archivo. axe-linter.yml

Resumen de la configuración de axe DevTools Linter

Producto	Tipo de configuración	Descripción
Extensión de axe Linter de Accesibilidad para VS Code o el complemento JetBrains	Uno o más archivos YAML llamados `axe-linter.yml`	Consulte Configuraciones múltiples.
Conector Linter de hacha	Uno o más archivos YAML llamados `axe-linter.yml`	Sigue los pasos en Configuraciones múltiples cuando se usa con la opción `--config` sin parámetros.
Conector Linter de hacha	Un archivo YAML llamado nombre_archivo	Cuando se utiliza con `--config` nombre de archivo.
API REST de axe Linter	Objeto de configuración JSON	Consulte El objeto de configuración.

Opciones de configuración

`element`

La opción element le permite cambiar el elemento emitido en función del valor del atributo especificado de su componente. Por ejemplo, puede tener un componente personalizado que emita un img elemento en ciertos casos y otro button elemento en otros, lo que permite casos de uso más complejos.

La siguiente configuración de ejemplo especifica que el atributo as del componente my-button puede cambiar el elemento emitido del valor predeterminado de button:

YAML:

global-components:
  my-button:
    element: button
    attributes:
      - as: <element>

JSON:

{
  "config": {
    "global-components": {
      "my-button": {
        "element": "button",
        "attributes": [
          {
            "as": "<element>"
          }
        ]
      }
    }
  }
}

El siguiente ejemplo de uso emite un elemento img en lugar del elemento predeterminado button porque el atributo as especifica el elemento de salida:

<my-button as="img"></my-button>

Luego se analizará el elemento img de salida y se descubrirá que le falta un atributo alt .

`exclude`

La opción exclude evita que se analicen los archivos coincidentes. Puedes utilizar comodines y globs. Su uso es principalmente para la extensión VS Code o el complemento JetBrains y es ignorado por el punto final REST.

exclude: *.tmp

`global-components`

La opción de configuración global-components le indica a axe DevTools Linter cómo mapear sus propios componentes personalizados o componentes de bibliotecas de terceros a elementos HTML nativos, permitiéndole analizar sus componentes como si fueran elementos HTML nativos. Por ejemplo, la siguiente configuración tratará todos los componentes personalizados como si fueran elementos HTML nativos. DqButton button Esto asigna automáticamente cada atributo de un elemento a otro, por lo que requiere un nombre accesible para todos los componentes. DqButton button DqButton

YAML:

global-components:
  DqButton: button

JSON:

{
  "config": {
    "global-components" {
      "DqButton": "button"
    }
  }
}

Como alternativa, para los componentes que no asignan todos los atributos a los componentes HTML nativos, puede enumerar los atributos necesarios para la conformidad con la accesibilidad utilizando la opción attributes . Puede listar los atributos que admite el componente, así como también cambiar el nombre de los atributos. Hay tres valores especiales:

El valor aria-* le dice a axe DevTools Linter que todos los atributos que comienzan con aria- se asignan al elemento HTML nativo tal como está. Tenga en cuenta que el valor termina con un asterisco.
El valor <text> le dice a axe DevTools Linter que se utiliza una propiedad para establecer el contenido (el valor entre las etiquetas de apertura y cierre) del elemento HTML nativo.
El valor <element> le dice a axe DevTools Linter que el elemento emitido puede tomar el valor de este atributo, lo que le permite cambiar el elemento emitido dependiendo del valor del atributo especificado.

El siguiente ejemplo de YAML muestra todos los valores que se pueden usar con global-components:

global-components:
  DqButton:
    element: button
    # Ignore all attributes on <DqButton> except the following:
    attributes:
      - role # Map the role attribute from <DqButton /> to <button />
      - aria-* # Map all attributes starting with aria-
      - action: type # <DqButton action="submit" /> maps to <button type="submit" />
      - label: <text> #  <DqButton label="ABC" /> emits <button>ABC</button>
      - as: <element> # <DqButton as="img" /> emits <img> instead of <button>. (You don't have to use *as* for the attribute name.)

Una versión JSON equivalente (dentro del objeto) es la siguiente: config

{
  "config": {
    "global-components": {
      "DqButton": {
        "element": "button",
        "attributes": [
          "role",
          "aria-*",
          {
            "action": "type"
          },
          {
            "label": "<text>"
          },
          {
            "as": "<element>"
          }
        ]
      }
    }
  }
}

Sólo los atributos relevantes para la accesibilidad deben estar en la lista. attributes Los nombres de los elementos distinguen entre mayúsculas y minúsculas. El Camel case, como se muestra arriba, se usa comúnmente con archivos .jsx, pero se puede usar el kebab case (que se usa en elementos personalizados de Vue, Angular y HTML).

Para obtener tutoriales que muestren cómo usar la asignación de componentes personalizados, consulte Linting de componentes personalizados.

`global-libraries`

Axe DevTools Linter tiene soporte integrado para varias bibliotecas de componentes y frameworks populares.

Actualmente se admiten las siguientes bibliotecas:

react-native
@mui/material
@deque/cauldron-react

Para habilitar el linting de los componentes de la biblioteca, agregue el nombre del paquete NPM de la biblioteca a la matriz de archivos de configuración YAML: global-libraries

global-libraries:
  - '@mui/material'
  - '@deque/cauldron-react'
  - react-native

note

Debes entrecomillar @mui/material y @deque/cauldron-react en YAML porque @ se interpreta como un carácter reservado.

O la configuración JSON equivalente se muestra a continuación:

{
  "config": {
    "global-libraries": [
      "@mui/material"
    ]
  }
}

Cualquier componente con el mismo nombre que un componente de la biblioteca global será tratado como ese componente de la biblioteca, lo que permitirá volver a exportar y declarar componentes sin perder su asignación.

Para obtener más información, consulte Bibliotecas de componentes preconfigurados.

`overrides`

Puede cambiar la forma en que axe DevTools Linter se configura por archivo utilizando la opción de configuración. overrides Las sobrescrituras múltiples en el mismo archivo se resuelven en orden. Es decir, la última anulación enumerada tiene la mayor precedencia.

Actualmente, solo se admite la anulación y se utiliza para cambiar el linter utilizado en los archivos coincidentes. linter

overrides:
  - files: # An array or single string of filename(s) or glob pattern(s) that match this override setting
      - vue/**/*.html
    linter: vue # Specify that all files that match the pattern should be linted as Vue
  - files: php/**/*.html
    linter: null # Disable axe-linter for these files

`rules`

Puede permitir o prohibir reglas individualmente con la opción en su configuración: rules

rules:
  some-rule: false # turn off rule
  other-rule: true # turn on rule

O en el objeto en su solicitud JSON REST: config

{
  "config": {
    "rules": {
      "some-rule": false,
      "other-rule": true
    }
  }
}

Para obtener información sobre el uso de rules con la API REST, consulte La propiedad rules. Si desea utilizar rules con el conector de axe DevTools Linter, consulte Archivo de configuración. Para ver las reglas que sigue axe DevTools Linter, consulte Reglas de accesibilidad. Consulte a continuación para obtener más información sobre el uso de la opción para excluir colecciones de reglas de ser procesadas.(#tags) tags

`tags`

Puede rechazar reglas como grupo en función del estándar WCAG con el que están asociadas utilizando la opción: tags

tags: # Disallow all rules other than WCAG 2.1 A, WCAG 2.1 AA, and best practices.
  - wcag21a
  - wcag21aa
  - best-practices

Consulte también

Para obtener una referencia a las API REST proporcionadas por axe DevTools Linter, consulte Referencia de la API REST de axe DevTools Linter.
Para obtener guías sobre cómo crear asignaciones de componentes personalizados, consulte Linting de componentes personalizados.
Para descargar la extensión para VS Code, consulte axe Accessibility Linter.
Para obtener más información sobre el complemento JetBrains, consulte Uso del complemento con IDE de JetBrains.