Accessibility, gesneden koek of heet hangijzer? Want hoe test je dat en tegen welke eisen eigenlijk? In dit blog ga ik dieper in op hoe je de toegankelijkheid van je website kunt testen met Playwright.
WAAROM ACCESSIBILITY CHECKS?
Accessibility, oftewel toegankelijkheid, is een belangrijk onderdeel van een website. Zeker als de doelgroep breed is zoals bijvoorbeeld het geval is bij websites van de overheid, verzekeraars, banken, etc.
Denk hierbij aan het gebruiken van voldoende contrast voor mensen die bijvoorbeeld kleurenblind zijn of de website “leesbaar” maken voor screenreaders voor mensen die slechtziend zijn.
Het is niet alleen vanuit een menselijk oogpunt, maar ook vanuit een zakelijk oogpunt interessant dat je je website voor zoveel mogelijk mensen toegankelijk maakt.
WAAR KAN IK DEZE EISEN VINDEN?
Al deze eisen zijn vastgelegd in de Web Content Accessibility Guidelines (WCAG). Deze (toetsbare) eisen zijn ingedeeld in drie conformiteitsniveaus: A, AA en AAA. Aan de hand van deze niveaus kan worden bepaald in hoeverre de website toegankelijk is voor de doelgroep. Meer informatie over wat welk niveau inhoudt lees je op de website van het WCAG.
HOE CONTROLEER JE ACCESSIBILITY MET PLAYWRIGHT?
Het is mooi dat er een instantie is die al deze richtlijnen in kaart heeft gebracht, maar hoe kan dit nu gecontroleerd worden zonder de hele html van de pagina te moeten uitpluizen? Daar gebruikt Playwright de package axe-core voor. Door de axe-core package te implementeren in de code kan Playwright automatisch testen of de website voldoet volgens de opgegeven standaard.
Ook is het mogelijk om bepaalde stukken html uit te sluiten als er bijvoorbeeld known issues zijn of als er zaken zijn die buiten de scope vallen van de accessibility. Of andersom door ze juist in te sluiten als maar een deel van de website aan bepaalde eisen moet voldoen.
Alle bevindingen worden in een rapport gezet en kunnen aan het testrapport worden gekoppeld. Standaard is de rapportage in JSON, maar met behulp van de package axe-html-reporter kunnen er ook html rapportages worden aangemaakt.
CODE VOORBEELD
Hieronder staat een voorbeeld hoe de code als aparte klasse kan worden toegepast. In dit voorbeeld moeten er twee verplichte parameters worden meegegeven: Page, TestInfo. De parameter ‘extraInfo’ geeft de mogelijkheid om nog iets aan de naam van het rapport toe te voegen. En als laatste is er een (enum)parameter ‘rapport’ die je laat switchen tussen een JSON of een HTML rapport als resultaat.
Er wordt gebruik gemaakt van de eisen: ‘wcag2a’, ‘wcag2aa’, ‘wcga21a’, ‘wcag21aa’ en in dit voorbeeld worden er twee selectors buiten gesloten: ‘.collapse__title’, ‘.input__group.input__group—radio’.
Aan de hand van wat er gekozen is bij de rapport parameter zal er een JSON of een HTML rapport aan het testrapport worden toegevoegd.
import { expect, TestInfo, test, Page } from '@playwright/test'
import AxeBuilder from '@axe-core/playwright'
import { createHtmlReport } from 'axe-html-reporter'
export class AccessibilityCheck {
async checkFullPage(page: Page, testInfo: TestInfo, extraInfo: string = '', rapport: Rapport = Rapport.HTML) {
await test.step('Accessibility check', async () => {
const paginanaam = (await page.title()) + '-' + extraInfo
const accessibilityScanResults = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcga21a', 'wcag21aa'])
.exclude('.collapse__title')
.exclude('.input__group.input__group--radio')
.analyze()
if (rapport == Rapport.JSON) {
await testInfo.attach('json-accessibility-scan-results-' + paginanaam, {
body: JSON.stringify(accessibilityScanResults, null, 2),
contentType: 'application/json',
})
}
if (rapport == Rapport.HTML) {
await testInfo.attach('html-accessibility-scan-results-' + paginanaam, {
body: createHtmlReport({
results: accessibilityScanResults,
options: {
outputDir: 'axe-core-report',
reportFileName: 'html-accessibility-scan-results-' + paginanaam + '.html',
},
}),
contentType: 'text/html; charset=UTF-8',
})
}
expect.soft(accessibilityScanResults.violations).toEqual([])
})
}
}
export enum Rapport {
HTML,
JSON,
}En zo implementeer je de bovenstaande class in je testscript. Hier wordt ook gebruik gemaakt van een test.step om alle stappen van de accessibility check samen te pakken in één regel van het testrapport.
import { test } from '@playwright/test'
import { AccessibilityCheck, Rapport } from '../utils/AccessibilityCheck'
let accessibilityCheck: AccessibilityCheck
test('Accessibility checks voorbeeld', async ({ page }, testInfo) => {
accessibilityCheck = new AccessibilityCheck()
await page.goto('http://www.example.com')
await test.step('Controleer accessibility', async () => {
await accessibilityCheck.checkFullPage(page, testInfo, 'voorbeeld', Rapport.HTML)
})
}) HOE ZIET DE RAPPORTAGE ERUIT?
Hier is een voorbeeld van de HTML rapportage. Hierin is te zien dat er één violation met als impact critical is gevonden. In het ‘Failed’ gedeelte wordt uitgelegd wat er fout ging en waarom dat fout is. De grijze balken met de blauwe tekst zijn open te klappen en bevatten meer informatie over de overige uitgevoerde testen.
HOE TE INSTALLEREN?
Uiteraard moet Playwright geïnstalleerd zijn, omdat we daar onze testen mee draaien. Als Playwright nog niet geïnstalleerd is, voer dan de onderstaande commandline uit voor de initiële installatie van Playwright n.b. Het is belangrijk dat je in de commandline uitvoert in de project folder, want daar wordt het geïnstalleerd:
npm init playwright@latest Voor het installeren van axe-core, voer je de onderstaande command line uit:
npm install @axe-core/playwrightVoor het installeren van de axe-html-reporter voer je deze command line uit:
npm i -D axe-html-reporter CONCLUSIE
Playwright in combinatie met axe-core maakt accessibility testen een fluitje van een cent en zorgt daarmee voor een nóg betere ervaring voor de gebruikers. De eenvoud waarmee het te implementeren is zorgt ervoor dat er eigenlijk geen reden is voor een testengineer om het niet mee te nemen in de automatische testen.
