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.

Installation et utilisation

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

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

Correspondant - Être Axe Clean (be_axe_clean)

Pour construire un contrôle d'accessibilité RSpec Axe, commencez par expect(page).to be_axe_clean et ajoutez toutes les clauses nécessaires. (L'objet page provient de votre WebDriver choisi.)

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

Pour construire un contrôle d'accessibilité RSpec Axe, commencez par expect(page).to be_audited_for_accessibility et ajoutez toutes les clauses enchaînées 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 within précise quels éléments de la page doivent être vérifiés. Un sélecteur CSS valide doit être fourni. La clause within 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 documentation du paramètre de contexte.

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 excluding précise quels éléments du document doivent être ignorés. Un sélecteur CSS valide doit être fourni. La clause excluding 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 documentation du paramètre de contexte.

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 la Norme d'Accessibilité (Tag)

La clause according_to 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 according_to accepte un seul tag, ou un tableau de tags.

Les les noms de balises sont documentés acceptés ainsi qu'un liste complète des règles 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 des Règles de Vérification

La clause checking 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 checking accepte une seule règle, ou un tableau de règles.

Pour plus d'informations, consultez le documentation des règles 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 des Règles Exclusives

La clause checking_only 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 des Règles de Saut

La clause skipping 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 documentation des règles 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 l'assortisseur - Être Audité pour l'accessibilité

Le testeur be_audited_for_accessibility 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 according_to_ruleset 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 logging_results 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 à utilisation avancée pour voir comment configurer l'API pour :

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

Is this page helpful?

Help us improve this page

Still need help?