Der Begriff „Vibe-Coding“ gab es vor 2025 noch gar nicht, doch dieser KI-gestützte Ansatz zur Codegenerierung ist bereits zur neuen Normalität geworden, da er es Entwicklern ermöglicht, Software schneller als je zuvor auf den Markt zu bringen.
KI kann und sollte ein leistungsstarkes Werkzeug in unserem Entwickler-Arsenal sein. Sie erweitert und ergänzt unsere Fähigkeiten und hilft uns, beim Schreiben von Code produktiver zu sein. Doch dieser Vorteil hat manchmal seinen Preis. Von KI generierter Code ist oft schlampig, redundant und unübersichtlich.
Das ist ein Problem.
Nun ist schlechter Code natürlich nichts Neues. Deshalb gibt es ja auch Testtools. Neu ist jedoch, wie viel davon wir mittlerweile produzieren – und wie schnell –, und zwar aufgrund des „Vibe-Codings“.
Was können wir tun?
Wenn „Vibe-Coding“ die schnelle Erstellung von Code erleichtert (wenn auch manchmal auf Kosten einer nicht ganz optimalen Barrierefreiheit), ist „Vibe-Fixing“ die naheliegende Lösung, um sicherzustellen, dass die Barrierefreiheit Schritt halten kann.
Es ist unerlässlich, unseren Code auf Barrierefreiheit zu prüfen, und dank moderner KI-Workflows ist das Testen der Barrierefreiheit einfacher denn je. Auch die Behebung der bei unseren Tests festgestellten Probleme ist einfacher denn je. Das bedeutet, dass wir beim Testen der Barrierefreiheit denselben Schub erzielen können wie beim Programmieren, da wir diese Probleme nun schneller beheben können. Wenn Sie eine Demonstration darüber wünschen, wie einfach der Einsatz von KI hierfür ist, fordern Sie einfach hier eine Demo an.
Von KI generierter Code ist oft mit Barrierefreiheitsfehlern gespickt
Schauen wir uns ein Beispiel aus der Praxis für vollständig von KI generierten Code an. Der folgende Code war Teil eines kürzlich erschienenen Blogbeitrags über den Einsatz von KI zur Umwandlung von Figma-Entwürfen in React-Code.
import React from 'react';
import './index.css';
export default function Main() {
return (
<div className='main-container'>
<div className='header'>
<button className='cart-button'>
<span className='basket'>Basket (3)</span>
</button>
<span className='world-peas'>World Peas</span>
<span className='shop'>Shop</span>
<span className='newstand'>Newstand</span>
<span className='who-we-are'>Who we are</span>
<span className='my-profile'>My profile</span>
</div>
<div className='we-are-farmers'>
<span className='comma'>We're </span>
<span className='purveyors'>farmers</span>
<span className='comma-1'>, </span>
<span className='purveyors-2'>purveyors</span>
<span className='comma-3'>, and </span>
<span className='purveyors-4'>eaters</span>
<span className='of-organically-grown-food'>
of organically grown food.
</span>
</div>
</div>
);
}
Dieser Code weist zahlreiche Probleme hinsichtlich der Barrierefreiheit auf, darunter:
- keine klare Überschriftenstruktur
- overuse of <span> tags
- no clear navigation or landmarks like <header>, <nav>, and <main>
- Links, die als einfacher Text behandelt werden und auf die der Fokus nicht gesetzt werden kann
- eine Warenkorb-Schaltfläche ohne korrekten barrierefreien Namen oder semantische Angaben zur Anzahl der Artikel
- hero text broken into multiple spans instead of a meaningful <h1>
Diese Probleme führen dazu, dass die Seite für Screenreader und Nutzer, die sich ausschließlich über die Tastatur bedienen, unbrauchbar ist. Das ist schlecht für Ihre Kunden und könnte Ihr Unternehmen teuer zu stehen kommen – sowohl in rechtlicher und finanzieller Hinsicht als auch in Bezug auf Ihren Ruf. (Weitere Informationen hierzu finden Sie im Artikel„Digitale Barrierefreiheit und die Kosten der Ausgrenzung“.)
Als Entwickler brauchen wir eine Möglichkeit, KI-generierten Code zu validieren und verantwortungsbewusst auszuliefern. Wenn KI uns dabei helfen soll, Code schnell zu generieren, müssen auch unsere Barrierefreiheitsprüfungen KI-gestützt sein, damit wir Schritt halten können.
Vibe Fixing gibt Einsteigern im Bereich Barrierefreiheit die Werkzeuge an die Hand, um hochwertige Produkte zu entwickeln
Wir haben gesehen, dass manche KI-Workflows keine barrierefreien Ergebnisse liefern, und wir haben dargelegt, warum Barrierefreiheitstests entscheidend sind, wenn unsere Anwendungen für Menschen funktionieren sollen, die auf assistive Technologien angewiesen sind. Was wir nun brauchen, ist eine Lösung, die sich nahtlos in bestehende Workflows einfügt. Viele Entwickler, die mit „Vibe Coding“ experimentieren, nutzen bereits MCP-Server (Model Context Protocol), um diese direkt in ihren KI-Workflow zu integrieren, und wir können dies auf der „Vibe Fixing“-Seite auf dieselbe Weise nutzen.
Mit dem axe MCP Server von Deque erhalten Ihre Barrierefreiheitstests denselben „Schub“, den KI Ihrer Programmierung verleiht. Der axe MCP Server scannt Ihr Projekt, kennzeichnet Barrierefreiheitsprobleme und bietet Korrekturen direkt in Ihrer IDE an. Da er das MCP-Protokoll nutzt, lässt er sich direkt in alle Agenten integrieren, die Sie wahrscheinlich bereits verwenden, wie beispielsweise Windsurf, Cursor oder Copilot. Das bedeutet, Sie können Copilot einfach bitten, Ihre Anwendung zu testen, und sich darauf verlassen, dass Sie Code ausliefern, der von Grund auf barrierefrei ist.
Vibe-Reparatur in Aktion
Die Einrichtung von Vibe innerhalb eines MCP-Workflows ist relativ einfach. In meinem eigenen Workflow habe ich den axe MCP-Server mit VS Code verbunden und Copilot im Agent-Modus geöffnet. Von dort aus konnte ich einfach wie folgt eine Eingabe in natürlicher Sprache vornehmen:
[code]
#http://localhost:3033/example-page auf Barrierefreiheitsprobleme analysieren,
#alle Verstöße beheben und erneut analysieren, um die Korrekturen zu überprüfen
[/code]
Innerhalb von Sekunden ruft Copilot das Analyse-Tool des axe MCP-Servers auf, das mithilfe der axe DevTools-Erweiterung einen vollständigen Barrierefreiheits-Scan im Browser durchführt und eine Liste mit Problemen ausgibt. Anschließend nutzt es das Behebungs-Tool, um gezielte, fachkundige Anleitungen zur Behebung (konkrete Code-Empfehlungen) bereitzustellen, die ich in meinem Editor übernehmen oder anpassen kann. Danach kann der Scan erneut durchgeführt werden, um zu überprüfen, ob alle Probleme behoben wurden. Damit ist der Barrierefreiheits-Testzyklus abgeschlossen.
Ich bin es gewohnt, mit mehreren Monitoren zu jonglieren und Localhost-Seiten mit Chrome DevTools zu testen, aber dass die Tests nun direkt in der IDE ablaufen – inklusive praktischer Korrekturen –, ist eine willkommene Veränderung. Ich nutze Copilot schon seit einiger Zeit, und dank der Plug-and-Play-Integration fühlt es sich wie eine natürliche Erweiterung meines Arbeitsablaufs an.
Nutzen Sie KI nicht nur für schnellen Code, sondern auch für barrierefreien Code
Bei richtiger Nutzung kann KI uns alle effizienter machen, uns bisher unbekannte Fähigkeiten verleihen und uns enorm viel Zeit sparen, indem sie die eher routinemäßigen Aspekte unserer Arbeit für uns übernimmt.
Nur weil KI nicht mehr wegzudenken ist, heißt das jedoch nicht, dass wir sie bedingungslos begrüßen sollten – wir müssen bei ihrem Einsatz umsichtig vorgehen.
Wir haben gerade ein Beispiel dafür gesehen, wie wir KI nutzen können, um die Barrierefreiheit in unseren Projekten zu verbessern, aber wir haben auch gesehen, was passiert, wenn der Code nicht validiert wird, bevor wir ihn veröffentlichen.
Durch die Kombination von „Vibe Coding“ und „Vibe Fixing“ können wir Barrierefreiheit in KI-Geschwindigkeit erreichen.
Möchten Sie mehr erfahren? Fordern Sie noch heute eine Demo an und erleben Sie, wie der axe MCP Server in Ihre bestehenden KI-Workflows integriert wird und Ihnen ermöglicht, die Erstellung barrierefreier Erlebnisse zu beschleunigen.
