Tests für Axe DevTools für Web für Browser-JavaScript schreiben

Tests mit Axe DevTools schreiben

Voraussetzungen

Um Axe DevTools für das Web zu importieren und zu initialisieren, muss es zuerst installiert werden. Falls Sie dies noch nicht getan haben, lesen Sie die Anleitung zur Installation aus Ihrem Artefakt-Repository oder aus Deques Agora.

Importieren und Initialisieren

Das Browser-Paket ist dafür gedacht, innerhalb einer gebündelten Testsuite zu laufen, daher wird es sowohl in JavaScript als auch in TypeScript mit der ES-Modul-Syntax importiert. @axe-devtools/browser liefert seine eigenen Typdeklarationen, sodass es kein separates @types/-Paket zu installieren gibt.

JavaScript

import { AxeDevTools } from '@axe-devtools/browser';

TypeScript

Der Import-Befehl ist derselbe. Fügen Sie den AxeResults-Typ aus axe-core hinzu, wenn Sie die Ergebnisse eines Scans annotieren möchten:

import { AxeDevTools } from '@axe-devtools/browser';
import type { AxeResults } from 'axe-core';

Initialisieren

Sobald Sie das Browser-Paket importiert haben, initialisieren Sie es mit dem Regelset, gegen das Sie testen möchten. Der Befehl ist in beiden Sprachen derselbe:

AxeDevTools.init('wcag2');

Das Regelset-Argument ist erforderlich, und TypeScript prüft es gegen die unterstützten Regelset-IDs: wcag2, wcag21, wcag22, wcag2aaa, wcag21aaa, wcag22aaa, 508, en301549, ttv5 und rgaav4.

Dieser Leitfaden zeigt den Nutzern, wie sie diese Axe DevTools-Bibliothek mit der react testing library integrieren

Sobald das Tool importiert und in Ihrer Testdatei initialisiert ist, ist das Hinzufügen von Tests für die Barrierefreiheit so einfach. Der unten stehende Codeausschnitt ist JavaScript und er wird unverändert in einer TypeScript-.tsx-Datei kompiliert; der Beispieldatei Abschnitt zeigt den vollständigen Test in beiden Sprachen.

test('Component has no accessibility violations', () => {
 const {container} = render(<Badcomp></Badcomp>);
 AxeDevTools.run(container, (err, results) => {
    expect(results.violations.length).toBe(0);
    done();
 });
});

Dieses Testfall rendert eine Komponente innerhalb des Container-Tools der React Testing Library und wird anschließend von Axe DevTools auf Barrierefreiheitsverletzungen geprüft. In diesem Beispiel werden keinerlei Barrierefreiheitsverletzungen erwartet, aber dies kann den Bedürfnissen Ihrer Organisation angepasst werden. Um mehr darüber zu erfahren, wie die Ergebnisse der Prüfungen genutzt werden können, lesen Sie den Leitfaden über das Ergebnisobjekt, der nach einem Scan zurückgegeben wird.

Beispieldatei

Diese Beispieldatei, die Axe DevTools mit der React-Testbibliothek verwendet, soll verdeutlichen, wie das Tool verwendet wird. Der gleiche Test wird in JavaScript und TypeScript gezeigt. Die Axe DevTools API ist in beiden identisch; die TypeScript-Version wird in einer .tsx-Datei ausgeführt und annotiert den Container und die Scan-Ergebnisse.

JavaScript

import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import { AxeDevTools } from '@axe-devtools/browser';
import "babel-polyfill"

describe('Bad Component', () => {

  beforeEach(function(done) {
    AxeDevTools.init('wcag2', function() {
      done();
    });
  });

   test('Component has no accessibility violations, w/ attest reporter', (done) => {
     const {container} = render(<Badcomp></Badcomp>);
     AxeDevTools.run(container, (err, results) => {
        expect(results.violations.length).toBe(0);
        done();
     });
   });
});

TypeScript

import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import { AxeDevTools } from '@axe-devtools/browser';
import type { AxeResults } from 'axe-core';
import "babel-polyfill"

describe('Bad Component', () => {

  beforeEach((done: jest.DoneCallback) => {
    AxeDevTools.init('wcag2', () => {
      done();
    });
  });

   test('Component has no accessibility violations, w/ attest reporter', (done: jest.DoneCallback) => {
     const container: HTMLElement = render(<Badcomp></Badcomp>).container;
     AxeDevTools.run(container, (err, results: AxeResults) => {
        expect(results.violations.length).toBe(0);
        done();
     });
   });
});

Nächste Schritte

Da Sie nun erfolgreich einen Barrierefreiheitsscan abgeschlossen haben, sind Sie bereit, zu fortgeschritteneren Themen wie Berichte erstellen und das Ergebnisobjekt verwenden überzugehen.

Fehlerbehebung

Wenn Sie Probleme mit den Scannergebnissen haben, kontaktieren Sie direkt Ihren Deque-Vertreter, erreichen Sie uns über unseren Support-Desk oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.