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
Not for use with personal data

Le axe-devtools-rspec gem fournit des correspondances personnalisées pour évaluer si une page donnée est axe propre.

Cette gem s'étend sur des étapes fournies par la gem axe-core-rspec.

Installation et utilisation

Assurez-vous d'avoir accès au [registre de Deque][configuration du registre npm]. Dans le cas contraire, reportez-vous à la [documentation d'installation][].

Pour configurer le 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"
  • Require axe-rspec, qui s'étend RSpec avec des correspondances personnalisées. Idéalement, cela devrait être spécifié dans le fichier spec/spec_helper.rb.
require 'axe-rspec'
  • Utilisez la gem avec le [WebDriver][axe devtools gems] de votre choix.

API

Matcher - Be axe Clean (be_axe_clean)

Pour construire une vérification RSpec d'accessibilité axe, commencez par expect(page).to be_axe_clean et ajoutez toutes les clauses nécessaires. (L'objet page provient du WebDriver que vous avez choisi.)

Matcher - Être audité pour l'accessibilité (be_audited_for_accessibility)

Pour construire une vérification RSpec d'accessibilité axe, commencez par expect(page).to be_audited_for_accessibility et ajoutez 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 be_axe_clean matcher personnalisé. Les clauses configurables permettent une plus grande granularité dans les tests et les attentes.

within- Clause d'inclusion

La clause within spécifie quels éléments de la page doivent être vérifiés. Un [sélecteur CSS][sélecteur css] valide doit être fourni. La clause within accepte un seul sélecteur, un tableau de sélecteurs ou un hachage décrivant les iframes avec des sélecteurs.

Pour plus d'informations, consultez la [documentation des paramètres de contexte][context-param].

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 d'exclusion spécifie quels éléments du document doivent être ignorés. **** Un [sélecteur CSS][sélecteur css] valide doit être fourni. La ** clause d'exclusion** 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 la [documentation des paramètres de contexte][context-param].

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 norme d'accessibilité (Tag)

La conformément_à clause spécifie quelle norme (ou normes) d'accessibilité doit être utilisée pour vérifier la page. Les normes d'accessibilité sont spécifiées par leur nom. La clause selon accepte une seule balise ou un tableau de balises.

Les [noms de balises acceptables sont documentés][options-param] ainsi qu'une [liste complète des règles][règles] qui correspondent à chaque balise.

# 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 vérification des règles

La ** clause de vérification** spécifie quelles règles supplémentaires doivent être vérifiées en plus des balises spécifiées (le cas échéant) ou de l'ensemble de règles par défaut. __ La ** clause de vérification** accepte une règle unique ou un tableau de règles.

Pour plus d'informations, consultez la [documentation des règles][rules] pour obtenir une liste des 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 ** checking_only** spécifie les règles à vérifier exclusivement. L'utilisation de ce matcher exclut toutes les 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 relative aux règles ignorées

La clause skipping spécifie les règles à ignorer. Cela permet de fournir une norme d'accessibilité (via la clause de tag) 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 la [documentation des règles][rules] pour obtenir une liste des 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 accessibles uniquement au correspondant - Être audité pour l'accessibilité

Le matcher be_audited_for_accessibility prend en charge deux clauses supplémentaires.

according_to_ruleset- Clause d'ensemble de règles

La clause 'ruleset' '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 résultats de journalisation

Pour enregistrer les résultats du 'base matcher' et des clauses, appelez 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 mélangées et associées avec le chaînage 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

Reportez-vous à [utilisation avancée][] pour voir comment configurer l'API pour :

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

[attest npm registry setup] : https://dequeuniversity.com/guide/attest/2.11/getting-started/npm-setup/ [documentation d'installation] : rb-access-setup#required-access--setup [axe devtools gems] : rb-introduction#axe-devtools-gems [context-param] : https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter [options-param] : https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter [rules] : https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md [sélecteur css] : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors [utilisation avancée] : rb-advanced-usage

Is this page helpful?

Help us improve this page

Still need help?