eslint-plugin-jsx-a11y

August 25, 2020 · View on GitHub

Obtenga soporte profesional para eslint-plugin-jsx-a11y en Tidelift

Comprobador AST estático para reglas de accesibilidad en elementos JSX.

¿Porque?

Ryan Florence desarrolló esta increíble herramienta de análisis de tiempo de ejecución llamada [react-a11y] (https://github.com/reactjs/react-a11y). Es super útil. Dado que probablemente ya esté utilizando linting en su proyecto, este plugin es gratuito y más cerca del proceso de development real. Si combina este plugin con un editor lint plugin, puede incorporar estándares de accesibilidad a su aplicación en tiempo real.

Nota: Este proyecto no * reemplaza * react-a11y, pero puede y debe usarse junto con él. Las herramientas de análisis estático no pueden determinar los valores de los variables que se colocan en props antes del tiempo de ejecución, así que el linting no fallará si ese valor no está definido y / o no pasa la regla de lint.

Instalación

Si está instalando este complemento a través de eslint-config-airbnb, por favor sigue estas instrucciones.

Primero tendrá que instalar ESLint:

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

Siguiente, instale eslint-plugin-jsx-a11y:

# npm
npm install eslint-plugin-jsx-a11y --save-dev

# yarn
yarn add eslint-plugin-jsx-a11y --dev

Nota: Si instaló ESLint globalmente (usando -g en npm, o el prefijo global en yarn) tambien tendra que instalar eslint-plugin-jsx-a11y globalmente.

Uso

Añade jsx-a11y a la sección de "plugins" de su .eslintrc archivo de configuración. Puede omitir el prefijo eslint-plugin- :

{
  "plugins": [
    "jsx-a11y"
  ]
}

Luego configure las reglas que quiera usar bajo la sección "rules".

{
  "rules": {
    "jsx-a11y/nombre-de-regla": 2
  }
}

También puede permitir todas las reglas recomendadas o estrictas de una vez. Añade plugin:jsx-a11y/recommended o plugin:jsx-a11y/strict dentro "extends":

{
  "extends": [
    "plugin:jsx-a11y/recommended"
  ]
}

Reglas Soportadas

accessible-emoji: Enforce emojis están envueltos en <span> y brindan acceso al lector de pantalla.
alt-text: Enforce todos los elementos que requieren texto alternativo tenga información significativa para transmitir al usuario.
anchor-has-content: Enforce todos los anclajes contengan contenido accesible.
anchor-is-valid: Enforce todas las anclas son elementos navegables válidos.
aria-activedescendant-has-tabindex: Enforce elementos con aria-activedescendant son accesibles por tab.
aria-props: Enforce todos los accesorios aria- * son válidos.
aria-proptypes: Enforce el estado ARIA y los valores de propiedad son válidos
aria-role: Enforce que los elementos con roles ARIA deben usar un rol ARIA válido y no abstracto.
aria-unsupported-elements: Enforce que los elementos que no admitan roles, estados y propiedades de ARIA no tengan esos atributos.
autocomplete-valid: Enforce los atributos de autocompletar se utilicen correctamente.
click-events-have-key-events: Enforce un elemento no interactivo de clic tiene al menos un detector de eventos de teclado.
heading-has-content: Enforce los elementos de encabezada (h1, h2, etc.) contienen contenido accesible.
html-has-lang: Enforce el elemento <html> tiene la propiedad lang.
iframe-has-title: Enforce los elementos de iframe tiene un atributo de título.
img-redundant-alt: Enforce <img> alt prop no contiene la palabra "imagen", "imagen" o "foto".
interactive-supports-focus: Enforce los elementos con controladores interactivos como "onClick" deben poder enfocarse.
label-has-associated-control: Enforce una etiqueta label tenga una etiqueta de texto y un control asociado.
lang: Enforce el atributo lang tiene un valor válido.
media-has-caption: Enforce los elementos <audio> y <video> tiene un <track> para los subtítulos.
mouse-events-have-key-events: Enforce que onMouseOver/onMouseOut son acompañados por onFocus/onBlur para usuarios de solo teclado.
no-access-key: Enforce la propiedad accessKey no se use en ningún elemento para evitar complicaciones con comandos del teclado usados por un lector de pantalla
no-autofocus: Enforce que no se utilice propiedad autoFocus.
no-distracting-elements: Enforce elementos que distraen no se utilizen.
no-interactive-element-to-noninteractive-role: Elementos interactivos no se les deben asignar roles no interactivos.
no-noninteractive-element-interactions: Elementos no interactivos no se les debe asignar detectores de eventos de mouse o teclado.
no-noninteractive-element-to-interactive-role: Elementos no interactivos no se les deben asignar roles interactivos.
no-noninteractive-tabindex: Declare tabIndex solo en elementos interactivos.
no-onchange: Enforce onBlur sobre onChange en menús selectos para accesibilidad.
no-redundant-roles: Enforce propiedad de función explícita no es lo mismo que la propiedad de función implícita / predeterminada en el elemento.
no-static-element-interactions: Enforce elementos visibles no interactivos (como <div>) que tienen controladores de clic usan el atributo de rol.
role-has-required-aria-props: Enforce elementos con roles ARIA tengan todos los atributos requeridos para ese rol.
role-supports-aria-props: Enforce elementos con roles explícitos o implícitos definidos contengan solo propiedades aria- * admitidas por ese rol.
scope: Enforce scope prop solo se usa en elementos<th>.
tabindex-no-positive: Enforce el valor de tabIndex no es mas de cero.

Diferencia entre modos 'recomendedo' y 'estricto'

Regla	Recomendedo	Estricto
accessible-emoji	error	error
alt-text	error	error
anchor-has-content	error	error
anchor-is-valid	error	error
aria-activedescendant-has-tabindex	error	error
aria-props	error	error
aria-proptypes	error	error
aria-role	error	error
aria-unsupported-elements	error	error
autocomplete-valid	error	error
click-events-have-key-events	error	error
heading-has-content	error	error
html-has-lang	error	error
iframe-has-title	error	error
img-redundant-alt	error	error
interactive-supports-focus	error	error
label-has-associated-control	error	error
media-has-caption	error	error
mouse-events-have-key-events	error	error
no-access-key	error	error
no-autofocus	error	error
no-distracting-elements	error	error
no-interactive-element-to-noninteractive-role	error, con opciones	error
no-noninteractive-element-interactions	error, con opciones	error
no-noninteractive-element-to-interactive-role	error, con opciones	error
no-noninteractive-tabindex	error, con opciones	error
no-onchange	error	error
no-redundant-roles	error	error
no-static-element-interactions	error, con opciones	error
role-has-required-aria-props	error	error
role-supports-aria-props	error	error
scope	error, con opciones	error
tabindex-no-positive	error	error

Las siguiente reglas tienen otras opciones disponibles cuando en modo recomendado:

no-interactive-element-to-noninteractive-role

'jsx-a11y/no-interactive-element-to-noninteractive-role': [
  'error',
  {
    tr: ['none', 'presentation'],
  },
]

no-noninteractive-element-interactions

'jsx-a11y/no-noninteractive-element-interactions': [
  'error',
  {
    handlers: [
      'onClick',
      'onMouseDown',
      'onMouseUp',
      'onKeyPress',
      'onKeyDown',
      'onKeyUp',
    ],
  },
]

no-noninteractive-element-to-interactive-role

'jsx-a11y/no-noninteractive-element-to-interactive-role': [
  'error',
  {
    ul: [
      'listbox',
      'menu',
      'menubar',
      'radiogroup',
      'tablist',
      'tree',
      'treegrid',
    ],
    ol: [
      'listbox',
      'menu',
      'menubar',
      'radiogroup',
      'tablist',
      'tree',
      'treegrid',
    ],
    li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
    table: ['grid'],
    td: ['gridcell'],
  },
]

no-noninteractive-tabindex

'jsx-a11y/no-noninteractive-tabindex': [
  'error',
  {
    tags: [],
    roles: ['tabpanel'],
  },
]

no-static-element-interactions

'jsx-a11y/no-noninteractive-element-interactions': [
  'error',
  {
    handlers: [
      'onClick',
      'onMouseDown',
      'onMouseUp',
      'onKeyPress',
      'onKeyDown',
      'onKeyUp',
    ],
  },
]

Creando una nueva regla

Si está desarrollando nuevas reglas para este proyecto, puede usar el create-rule script para aplicar scaffolding a los nuevos archivos.

$ ./scripts/create-rule.js my-new-rule

Contexto sobre WAI-ARIA, el árbol AX y los navegadores

API de accesibilidad

El sistema operativo proporcionará un API de accesibilidad que mapea el estado y el contenido de la aplicación en controladores de entrada / salida, como ejemplo un lector de pantalla, dispositivo braille, teclado, etc.

Estas APIs se desarrollaron cuando las interfaces de computadora se cambiaron de búferes (que son basados en texto e intrínsecamente bastante accesibles) a interfaces gráficas de usuario (GUI). Los primeros intentos de hacer GUIs accesibles involucraron el análisis sintáctico de imágenes ráster para reconocer caracteres, palabras, etc. Esta información se almacenó en un búfer paralelo y se hizo accesible a los dispositivos de tecnología de asistencia (AT).

Las GUIs se volvieron más complejas, y el análisis sintáctico ráster se volvió insostenible. Las APIs de accesibilidad fueron desarrolladasolladas para reemplazarlas. Consulte NSAccessibility (AXAPI) por ejemplos. Consulte Core Accessibility API Mappings 1.1 para más detalles.

Navegadores

Los navegadores apoyan ciertad API de accesibilidad dependiendo en el sistema operativo. Por ejemplo, Firefox implementa la API de accesibilidad MSAA en Windows, pero no implementa AXAPI en OSX.

El árbol de accesibilidad (AX) y DOM

De parte de W3 Core Accessibility API Mappings 1.1

El árbol de accesibilidad y el árbol DOM son estructuras paralelas. En términos generales, el árbol de accesibilidad es un subconjunto del árbol DOM. Incluye los objetos de la interfaz de usuario y los objetos del documento. Los objetos accesibles se crean en el árbol de accesibilidad por cada elemento DOM que debe ser expuesto a la tecnología de asistencia, ya sea porque puede desencadenar un evento de accesibilidad o porque tiene una propiedad, relación o característica que debe exponerse. Generalmente, si algo puede ser omitido, sera, por razones de rendimiento y simplicidad. Por ejemplo, un <span> con solo un cambio de estilo y sin semántica puede que no obtenga su propio objeto accesible, pero el cambio de estilo será expuesto por otros medios.

Los proveedores de navegadores están comenzando a exponer el árbol AX a través de herramientas de inspección. Chrome tiene un experimento disponible para permitir su herramienta de inspección.

También puede ver una versión basada en texto del árbol AX en Chrome en la versión estable.

Ver el árbol de AX en Chrome

Navegar a chrome://accessibility/ en Chrome.
Cambie el accessibility off enlace por cualquier tab que quiere inspeccionar.
Un enlace mostrando show accessibility tree aparecerá; seleccione el enlace.
Vacile ansiosamente a la pantalla de texto, pero luego recupere su convicción.
Utilice el comando de búsqueda para localizar cadenas y valores en el texto.

Juntándolo todo

El navegador construye un árbol AX como un subconjunto del DOM. ARIA informa en gran medida las propiedades del árbol AX. Este árbol AX está expuesto a la API de accesibilidad a nivel del sistema, que actúa como intermediario en los agentes de tecnología de asistencia.

Modelamos ARIA en el proyecto aria-query. Modelamos AXObjects (que componen el árbol AX) en el proyecto axobject-query. El objetivo de la especificación WAI-ARIA es ser una interfaz declarativa completa para el modelo AXObject. La versión 1.2 en borrador avanza hacia este objetivo. Pero hasta entonces, debemos considerar las construcciones semánticas que ofrece ARIA, así como las que ofrece el modelo AXObject (AXAPI) para determinar cómo se puede usar HTML para expresar las ofrendas de la interfaz de usuario para los usuarios de tecnología de asistencia.

Licencia

eslint-plugin-jsx-a11y es licenciada bajo el MIT License.