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

Einrichtung und Nutzung des axe-devtools-rspec Gems für RSpec-basierte Barrierefreiheitstests

Not for use with personal data

Das axe-devtools-rspec-Gem bietet benutzerdefinierte Matcher, um zu bewerten, ob eine gegebene Seite axe clean ist.

Dieses Gem erweitert vom axe-core-rspec-Gem bereitgestellte Schritte.

Einrichtung und Nutzung

Stellen Sie sicher, dass Sie Zugriff auf Deque's registry haben. Falls nicht, lesen Sie setup documentation.

Um das RSpec-Gem einzurichten, folgen Sie diesen Schritten:

  • Fügen Sie axe-devtools-rspec zu Ihrer Gemfile- oder gemspec-Datei hinzu und führen Sie bundle install aus.
gem "axe-devtools-rspec"
spec.add_dependency "axe-devtools-rspec"
  • Binden Sie axe-rspec ein, welches RSpec mit benutzerdefinierten Matchern erweitert. Idealerweise sollte dies in der Datei spec/spec_helper.rb angegeben werden.
require 'axe-rspec'
  • Verwenden Sie das Gem mit dem WebDriver Ihrer Wahl.

API

Matcher - Be axe Clean (be_axe_clean)

Um einen RSpec-Check für die axe-Barrierefreiheit zu erstellen, beginnen Sie mit expect(page).to be_axe_clean und fügen Sie alle notwendigen Klauseln hinzu. (Das page-Objekt stammt von Ihrem gewählten WebDriver.)

Matcher - Be Audited for Accessibility (be_audited_for_accessibility)

Um einen RSpec-Check für die axe-Barrierefreiheit zu erstellen, beginnen Sie mit expect(page).to be_audited_for_accessibility und fügen Sie alle notwendigen kettebaren Klauseln hinzu.

expect(page).to be_audited_for_accessibility

Klauseln

Klauseln sind kettebare Methoden für den be_axe_clean-benutzerdefinierten Matcher. Konfigurierbare Klauseln ermöglichen eine größere Granularität bei Tests und Erwartungen.

within- Include-Klausel

Die within-Klausel gibt an, welche Elemente der Seite überprüft werden sollen. Ein gültiger CSS selector muss bereitgestellt werden. Die within-Klausel akzeptiert einen einzelnen Selektor, ein Array von Selektoren oder einen Hash, der Iframes mit Selektoren beschreibt.

Für weitere Informationen siehe context parameter documentation.

Beispiele:

# 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- Ausschlussklausel

Die excluding-Klausel gibt an, welche Elemente des Dokuments ignoriert werden sollen. Ein gültiger CSS selector muss bereitgestellt werden. Die excluding-Klausel akzeptiert einen einzelnen Selektor, ein Array von Selektoren oder einen Hash, der Iframes mit Selektoren beschreibt.

Für weitere Informationen siehe context parameter documentation.

Beispiele:

# 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- Barrierefreiheitsstandard (Tag-) Klausel

Die according_to-Klausel gibt an, welcher (oder welche) Barrierefreiheitsstandard(s) verwendet werden soll(en), um die Seite zu überprüfen. Die Barrierefreiheitsstandards werden namentlich angegeben. Die according_to-Klausel akzeptiert ein einzelnes Tag oder ein Array von Tags.

Die akzeptablen tag names are documented sowie ein complete listing of rules, das zu jedem Tag passt.

# 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- Prüfregel-Klausel

Die checking-Klausel gibt an, welche zusätzliche-Regeln zusätzlich zu den angegebenen Tags (falls vorhanden) oder dem Standardregelwerk geprüft werden sollen. Die checking-Klausel akzeptiert eine einzelne Regel oder ein Array von Regeln.

Für weitere Informationen siehe rules documentation für eine Liste der gültigen Regel-IDs.

# 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- Exklusive Regeln-Klausel

Die checking_only-Klausel gibt an, welche Regeln ausschließlich geprüft werden sollen. Bei Verwendung dieses Matchers werden alle Regeln außerhalb der Liste ausgeschlossen.

# 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- Regeln überspringen Klausel

Die skipping-Klausel gibt an, welche Regeln übersprungen werden sollen. Dies ermöglicht es, einen Barrierefreiheitsstandard anzugeben (über die Tag-Klausel), während eine bestimmte Regel ignoriert wird. Die Regeln werden durch kommagetrennte Regel-IDs angegeben.

Für weitere Informationen siehe rules documentation für eine Liste der gültigen Regel-IDs.

# 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)
Klauseln, die nur für den Matcher - Be Audited for Accessibility verfügbar sind

Der be_audited_for_accessibility-Matcher bietet Unterstützung für zwei zusätzliche Klauseln.

according_to_ruleset- Regeln-Klausel

Die Regeln-Klausel according_to_ruleset hilft, ein einzelnes Regelwerk festzulegen (zum Beispiel 508, wcag2, wcag2.1), das zur Überprüfung der Seite verwendet werden soll.

 expect(page)
      .to be_audited_for_accessibility
      .according_to_ruleset('wcag2.1')
logging_results- Protokollierungsergebnisse-Klausel

Um Ergebnisse von dem Basis-Matcher und Klauseln zu protokollieren, rufen Sie die verkettbare Methode logging_results auf, wie unten gezeigt.

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'
  })
Interoperabilität der Klauseln

Alle beschriebenen Klauseln können mit Method-Chaining kombiniert und gemischt werden. Unten sind einige Beispiele.

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)

Erweiterte API-Nutzung

Verweisen Sie auf advanced usage, um zu sehen, wie Sie die API konfigurieren für:

  • Benutzerdefinierte Regeln
  • Benutzerdefinierter Pfad zur Axe-Quelle
  • Aufzeichnungsnutzung
  • Berichterstattung

Is this page helpful?

Help us improve this page

Still need help?