Visuelle Builder machen es einfach, eine Seite schnell auszuliefern. Sie machen es auch einfach, eine Seite mit einem Bild ohnealtText, einem Aufruf-zu-Aktion-Button, der den Farbkontrast nicht erfüllt, einer Überschrift, die vonh1nachh4 springt, und einem leeren<title>Tag, der Ihr Suchranking leise ruiniert, auszusenden. Nichts davon erscheint auf der Leinwand. Es taucht später auf – bei einer Prüfung, einer Compliance-Überprüfung oder einem Support-Ticket.
Grapesjs-A11Y-SEO schließt diese Lücke. Es handelt sich um ein kostenloses, quelloffenes Plugin, das zwei Panels zu deinem GrapesJS-Editor hinzufügt: einen Live-Accessibility-Auditor rund um WCAG 2.1 / 2.2 und einen SEO-Metadatenmanager mit echten Such- und Social-Previews. Man kann es sich wie Lighthouse vorstellen , das im Editor läuft – nur dass jeder Befund direkt an die Komponente angeschlossen ist, die sie verursacht hat.
Du kannst die Live-Demo ausprobieren, bevor du ein weiteres Wort liest.
Das Problem mit der "Prüfung später"
Barrierefreiheit und SEO werden in der Regel als letzter Durchgang behandelt – etwas, das ein Fachmann nach der "fertiggestellten Seite" überprüft. Bis dahin ist die Lösung teuer: Jemand muss den Bericht reproduzieren, das fehlerhafte Element in einem Baum verschachtelter Blöcke finden und es bearbeiten, ohne das Layout zu zerstören.
Die Kernidee hinter diesem Plugin ist es, diese Arbeit dorthin zu verlagern, wo die Seite tatsächlich aufgebaut ist, und jedes Problemdirekt umsetzbar zu machen. Statt einer flachen Liste von Fehlern, die man manuell abgleichen muss, erhält man Ergebnisse, die genau die GrapesJS-Komponente auf der Leinwand auswählen, zu ihnen scrollen und hervorheben – und, wo die Korrektur eindeutig ist, mit einem einzigen Klick beheben.
Barrierefreiheits-Audit, das auf die genaue Komponente hinweist
Der Auditor wird mit 15 eingebauten Regeln ausgeliefert , die die Probleme abdecken, die reale Audits tatsächlich nicht bestehen: Alt-Text, Farbkontrast, Überschriftstruktur, Linknamen, Formularbeschriftungen, ARIA-Gültigkeit, Landmarks,tabindex Zielgröße, Medienunterschriften, iframe-Titel, doppelte IDs, Tabellenstruktur, Dokumentensprache und Schriftgröße.
Was sie im Alltag nützlich macht, ist, wie sich die Ergebnisse verhalten:
- An die Komponente gebunden.Klicken Sie auf einen Fund, und die verantwortliche Komponente wird ausgewählt, in die Ansicht gescrollt und auf der Leinwand hervorgehoben. Kein Raten mehr, welche von vierzig Blöcken der Bericht meinte.
- Ein-Klick-Schnelllösungen.Wo eine Lösung sicher und eindeutig ist, wendet das Plugin sie über die Component-API an – und es ist unmöglich. Eine "Alles sicher beheben"- Aktion fasst diese zu einem einzigen Rückgängig-Schritt zusammen.
- Strenge auf den ersten Blick.Badges erscheinen im Layer Manager, eine "Probleme hervorheben"- Overlay markiert Probleme auf der Leinwand, und ein Fokus-Order-Visualisator sowie ein Barrierefreiheitsbaum ermöglichen es Ihnen, die Seite so zu sehen wie unterstützende Technologien.
- Basislinie / "Wird nicht reparieren."Echte Projekte haben bekannte Ausnahmen. Du kannst die Ergebnisse als akzeptiert markieren, und dieser Zustand wird mit dem Projekt gespeichert, sodass dein Bericht ehrlich bleibt, ohne dich zu nerven.
- Axe-Core, wenn du 100% willst.Die 15 Regeln laufen ohne Laufzeitabhängigkeiten. Wenn du volle Abdeckung brauchst, ist Axe-Core ein optionaler Peer, den du aktivieren kannst.
Dieser letzte Punkt ist für den Versand wichtig: Das Browser-Bundle bleibt standardmäßig schlank, und du wählst die schwerere Engine nur dort, wo sie ihren Platz verdient.
SEO, das mit deinen Seiten lebt
Das zweite Panel behandelt Metadaten als Teil der Seite, nicht als eine Tabelle, die du anderswo pflegest. Für jede Seite verwalten Sie Titel, Beschreibung, kanonische URL, Roboter-Direktiven, ein Fokus-Schlüsselwort, die Felder Open Graph und Twitter sowie das Favicon.
Da es die halbe Miete ist, zu erraten, wie Metadaten gerendert werden, bietet das Plugin dir Live-Vorschauen:
- EineGoogle-SERP-Vorschau mit echter Pixel-Breiten-Abkürzung, sodass du genau siehst, wo dein Titel und deine Beschreibung geschnitten werden.
- Öffne Graph und Twitter-Karten-Vorschauen , sodass ein geteilter Link so aussieht, wie du es beabsichtigt hast.
Darüber hinaus gibt es eine SEO-Checkliste und JSON-LD-strukturierte Daten für die gängigen Schematypen – Artikel, Produkt, Organisation, BreadcrumbList, FAQPage und Webseite. Wenn Sie bereit sind zu veröffentlichen, wirdgetHeadHtml() die SEO-API offengelegt,renderPage() sodassgetSitemap() die Metadaten, diesitemap.xmlSie im Editor entworfen haben, als sauberes, produktionsbereites Markup erscheinen.
Anfang
Installieren Sie es von npm:
npm i grapesjs-a11y-seo Registrieren Sie das Plugin wie jedes andere GrapesJS-Plugin:
import grapesjs from 'grapesjs'; import a11ySeo from 'grapesjs-a11y-seo'; import 'grapesjs-a11y-seo/style.css'; const editor = grapesjs.init({ container: '#gjs', plugins: [a11ySeo], pluginsOpts: { 'grapesjs-a11y-seo': { hotkey: 'ctrl+shift+a', wcagLevel: 'AA', wcagVersion: '2.2', }, }, }); Öffne das Panel mit dem Hotkey (Ctrl/⌘ + Shift + A) oder der Symbolleiste, ♿ und das Audit läuft auf deiner aktuellen Seite. Das ist das ganze Setup – alles andere ist eine Konfiguration, die du später hinzufügen kannst.
Über den Editor hinaus: CI, Studio und i18n
Das Plugin ist so gestaltet, dass es in einen echten Arbeitsablauf passt, nicht nur in eine Demo:
- Kontinuierliche Integration.Führe dieselben Regeln headless in deiner Pipeline aus:
npx grapesjs-a11y-seo-ci ./dist/*.htmlEs verlässt bei Fehlern nicht-null, sodass eine Regression in der Zugänglichkeit einen Build genauso scheitern lassen kann wie ein defekter Test. - GrapesJS Studio bereit.Es arbeitet in einfachem GrapesJS und ist vollständig kompatibel mit GrapesJS Studio, einschließlich mehrseitiger Projekte mit SEO-pro Seite.
- Lokalisiert und getippt.Englische, russische und spanische Bündel werden in der Box geliefert und jeder String ist übersteuerbar, sodass du die Audit-Benutzeroberfläche für deine eigenen Nutzer lokalisieren kannst. TypeScript-Typen sind enthalten, und das Ganze ist vom MIT lizenziert.
Für wen ist das
Wenn Sie Websites auf GrapesJS erstellen oder verkaufen – Agenturen, die Kundenaufträge abgeben, SaaS-Site-Builder oder Teams, die WCAG aus rechtlichen oder Beschaffungsgründen erfüllen müssen – verwandelt sich Zugänglichkeit und SEO von einem Nachlaunch-Durcheinander in einen Teil des Builds. Da die Ergebnisse an Komponenten gebunden sind und die meisten Reparaturen mit einem Klick erfolgen, können Nicht-Spezialisten die meisten Probleme ohne ein separates Audit-Tool oder eine Checkliste lösen, die sie vergessen zu öffnen.
Und es ist kostenlos. Lade es herunter, forke es, nutze es in privaten und kommerziellen Projekten.
Probier es mal
- Live-Vorschau:https://grapesjs-a11y-seo.netlify.app/?mode=plain
- Hol es dir auf GJS.Market:https://gjs.market/products/grapesjs-a11y-seo-accessibility-auditor-seo-for-grapesjs