Axe DevTools RSpec
Installatie en gebruik van de axe-devtools-rspec gem voor op RSpec gebaseerde toegankelijkheidstests
De axe-devtools-rspec gem biedt aangepaste matchers om te beoordelen of een gegeven pagina axe schoon is.
Deze gem breidt zich uit bovenop stappen geleverd door de axe-core-rspec gem.
Installatie en Gebruik
Zorg ervoor dat je toegang hebt tot Deque's registry. Zo niet, raadpleeg dan de setup documentation.
Om de RSpec gem op te zetten, volg je deze stappen:
- Voeg
axe-devtools-rspectoe aan je Gemfile of gemspec-bestand en voerbundle installuit.
gem "axe-devtools-rspec"spec.add_dependency "axe-devtools-rspec"- Require
axe-rspec, dieRSpecuitbreidt met aangepaste matchers. Idealiter wordt dit gespecificeerd in het bestandspec/spec_helper.rb.
require 'axe-rspec'- Gebruik de gem met de WebDriver van jouw keuze.
API
Matcher - Wees Axe Schoon (be_axe_clean)
Om een axe toegankelijkheids-RSpec-check te construeren, begin je met expect(page).to be_axe_clean en voeg je eventuele benodigde clausules toe. (Het page object komt van jouw gekozen WebDriver.)
Matcher - Wordt Geauditeerd voor Toegankelijkheid (be_audited_for_accessibility)
Om een axe toegankelijkheids-RSpec-check te construeren, begin je met expect(page).to be_audited_for_accessibility en voeg je eventuele benodigde schakelbare clausules toe.
expect(page).to be_audited_for_accessibilityClausules
Clausules zijn schakelbare methoden voor de be_axe_clean aangepaste matcher. Configureerbare clausules zorgen voor grotere detaillering met testen en verwachtingen.
within- Insluitingsclausule
De binnen clausule specificeert welke elementen van de pagina gecontroleerd moeten worden. Een geldige CSS selector moet worden verstrekt. De binnen clausule accepteert een enkele selector, een reeks van selectors of een hash die iframes met selectors beschrijft.
Voor meer informatie, zie de context parameter documentation.
Voorbeelden:
# 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- Uitsluitingsclausule
De uitsluiten clausule specificeert welke elementen van het document moeten worden genegeerd. Een geldige CSS selector moet worden verstrekt. De uitsluiten clausule accepteert een enkele selector, een reeks van selectors of een hash die iframes met selectors beschrijft.
Voor meer informatie, zie de context parameter documentation.
Voorbeelden:
# 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- Toegankelijkheidsnorm (Tag) clausule
De volgens clausule specificeert welke toegankelijkheidsnorm (of normen) gebruikt moet worden om de pagina te controleren. De toegankelijkheidsnormen worden bij naam gespecificeerd. De volgens clausule accepteert een enkele tag of een reeks van tags.
De acceptabele tag names are documented evenals een complete listing of rules die overeenkomen met elke tag.
# Single standard
expect(page).to be_audited_for_accessibility.according_to :wcag2a
# Multiple standards
expect(page).to be_axe_clean.according_to :wcag2a, :section508checking- Controlerende Regels clausule
De controleren clausule specificeert welke extra regels moeten worden gecontroleerd naast de gespecificeerde tags (indien aanwezig) of de standaardregels. De controleren clausule accepteert een enkele regel of een reeks van regels.
Voor meer informatie, zie de rules documentation voor een lijst van geldige regel-ID's.
# 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- Exclusieve Regels clausule
De alleen_controleren clausule specificeert welke regels exclusief moeten worden gecontroleerd. Gebruik van deze matcher sluit alle regels uit buiten de lijst.
# 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, :tabindexskipping- Regels Overslaan clausule
De overslaan clausule specificeert welke regels moeten worden overgeslagen. Dit maakt het mogelijk een toegankelijkheidsnorm te verstrekken (via de tag clausule) terwijl een specifieke regel wordt genegeerd. De regels worden gespecificeerd door kommagescheiden regel-ID's.
Voor meer informatie, zie de rules documentation voor een lijst van geldige regel-ID's.
# 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)Clausules beschikbaar alleen voor matcher - Wordt Geauditeerd voor toegankelijkheid
De geauditeerd_voor_toegankelijkheid matcher biedt ondersteuning voor twee extra clausules.
according_to_ruleset- Regelsatzclausule
De regelsatzclausule volgens_regelsatz helpt bij het specificeren van een enkele regelsatz (bijvoorbeeld, 508, wcag2, wcag2.1) die gebruikt zal worden om de pagina te controleren.
expect(page)
.to be_audited_for_accessibility
.according_to_ruleset('wcag2.1')logging_results- Resultaten loggen clausule
Om resultaten van de basismatcher en clausules te loggen, roep de ketenbare methode resultaten_loggen aan zoals hieronder getoond.
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'
})Interoperabiliteit tussen clausules
Alle beschreven clausules kunnen worden gemengd en gekoppeld met methodechaining. Hieronder staan enkele voorbeelden.
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)Geavanceerd API-gebruik
Raadpleeg advanced usage om te zien hoe de API kan worden geconfigureerd voor:
- Aangepaste regels
- Aangepast pad naar axe-bron
- Gebruikregistratie
- Rapportage
