Einführung

Barrierefreiheit ist ein entscheidender Aspekt der Webentwicklung und stellt sicher, dass alle Benutzer, auch solche mit Behinderungen, effektiv mit Ihren Webanwendungen interagieren können. Automatisierte Barrierefreiheitstests helfen dabei, Barrierefreiheitsprobleme frühzeitig im Entwicklungsprozess zu erkennen und zu beheben. In diesem Beitrag untersuchen wir, wie Sie automatisierte Barrierefreiheitstests mit Cypress implementieren und dabei Tools wie Cypress-Axe nutzen, um Ihre Anwendungen integrativer zu gestalten.

Warum Barrierefreiheit wichtig ist

1. Rechtskonformität: Stellt sicher, dass Ihre Bewerbung rechtliche Anforderungen wie den Americans with Disabilities Act (ADA) und die Web Content Accessibility Guidelines (WCAG) erfüllt.
2. Benutzererfahrung: Verbessert die allgemeine Benutzererfahrung für alle Benutzer, auch für Benutzer mit Behinderungen.
3. Inklusivität: Zeigt ein Engagement für Inklusivität und Vielfalt und macht Ihre Bewerbung einem breiteren Publikum zugänglich.
4. SEO-Vorteile: Verbessert die Suchmaschinenoptimierung, da Suchmaschinen barrierefreie Websites bevorzugen.

Einrichten automatisierter Barrierefreiheitstests in Cypress

Um automatisierte Barrierefreiheitstests in Cypress durchzuführen, verwenden wir das Cypress-Axe-Plugin, das die Axe-Barrierefreiheits-Engine in Cypress integriert.

Schritt 1: Cypress und Cypress-axe installieren
Stellen Sie zunächst sicher, dass Cypress in Ihrem Projekt installiert ist. Wenn nicht, können Sie es mit dem folgenden Befehl installieren:

npm install cypress --save-dev

Als nächstes installieren Sie das Cypress-Axe-Plugin:

npm install cypress-axe --save-dev

Schritt 2: Zypressenaxt konfigurieren
Erstellen Sie im Verzeichnis cypress/support eine neue Datei mit dem Namen commands.js und fügen Sie den folgenden Code hinzu, um cypress-axe zu importieren und zu konfigurieren:

import 'cypress-axe';

Cypress.Commands.add('injectAxe', () => {
    cy.window({ log: false }).then(window => {
        let axe = require('axe-core');
        window.eval(axe.source);
    });
});

Cypress.Commands.add('checkA11y', (selector = null, options = null, violationCallback = null, skipFailures = false) => {
    cy.window({ log: false }).then(window => {
        let document = window.document;
        return axe.run(document, options).then(({ violations }) => {
            if (violations.length) {
                cy.wrap(violations, { log: false }).each(violation => {
                    let nodes = Cypress._.get(violation, 'nodes', []);
                    Cypress._.each(nodes, node => {
                        let target = Cypress._.get(node, 'target', []);
                        if (target.length) {
                            Cypress._.each(target, target => {
                                cy.wrap(target, { log: false }).then($target => {
                                    if (!skipFailures) {
                                        Cypress.log({
                                            name: 'a11y error!',
                                            message: violation.help,
                                            consoleProps: () => violation
                                        });

                                        violationCallback && violationCallback(violation);
                                    }
                                });
                            });
                        }
                    });
                });
            }
        });
    });
});

Schritt 3: Barrierefreiheitstests erstellen
Lassen Sie uns nun einen Cypress-Test erstellen, um die Barrierefreiheit einer Webseite zu überprüfen. Erstellen Sie im Verzeichnis cypress/e2e eine neue Datei mit dem Namen „accessibility.spec.js“ und fügen Sie den folgenden Code hinzu:

describe('Automated Accessibility Testing with Cypress', () => {
    beforeEach(() => {
        cy.visit('/');
        cy.injectAxe();
    });

    it('should have no detectable accessibility violations on load', () => {
        cy.checkA11y();
    });

    it('should have no detectable accessibility violations on specific elements', () => {
        cy.checkA11y('header');
        cy.checkA11y('main');
        cy.checkA11y('footer');
    });
});

In diesem Beispiel führen wir Barrierefreiheitsprüfungen für die gesamte Seite sowie für bestimmte Elemente wie Kopfzeile, Hauptinhalt und Fußzeile durch.

Anpassen von Barrierefreiheitsprüfungen

Sie können die Barrierefreiheitsprüfungen anpassen, indem Sie Optionen bereitstellen und Regeln konfigurieren. Sie können beispielsweise bestimmte Regeln ignorieren oder nur bestimmte Prüfungen durchführen.

Beispiel: Bestimmte Regeln ignorieren

cy.checkA11y(null, {
    rules: {
        'color-contrast': { enabled: false }
    }
});

Beispiel: Ausführen spezifischer Prüfungen

cy.checkA11y(null, {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    }
});

Umgang mit Verstößen gegen die Barrierefreiheit

Sie können Verstöße gegen die Barrierefreiheit behandeln, indem Sie eine Rückruffunktion bereitstellen, um die Verstöße zu protokollieren oder zu verarbeiten. Zum Beispiel:

cy.checkA11y(null, null, (violations) => {
    violations.forEach((violation) => {
        cy.log(`${violation.id} - ${violation.description}`);
        violation.nodes.forEach((node) => {
            cy.log(`Node: ${node.target}`);
        });
    });
});

Best Practices für Barrierefreiheitstests

1. Frühzeitig integrieren: Integrieren Sie Barrierefreiheitstests frühzeitig in den Entwicklungsprozess, um Probleme früher zu erkennen.
2. Regelmäßig testen: Führen Sie regelmäßig Barrierefreiheitstests als Teil Ihrer CI/CD-Pipeline durch, um eine kontinuierliche Compliance sicherzustellen.
3. Bilden Sie Ihr Team: Informieren Sie Ihr Entwicklungsteam über Best Practices und Richtlinien zur Barrierefreiheit.
4. Verwenden Sie manuelle Tests: Kombinieren Sie automatisierte und manuelle Tests, um alle Aspekte der Barrierefreiheit abzudecken, da automatisierte Tools möglicherweise nicht alles erfassen.

Abschluss

Automatisierte Barrierefreiheitstests mit Cypress und Cypress-Axe sind eine leistungsstarke Möglichkeit, um sicherzustellen, dass Ihre Webanwendungen für alle Benutzer zugänglich sind. Durch die Integration von Barrierefreiheitsprüfungen in Ihren Testprozess können Sie Probleme frühzeitig erkennen und beheben, was für ein besseres Benutzererlebnis sorgt und die Einhaltung von Barrierefreiheitsstandards gewährleistet. Befolgen Sie die in diesem Leitfaden beschriebenen Best Practices, um Ihre Anwendungen integrativer und zugänglicher zu gestalten.

Viel Spaß beim Testen!