Über Axe DevTools Linter
Überblick über Axe DevTools Linter und diese Dokumentationsseite
Was ist Linting?
Linting ist der automatisierte Prozess der Analyse von Quellcode, um Probleme zu finden, bevor der Code ausgeführt wird. Ein Linter ist ein Werkzeug, das Ihren Code liest und Probleme aufzeigt, von Syntaxfehlern und Tippfehlern bis hin zu stilistischen Inkonsequenzen und potenziellen Bugs.
Der Begriff stammt von einem Unix-Tool namens lint, das ursprünglich C-Programme auf verdächtige Konstrukte überprüfte. Heute gibt es Linter für nahezu jede Programmiersprache und sie dienen als erste Verteidigungslinie für Code-Qualität.
Stellen Sie sich einen Linter wie eine Rechtschreibprüfung für Code vor, außer dass er nicht nur Tippfehler entdeckt, sondern auch logische Fehler erkennt, Stilregeln durchsetzt und vor Mustern warnt, die wahrscheinlich Bugs verursachen.
Was ist ein Accessibility Linter?
Ein Accessibility Linter überprüft auf potenziell schlechte Praktiken im Bereich Barrierefreiheit und gibt Ihnen Feedback, während Sie entwickeln, anstatt erst nachdem Ihre Website oder Anwendung erstellt und läuft.
Was Axe DevTools Linter tut
Axe DevTools Linter führt eine statische Analyse Ihrer Quelldateien durch. Es liest Ihren Code und prüft ihn gegen Deque's Regeln, um Muster zu identifizieren, die wahrscheinlich Zugänglichkeitsprobleme verursachen. Zum Beispiel kann es Folgendes erkennen:
- Bilder ohne alternativen Text
- Formulareingaben ohne Beschriftungen
- Falsche oder fehlende ARIA-Attribute
- Probleme mit der Überschriftenstruktur
Da es den Quellcode anstatt einer laufenden Anwendung analysiert, kann Axe DevTools Linter diese Probleme früh erkennen, bevor der Code zusammengeführt, bereitgestellt oder sogar kompiliert wird.
Diese Überprüfungen sind nicht auf native HTML-Elemente beschränkt. Die meisten Teams bauen Schnittstellen aus einem Designsystem oder ihrer eigenen Komponentenbibliothek, und der Axe DevTools Linter kann auch diese Komponenten überprüfen. Siehe Linten Ihrer eigenen Komponenten unten.
Was Axe DevTools Linter nicht tun kann
Da Axe DevTools Linter ein statisches Analysetool ist, kann es nicht:
- Das Laufzeitverhalten Ihrer Anwendung testen, wie z.B. dynamisch geladene Inhalte oder von JavaScript gesteuerte UI-Änderungen.
- Jedes Barrierefreiheitsproblem erfassen; statische Analyse deckt nur eine Teilmenge der erkennbaren Defekte ab, und einige Probleme erfordern browserbasierte Tests oder manuelle Überprüfung.
- Manuelle Barrierefreiheitstests oder browserbasierte Werkzeuge ersetzen.
- Prüfen Sie das Markup, das in eine Datei eines anderen Typs eingebettet ist. Siehe Unterstützte Technologien unten.
Unterstützte Technologien
Axe DevTools Linter kann die folgenden Dateitypen überprüfen:
| Technologie | Dateierweiterungen |
|---|---|
| React | .js, .jsx, .tsx |
| Vue | .vue |
| Angular | .component.html |
| HTML | .html, .htm, .xhtml |
| LiquidJS | .liquid |
| HTL (Adobe Experience Manager) | .htl |
| Markdown | .md, .markdown |
| React Native | Siehe Axe DevTools Linter für React Native |
Axe DevTools Linter wählt pro Datei einen Linter aus, basierend auf der Dateiendung, und überprüft nur das Markup, das in der eigenen Sprache der Datei geschrieben ist. Markup, das in einer anderen Sprache innerhalb der Datei eingebettet ist, wird nicht überprüft. Zum Beispiel werden in einer .html-Datei Elemente, die JavaScript innerhalb eines <script>-Blocks erstellt, nicht gelintet, und in einer .js- oder .tsx-Datei wird HTML, das innerhalb eines Template-Literals oder eines Strings zusammengesetzt wird, nicht gelintet.
Linten Ihrer eigenen Komponenten
Quelldateien in einer modernen Codebasis enthalten selten viel reines HTML. Das Markup wird in Form eines Designsystems oder einer internen Komponentenbibliothek geschrieben, sodass eine Quelldatei <DqButton> oder <custom-image> enthält, wo der Browser schließlich ein <button> oder ein <img> erhält. Ein Linter, der nur native Elemente versteht, hätte sehr wenig zu prüfen.
Der Axe DevTools Linter überprüft diese Komponenten, sobald Sie ihm mitteilen, wie jede auf ein natives HTML-Element abgebildet wird. Eine Abbildung besteht aus wenigen Konfigurationszeilen und kann folgendes tun:
- Ordnen Sie Ihre Komponente einem nativen Element zu.
- Ordnen Sie die Attribute Ihrer Komponente den Attributen dieses Elements zu, einschließlich der Umbenennung.
- Verwandeln Sie eines der Attribute Ihrer Komponente in den Textinhalt des Elements.
- Übermitteln Sie jedes ARIA-Attribut mit einem einzigen Platzhalter anstatt jedes einzeln aufzulisten.
- Wählen Sie, welches Element basierend auf dem Wert eines Attributs ausgegeben wird, für Komponenten, die in unterschiedlichen Situationen unterschiedlich gerendert werden.
Sobald eine Abbildung existiert, gelten die Barrierefreiheitsregeln, die für das native Element gelten, auch für Ihre Komponente. Ein <DqButton>, das auf <button> abgebildet ist, muss einen zugänglichen Namen haben; ein <custom-image>, das auf <img> abgebildet ist, muss Alternativtext haben.
Deque liefert vorkonfigurierte Abbildungen für einige weit verbreitete Komponentenbibliotheken, sodass Sie möglicherweise keine eigenen Abbildungen schreiben müssen, je nachdem, womit Sie arbeiten.
Um zu beginnen, lesen Sie Linting benutzerdefinierter Komponenten für einen Überblick und folgen dann der Anleitung für VS Code und JetBrains oder der REST-Endpunkt. Vorkonfigurierte Komponentenbibliotheken listet die Bibliotheken auf, die der Axe DevTools Linter bereits kennt.
Möglichkeiten zur Nutzung von Axe DevTools Linter
Axe DevTools Linter kann je nach Arbeitsablauf auf verschiedene Arten verwendet werden:
IDE-Erweiterungen bieten Echtzeit-Feedback, während Sie Code schreiben. Die VS Code-Erweiterung (auch verfügbar für mit VS Code kompatible KI-IDEs wie Cursor und Windsurf) und JetBrains-Plugin (WebStorm und IntelliJ IDEA Ultimate) zeigen Zugänglichkeitsprobleme direkt in Ihrem Editor an, während Sie tippen.
Der Connector ist ein Kommandozeilen-Tool zum Linten von Dateien im Batch, in Skripten oder als Teil einer CI/CD-Pipeline. Siehe Verwendung des Axe DevTools Linter Connectors.
Die GitHub-Aktion überprüft Dateien, die in einem Pull-Request geändert wurden, und meldet Zugänglichkeitsprobleme. Siehe Die Axe DevTools Linter GitHub-Aktion.
Andere CI/CD-Integrationen umfassen Jenkins, SonarQube und Git pre-commit hooks.
Wo die Analyse ausgeführt wird
Lokales Linting: Die VS Code-Erweiterung, das JetBrains-Plugin und der Connector (mit der --local-Option) führen eine Zugänglichkeitsanalyse auf Ihrem eigenen Rechner durch. Datei-Inhalte verlassen niemals Ihren Computer.
Server-basiertes Linting: Der Connector kann Ihre Dateien auch an einen Axe DevTools Linter-Server zur Analyse senden. Dies ist der Ansatz, den die GitHub-Action verwendet. Es gibt zwei Server-Optionen:
- Deque-gehostetes SaaS: Deques Cloud-Server. Erfordert einen API-Schlüssel; keine Server-Installation nötig.
- Vor Ort: Ein Server, den Sie in Ihrer eigenen Infrastruktur betreiben. Siehe Installation und Sicherheit.
Für Anleitungen zur Auswahl zwischen lokalem und serverbasiertem Linten mit dem Connector, siehe Lokales Linting.
Dokumentationsübersicht
Die richtige Einrichtung für Axe DevTools Linter wählen hilft Ihnen, das passende Bereitstellungsmodell, die geeigneten Integrationen und Konfigurationen für den Arbeitsablauf Ihres Teams zu bestimmen.
Einen Axe DevTools Linter SaaS API-Schlüssel erhalten zeigt Ihnen, wie Sie einen Schlüssel erhalten, um auf Deques cloudbasierten Linting-Dienst zuzugreifen.
Zugänglichkeitsregeln listet alle Regeln auf, die Axe DevTools Linter überprüft, mit Links zu detaillierten Informationen auf Deque University.
Konfiguration des Axe DevTools Linters behandelt die Konfigurationsoptionen, die in der VS Code-Erweiterung, im JetBrains-Plugin, im Axe DevTools Linter Connector und im REST-API-/lint-source-Endpunkt verfügbar sind.
Installation und Sicherheit enthält Artikel zum Installieren des lokalen Servers und zum Absichern mit NGINX als Reverse Proxy.
Verwendung des Axe DevTools Linters deckt die verschiedenen Integrationen ab: die JetBrains-Plugin, VS Code-Erweiterung, Connector CLI, GitHub-Aktion, Pre-Commit-Hook, Jenkins und SonarQube.
Linting benutzerdefinierter Komponenten diskutiert die Unterstützung von Axe DevTools Linter für benutzerdefinierte Komponenten, mit Anleitungen für VS Code und JetBrains-Benutzer und REST-Endpunkt-Benutzer sowie einem Artikel über vorkonfigurierte Komponentenbibliotheken.
Entwicklung mit den REST-APIs beschreibt, wie man programmgesteuert auf Axe DevTools Linter mittels seiner REST-Schnittstelle zugreift.
Credits bietet Quellenangaben und Lizenzinformationen für Drittanbieter-Software, die von Axe DevTools Linter verwendet wird.
Note: It is never necessary to use Deque's software or services in a way that collects, stores, or shares personal data. Do not use the software or services in a manner that collects, stores, or shares personal data.