Verwenden der axe Linter-Erweiterung für VS Code

Mit der axe DevTools Linter-Erweiterung für VS Code können Sie Ihren Code innerhalb der VS Code IDE auf Zugänglichkeitsprobleme überprüfen. Sie können React (JSX), React Native, Angular, Vue, HTML und Markdown auf häufige Zugänglichkeitsmängel überprüfen.

Abrufen der Erweiterung

Normalerweise laden Sie die Erweiterung vom [VS Code-Erweiterungsmarktplatz] herunter(https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter). Klicken Sie auf die Schaltfläche Installieren , um die Erweiterung herunterzuladen und dann um die Berechtigung zum Öffnen von VS Code zum Installieren der Erweiterung zu bitten.

Weitere Möglichkeiten zum Herunterladen und Installieren der Erweiterung finden Sie unter Installation in eingeschränkten Umgebungen .

Übersicht über die Verwendung

Die Erweiterung hebt Zugänglichkeitsfehler im VS-Code mit einer roten Wellenlinie hervor und bietet einen Tooltip, der auf den Fehler hinweist. Darüber hinaus zeigt der Bereich Probleme weiter unten (sofern aktiviert) eine Liste der Fehler an, wie unten dargestellt:

Der Tooltip und die Informationen im Bereich Probleme enthalten einen Link zu Deque University , wo Sie weitere Informationen zum angegebenen Barrierefreiheitsfehler finden. Im gezeigten Beispiel fehlt im Codebeispiel das lang -Attribut im html -Element, das an der Deque University besprochen wird: html-has-lang.

Konfiguration

Das Konfigurieren der Erweiterung ist nicht erforderlich, Sie können ihr Verhalten jedoch mithilfe von Konfigurationsdateien ändern. Weitere Informationen finden Sie unter:

• Konfigurieren von axe DevTools Linter für eine Referenz zu den Konfigurationsoptionen von axe DevTools Linter
• Linten von benutzerdefinierten Komponenten mit dem Axe Accessibility Linter für VS Code oder JetBrains IDEs für Informationen zum Konfigurieren der Erweiterung zum Linten von Komponenten

Unterstützung von Barrierefreiheitsregeln

Weitere Informationen zu den Regeln, die das Plug-In zum Auffinden von Barrierefreiheitsfehlern verwendet, finden Sie unter Barrierefreiheitsregeln.

Installation in eingeschränkten Umgebungen

In den meisten Fällen können Sie den Axe Accessibility Linter direkt vom VS Code Marketplace installieren. In manchen Organisationen gelten jedoch Sicherheitsbeschränkungen, die den Installationsprozess auf zwei Arten beeinträchtigen:

1. Sie können nicht vom VS Code Marketplace herunterladen.
2. Die Erweiterung kann beim ersten Ausführen die erforderliche Binärkomponente nicht herunterladen. Diese Komponente führt die Lint-Prüfung Ihrer Dateien durch und ist betriebssystemspezifisch.

Wenn in Ihrer Organisation diese Einschränkungen gelten, benötigen Sie eine axe DevTools Linter-Lizenz, um auf das Agora-Software-Repository von Deque zugreifen zu können. Anschließend können Sie ein .vsix Paket für die Erweiterung herunterladen.

Über die Installationspakete auf Agora

Deque bietet zwei Paketoptionen im Agora-Software-Repository:

Sie sehen einen Verzeichnis-Viewer mit allen Versionen der Erweiterung, zum Beispiel:

Normalerweise wählen Sie die neueste Version aus und durchsuchen die Unterverzeichnisse, bis Sie die Datei finden. .vsix

Installationsschritte

1. Laden Sie Ihr bevorzugtes .vsix Paket aus dem Deque Agora-Repository herunter.
2. Öffnen Sie in VS Code das Bedienfeld Erweiterungen .
3. Klicken Sie auf das Überlaufmenü (...).
4. Wählen Sie Von VSIX installieren..., die letzte Option im Menü.
5. Wählen Sie Ihre heruntergeladene .vsix Datei aus.

Nächster Schritt

Diese Dokumentationsseite enthält Informationen zur Verwendung der verschiedenen axe DevTools Linter-Angebote. Weitere Informationen finden Sie unter Über axe DevTools Linter.