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

Configuration et utilisation de la gem axe-devtools-rspec pour les tests d'accessibilité basés sur RSpec

Not for use with personal data

La gem axe-devtools-rspec fournit des matchers personnalisés pour évaluer si une page donnée est axe propre.

Cette gem s'étend à partir de étapes fournies par la gem axe-core-rspec.

Configuration et Utilisation

Assurez-vous d'avoir accès à Deque's registry. Sinon, référez-vous à la setup documentation.

Pour configurer la gem RSpec, suivez ces étapes :

  • Ajoutez axe-devtools-rspec à votre fichier Gemfile ou gemspec et exécutez bundle install.
gem "axe-devtools-rspec"
spec.add_dependency "axe-devtools-rspec"
  • Importez axe-rspec, qui étend RSpec avec des matchers personnalisés. Idéalement, cela doit être spécifié dans le fichier spec/spec_helper.rb.
require 'axe-rspec'
  • Utilisez la gem avec le WebDriver de votre choix.

API

Matcher - Être axe Propre (be_axe_clean)

Pour construire un test d'accessibilité RSpec avec axe, commencez par expect(page).to be_axe_clean et ajoutez-y toutes les clauses nécessaires. (L'objet page provient de votre pilote Web choisi.)

Matcher - Être Audité pour l'Accessibilité (be_audited_for_accessibility)

Pour construire un test d'accessibilité RSpec avec axe, commencez par expect(page).to be_audited_for_accessibility et ajoutez-y toutes les clauses chaînables nécessaires.

expect(page).to be_audited_for_accessibility

Clauses

Les clauses sont des méthodes chaînables pour le matcher personnalisé be_axe_clean. Des clauses configurables permettent une plus grande granularité dans les tests et les attentes.

within- Clause d'Inclusion

La clause dans précise quels éléments de la page doivent être vérifiés. Un CSS selector valide doit être fourni. La clause dans accepte un seul sélecteur, un tableau de sélecteurs ou un hash décrivant les iframes avec des sélecteurs.

Pour plus d'informations, consultez le context parameter documentation.

Exemples :

# 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- Clause d'Exclusion

La clause en excluant précise quels éléments du document doivent être ignorés. Un CSS selector valide doit être fourni. La clause en excluant accepte un seul sélecteur, un tableau de sélecteurs ou un hash décrivant les iframes avec des sélecteurs.

Pour plus d'informations, consultez le context parameter documentation.

Exemples :

# 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- Clause de Standard d'Accessibilité (Tag)

La clause selon spécifie quel standard d'accessibilité (ou quels standards) doit être utilisé pour vérifier la page. Les standards d'accessibilité sont spécifiés par leur nom. La clause selon accepte un seul tag, ou un tableau de tags.

Les tag names are documented acceptés ainsi qu'un complete listing of rules qui correspondent à chaque tag.

# 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- Clause de Règles de Vérification

La clause vérification spécifie quelles supplémentaires règles doivent être vérifiées en plus des tags spécifiés (le cas échéant) ou du jeu de règles par défaut. La clause vérification accepte une seule règle, ou un tableau de règles.

Pour plus d'informations, consultez le rules documentation pour une liste d'ID de règles valides.

# 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- Clause de Règles Exclusives

La clause vérification_unique spécifie quelles règles doivent être vérifiées exclusivement. Utiliser ce matcher exclut toutes règles en dehors de la liste.

# 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- Clause de Saut de Règles

La clause en sautant spécifie quelles règles doivent être ignorées. Cela permet de fournir un standard d'accessibilité (via la clause de tags) tout en ignorant une règle particulière. Les règles sont spécifiées par des ID de règle séparés par des virgules.

Pour plus d'informations, consultez le rules documentation pour une liste d'ID de règles valides.

# 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)
Clauses disponibles uniquement pour le matcher - Être Audité pour l'accessibilité

Le testeur être_audité_pour_accessibilité offre un support pour deux clauses supplémentaires.

according_to_ruleset- Clause de l'ensemble de règles

La clause de l'ensemble de règles selon_l_ensemble_de_règles permet de spécifier un seul ensemble de règles (par exemple, 508, wcag2, wcag2.1) à utiliser pour vérifier la page.

 expect(page)
      .to be_audited_for_accessibility
      .according_to_ruleset('wcag2.1')
logging_results- Clause de journalisation des résultats

Pour journaliser les résultats du testeur de base et des clauses, invoquez la méthode chaînable journalisation_des_résultats comme indiqué ci-dessous.

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'
  })
Interopérabilité entre les clauses

Toutes les clauses décrites peuvent être combinées et enchaînées grâce au chainage de méthodes. Voici quelques exemples.

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)

Utilisation avancée de l'API

Référez-vous à advanced usage pour voir comment configurer l'API pour :

  • Règles personnalisées
  • Chemin personnalisé vers la source axe
  • Enregistrement de l'utilisation
  • Rapports

Is this page helpful?

Help us improve this page

Still need help?