Automatisierte (und geführte!) Barrierefreiheits-Audits mit axe Pro

❥ Sponsor

Es ist wichtig zu wissen, dass es Werkzeuge für automatisierte Barrierefreiheits-Tests von Websites gibt. Sie sind ein entscheidender Bestandteil, um sicherzustellen, dass Ihre Website für jeden nutzbar ist, was sowohl ein ehrenhaftes Ziel als auch verdammt gut für das Geschäft ist. Automatisierte Tests erfassen nicht jedes potenzielle Barrierefreiheits-Problem, aber sie helfen enorm und fördern meiner Erfahrung nach eine Kultur, die sich um Barrierefreiheit kümmert. Je ernster Sie diese Tests nehmen und die Probleme tatsächlich beheben, desto wahrscheinlicher ist es, dass Sie insgesamt gute Arbeit bei der Barrierefreiheit leisten.

Es gibt ein Testwerkzeug, das sich von den anderen abhebt: axe (es ist sogar das, was Googles Lighthouse verwendet), und jetzt ist es mit axe Pro noch viel besser geworden.

Die axe-Erweiterung ist immer noch die Powerhouse, bei der robuste Barrierefreiheits-Berichte nur einen Klick entfernt in DevTools sind

axe in Chrome DevTools

Aber es gibt noch mehr!

Geführte Frage-Antwort-Barrierefreiheits-Walkthroughs

Um nicht die wichtigste Nachricht zu verstecken, ist dies wahrscheinlich das beste neue Feature von axe Pro. Das Werkzeug ist so benutzerfreundlich, dass es die Kräfte für Barrierefreiheits-Tests fast jedem gibt

„Axe Pro ermöglicht es im Wesentlichen jedem Entwickler, als interner Barrierefreiheits-Experte zu fungieren“, sagt Preety Kumar, CEO von Deque Systems.

Führen Sie die Tests aus und es stellt Ihnen einfach Fragen in einfacher Sprache.

Screenshot of axe asking me if the page title is correct on this page
Jeder kann Fragen aus einer geführten Tour wie dieser beantworten. Es ist äußerst hilfreich, durch das Nachdenken über diese wichtigen Aspekte Ihrer Website geführt zu werden.

Zum Beispiel, hier ist ein Test-Walkthrough, der mir hilft, über Header und Header-Level nachzudenken

Step 1: start test
Step 2: Identify headers that shouldn't be.
Step 3: Identify elements that should be headers but aren't.

Zuerst *identifizieren* Sie die Probleme, dann können Sie die Informationen speichern, damit Sie an den *Korrekturen arbeiten* können, sobald Sie dazu in der Lage sind.

Ihre Tests können als Online-Berichte gespeichert werden

Die Arbeit in DevTools ist gut und der perfekte Ort, um die Barrierefreiheits-Probleme auf Ihrer Website zu untersuchen. Aber diese Sitzung in DevTools ist kurzlebig! Es ist nur ein Entwickler, der zu einem Zeitpunkt an einem Computer arbeitet. Mit dem neuen axe Pro Web-Dashboard können Sie Ihre Tests online speichern. Dies ist aus verschiedenen Gründen nützlich

  • Sie können Ihre bisherigen Tests speichern und später darauf zurückkommen, um fortzufahren.
  • Sie können Tests löschen und neu durchführen, um Ihren Fortschritt zu verfolgen.
  • Sie können mehrere Tests auf dem Dashboard haben, um mehrere Seiten und Projekte zu testen.
  • Ihr Team hat ein Zuhause, um diese Tests gemeinsam zu verwalten.

Sie können die Daten exportieren

Wenn Sie die Ergebnisse lieber aus axe und woanders herausbekommen möchten, können Sie die Daten jetzt als JSON oder CSV exportieren. Vielleicht möchten Sie die Ergebnisse im Laufe der Zeit verfolgen, um Verbesserungen zu visualisieren oder die Informationen in ein anderes Tool zu übertragen. Die Daten gehören Ihnen.

export dialog box for axe test results

Ich fand sofort hilfreiche Hinweise.

Ich möchte glauben, dass ich mich um Barrierefreiheit kümmere und im Laufe der Zeit barrierefrei arbeite, aber wenn Sie mir ähneln, werden Sie feststellen, dass sich im Laufe der Zeit Fehler in Ihre Codebasen einschleichen. Genauso wie wir automatisierte Werkzeuge haben können, um unsere Leistungskennzahlen im Laufe der Zeit zu überwachen, können und sollten wir regelmäßig Barrierefreiheit testen, insbesondere wenn Automatisierung hilfreich ist, wie sie axe Pro bietet.

Nur beim Spielen mit axe Pro für ein paar Stunden habe ich...

  • Viele Bilder mit fehlendem und falschem Alt-Text gefunden.
  • Ein paar Elemente gefunden, die Header-Tags verwendeten, die sie wirklich nicht hätten verwenden sollen.
  • Einige Farbkontraste bei einigen Elementen behoben, die gerade nicht AA waren, und leichte Anpassungen brachten sie dorthin.

Das zweite fand ich sehr befriedigend, da mir die geführte Tour dabei geholfen hat, es zu finden. Das ist etwas, das ein *vollständig* automatisiertes Werkzeug nicht wirklich hilft zu finden, es erfordert, dass man sich Dinge ansieht und Urteile fällt.

Ich bin sehr optimistisch, dass dies vielen Leuten helfen wird, Barrierefreiheits-Probleme aufzudecken, die sie sonst nicht entdeckt hätten.

Es ist für kurze Zeit kostenlos

Es ist irgendwie eine große Sache

Entwickler können typischerweise etwa die Hälfte aller kritischen Barrierefreiheits-Blocker durch axe identifizieren.

Sie können es genauso gut ausprobieren!