A11yMate is a VS Code extension designed to help developers identify and fix accessibility (a11y) issues in HTML and PHP files directly within the editor. It features real-time analysis, CodeLens indicators, and Quick Fixes.
A11yMate ist eine VS Code-Erweiterung, die Entwicklern hilft, Barrierefreiheitsprobleme (a11y) in HTML- und PHP-Dateien direkt im Editor zu erkennen und zu beheben. Sie bietet Echtzeitanalyse, CodeLens-Indikatoren und Quick Fixes.
- Real-time Analysis / Echtzeitanalyse: Checks for missing attributes (e.g.,
alton<img>) and structural issues (e.g., missing<main>). / Prüft auf fehlende Attribute (z. B.altbei<img>) und strukturelle Probleme (z. B. fehlendes<main>). - Color Contrast / Farbkontrast: Verifies WCAG AA compliance for text and UI elements. / Überprüft die Einhaltung von WCAG AA für Text und UI-Elemente.
- Form Accessibility / Formular-Barrierefreiheit: Ensures required inputs have associated descriptions. / Stellt sicher, dass erforderliche Eingabefelder verknüpfte Beschreibungen haben.
- Heading Structure / Überschriftenstruktur: Validates the hierarchy (h1-h6). / Validiert die Hierarchie (h1-h6).
- Language Attribute / Sprachattribut: Checks for the presence of the
langattribute on the<html>tag. / Prüft auf das Vorhandensein deslang-Attributs im<html>-Tag. - CodeLens: Shows status directly above the code. / Zeigt den Status direkt über dem Code an.
- Quick Fixes: Automatically fix common issues. / Behebt häufige Probleme automatisch.
- Bilingual / Zweisprachig: Supports English and German. / Unterstützt Englisch und Deutsch.
This guide explains how to add a new check (rule) for a tag or attribute cleanly. Dieser Leitfaden erklärt, wie man sauber eine neue Prüfung (Regel) für einen Tag oder ein Attribut hinzufügt.
Create a new file in src/rules/, e.g., src/rules/my-new-rule.ts.
Erstelle eine neue Datei in src/rules/, z. B. src/rules/my-new-rule.ts.
import { A11yRule, RuleContext } from "../types";
import { HtmlNode } from "../html-types";
import { getLanguage } from "../language";
export const myNewRule: A11yRule = {
id: "my-new-rule", // Unique ID / Eindeutige ID
// OPTION A: Check specific attributes on a single node
// OPTION A: Prüfe spezifische Attribute an einem einzelnen Knoten
check(node: HtmlNode, context: RuleContext) {
if (node.tagName !== "div") return; // Target tag / Ziel-Tag
const lang = getLanguage();
// Check logic / Prüflogik
const hasRole = node.attributes.some(a => a.name === "role");
if (!hasRole) {
context.report({
message: "Missing role",
description: "Div needs a role.",
range: node.range
});
}
},
// OPTION B: Check document structure (e.g. count tags)
// OPTION B: Prüfe Dokumentenstruktur (z. B. Tags zählen)
checkDocument(nodes: HtmlNode[], context: RuleContext) {
// Traverse nodes recursively to count or find relations
// Durchlaufe Knoten rekursiv, um zu zählen oder Beziehungen zu finden
}
};Add your messages to src/languages/en.json and src/languages/de.json.
Füge deine Nachrichten zu src/languages/en.json und src/languages/de.json hinzu.
"myNewRule": {
"title": "⚠️ Issue found",
"description": "Description of the issue."
}Open src/extension.ts and add your rule to the rules array.
Öffne src/extension.ts und füge deine Regel zum rules-Array hinzu.
import { myNewRule } from "./rules/my-new-rule";
// ...
const rules: A11yRule[] = [imgAltRule, mainTagRule, myNewRule]; // Add here / Hier hinzufügenIf you want to offer an automatic fix, update src/quickfix.ts.
Wenn du eine automatische Korrektur anbieten möchtest, aktualisiere src/quickfix.ts.
- Open
src/quickfix.ts. / Öffnesrc/quickfix.ts. - In
provideCodeActions, check for yourdiagnostic.code. / Prüfe inprovideCodeActionsauf deinendiagnostic.code. - Implement a private method to create the
CodeAction. / Implementiere eine private Methode, um dieCodeActionzu erstellen.
Update src/codelens.ts to display a specific message for your tag.
Aktualisiere src/codelens.ts, um eine spezifische Nachricht für deinen Tag anzuzeigen.
- Open
src/codelens.ts. / Öffnesrc/codelens.ts. - Add a condition for your tag in
provideCodeLenses. / Füge eine Bedingung für deinen Tag inprovideCodeLenseshinzu.
src/extension.ts: Main entry point & rule registration. / Haupteinstiegspunkt & Regelregistrierung.src/rules/: Individual rule logic. / Individuelle Regellogik.src/languages/: Localization files. / Lokalisierungsdateien.src/codelens.ts: CodeLens provider logic. / CodeLens-Provider-Logik.src/quickfix.ts: Quick Fix provider logic. / Quick-Fix-Provider-Logik.