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

Tests mit Axe DevTools schreiben

Voraussetzungen

Um Seiten mit Axe DevTools zu testen, müssen Sie es zuerst in Ihr Projekt importieren und initialisieren. Wenn Sie diesen Schritt noch nicht abgeschlossen haben, sehen Sie diesem Leitfaden an, wie es geht.

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.