Axe DevTools RSpec

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Instalación y uso de la gema axe-devtools-rspec para pruebas de accesibilidad basadas en RSpec

Not for use with personal data

La gema axe-devtools-rspec proporciona matchers personalizados para evaluar si una página dada está axe limpia.

Esta gema se extiende sobre pasos proporcionados por la gema axe-core-rspec.

Configuración y uso

Asegúrate de tener acceso a Deque's registry. Si no, consulta el setup documentation.

Para configurar la gema RSpec, sigue estos pasos:

  • Agrega axe-devtools-rspec a tu archivo Gemfile o gemspec y ejecuta bundle install.
gem "axe-devtools-rspec"
spec.add_dependency "axe-devtools-rspec"
  • Requiere axe-rspec, que extiende RSpec con matchers personalizados. Idealmente, esto se especificaría en el archivo spec/spec_helper.rb.
require 'axe-rspec'
  • Usa la gema con el WebDriver de tu elección.

API

Matcher - Estar libre de errores de axe (be_axe_clean)

Para construir una verificación de accesibilidad RSpec con axe, comienza con expect(page).to be_axe_clean y añade cualquier cláusula necesaria. (El objeto page proviene de tu WebDriver elegido.)

Matcher - Ser auditado por accesibilidad (be_audited_for_accessibility)

Para construir una verificación de accesibilidad RSpec con axe, comienza con expect(page).to be_audited_for_accessibility y añade cualquier cláusula encadenable necesaria.

expect(page).to be_audited_for_accessibility

Cláusulas

Las cláusulas son métodos encadenables para el matcher personalizadado be_axe_clean. Las cláusulas configurables permiten una mayor granularidad con las pruebas y las expectativas.

within- Cláusula de inclusión

La cláusula within especifica qué elementos de la página deben ser verificados. Se debe proporcionar un CSS selector válido. La cláusula within acepta un solo selector, una lista de selectores, o un hash que describe iframes con selectores.

Para más información, consulta el context parameter documentation.

Ejemplos:

# Simple selector
expect(page).to be_axe_clean.within '#selector1'

# Compound selector
# Include all elements with the class 'selector2' inside the element with id 'selector1'
expect(page).to be_audited_for_accessibility.within '#selector1 .selector2'

# Multiple selectors
# Include the element with id 'selector1' *and* all elements with class 'selector2'
expect(page).to be_audited_for_accessibility.within '#selector1', '.selector2'

# IFrame selector
# Include the element with id 'selector1' inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.within iframe: '#frame1', selector: '#selector1'

# Multiple IFrame selectors
# Include the element with id 'selector1' inside the IFrame with id 'frame1'
# Include the element with id 'selector2' inside the IFrame with id 'frame2'
expect(page).to be_audited_for_accessibility.within(
  {iframe: '#frame1', selector: '#selector1'},
  {iframe: '#frame2', selector: '#selector2'}
)

# Simple selectors *and* IFrame selector
# Include the element with id 'selector1' *and* all elements with class 'selector2'
# Include the element with id 'selector3' inside the IFrame with id 'frame'
expect(page).to be_audited_for_accessibility.within '#selector1', '.selector2', iframe: '#frame', selector: '#selector3'

# Nested IFrame selectors
# Include the element selector1 inside the IFrame with id 'frame2',
# inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.within(iframe: '#frame1', selector:
  {iframe: '#frame2', selector: '#selector1'}
)
excluding- Cláusula de exclusión

La cláusula excluding especifica qué elementos del documento deben ser ignorados. Se debe proporcionar un CSS selector válido. La cláusula excluding acepta un solo selector, una lista de selectores, o un hash que describe iframes con selectores.

Para más información, consulta el context parameter documentation.

Ejemplos:

# Simple selector
expect(page).to be_audited_for_accessibility.excluding '#selector1'

# Compound selector
# Exclude all elements with the class 'selector2' inside the element with id 'selector1'
expect(page).to be_axe_clean.excluding '#selector1 .selector2'

# Multiple selectors
# Exclude the element with id 'selector1' *and* all elements with class 'selector2'
expect(page).to be_audited_for_accessibility.excluding '#selector1', '.selector2'

# IFrame selector
# Exclude the element with id 'selector1' inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.excluding iframe: '#frame1', selector: '#selector1'

# Multiple IFrame selectors
# Exclude the element with id 'selector1' inside the IFrame with id 'frame1'
# Exclude the element with id 'selector2' inside the IFrame with id 'frame2'
expect(page).to be_axe_clean.excluding(
  {iframe: '#frame1', selector: '#selector1'},
  {iframe: '#frame2', selector: '#selector2'}
)

# Simple selectors with IFrame selector
# Exclude the element with id 'selector1' *and* all elements with class 'selector2'
# Exclude the element with id 'selector3' inside the IFrame with id 'frame'
expect(page).to be_audited_for_accessibility.excluding '#selector1', '.selector2', iframe: '#frame', selector: '#selector3'

# Nested IFrame selectors
# Exclude the element selector1 inside the IFrame with id 'frame2',
# inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.excluding(iframe: '#frame1', selector:
  {iframe: '#frame2', selector: '#selector1'}
)
according_to- Cláusula de estándar de accesibilidad (Tag)

La cláusula according_to especifica qué estándar (o estándares) de accesibilidad se deben usar para verificar la página. Los estándares de accesibilidad se especifican por nombre. La cláusula according_to acepta una sola etiqueta, o una lista de etiquetas.

Los tag names are documented aceptables así como un complete listing of rules que corresponde a cada etiqueta.

# Single standard
expect(page).to be_audited_for_accessibility.according_to :wcag2a

# Multiple standards
expect(page).to be_axe_clean.according_to :wcag2a, :section508
checking- Cláusula de reglas de verificación

La cláusula checking especifica qué reglas adicionales verificar además de las etiquetas especificadas (si las hay) o el conjunto de reglas predeterminado. La cláusula checking acepta una sola regla, o una lista de reglas.

Para más información, consulta el rules documentation para una lista de IDs de reglas válidos.

# Checking a single rule
expect(page).to be_axe_clean.checking :label

# Checking multiple rules
expect(page).to be_axe_clean.checking :label, :tabindex

# Example specifying an additional best practice rule in addition to all rules in the WCAG2A standard
expect(page).to be_audited_for_accessibility.according_to(:wcag2a).checking(:tabindex)
checking_only- Cláusula de reglas exclusivas

La cláusula checking_only especifica qué reglas verificar exclusivamente. Usar este matcher excluye todas reglas fuera de la lista.

# Checking a single rule
expect(page).to be_axe_clean.checking_only :label

# Checking multiple rules
expect(page).to be_audited_for_accessibility.checking_only :label, :tabindex
skipping- Cláusula de omisión de reglas

La cláusula skipping especifica qué reglas omitir. Esto permite que se proporcione un estándar de accesibilidad (a través de la cláusula de etiqueta) mientras se ignora una regla particular. Las reglas se especifican por IDs de reglas separados por comas.

Para más información, consulta el rules documentation para una lista de IDs de reglas válidos.

# Skipping a single rule
expect(page).to be_axe_clean.skipping :label

# Skipping multiple rules
expect(page).to be_audited_for_accessibility.skipping :label, :tabindex

# Example specifying an additional best practice rule in addition to all rules in the WCAG2A standard
expect(page).to be_axe_clean.according_to(:wcag2a).skipping(:label)
Cláusulas disponibles solo para el matcher - Ser auditado por accesibilidad

El comparador ser_auditado_para_accesibilidad ofrece soporte para dos cláusulas adicionales.

according_to_ruleset- Cláusula del conjunto de reglas

La cláusula del conjunto de reglas según_el_conjunto_de_reglas ayuda a especificar un único conjunto de reglas (por ejemplo, 508, wcag2, wcag2.1) para ser utilizado en la verificación de la página.

 expect(page)
      .to be_audited_for_accessibility
      .according_to_ruleset('wcag2.1')
logging_results- Cláusula de registros de resultados

Para registrar los resultados del comparador base y las cláusulas, invoque el método encadenable registro_de_resultados como se muestra a continuación.

expect(page)
  .to be_audited_for_accessibility
  .logging_results({
    output_directory: 'attest-results',
    test_machine: 'Jenkins CI Server',
    test_suite_name: 'Landing Page',
    ui_state: 'Page Load',
    user_agent: 'Headless Chrome'
  })
Interoperabilidad entre cláusulas

Todas las cláusulas descritas pueden combinarse y encadenarse con métodos. A continuación se encuentran algunos ejemplos.

expect(page).to be_axe_clean.within('.main', '.header').excluding('.footer')

expect(page).to be_audited_for_accessibility.excluding('#sidebar').according_to(:wcag2a, :wcag2aa).skipping(:color-contrast)

expect(page).to be_axe_clean.within('.main').checking_only :document-title, :label

expect(page).to be_audited_for_accessibility.according_to(:best-practice).checking(:aria-roles, :definition-list)

Uso avanzado de la API

Consulte advanced usage para ver cómo configurar la API para:

  • Reglas personalizadas
  • Ruta personalizada a la fuente de axe
  • Grabación de uso
  • Reportes

Is this page helpful?

Help us improve this page

Still need help?