Wie ein Modern Web Guidance-Prüfbot MetaMask dabei hilft, eine barrierefreie, moderne Benutzeroberfläche bereitzustellen

Gilberto Cocchi

Rick Viscomi

Veröffentlicht: 10. November 2026

MetaMask ist eine selbstverwaltete Finanzplattform mit mehr als 100 Millionen Downloads in etwa 190 Ländern. Die Browsererweiterung wird öffentlich entwickelt, sodass ein stetiger Strom von Pull-Anfragen von Mitwirkenden innerhalb und außerhalb des Unternehmens eingeht.

Francis Nepomuceno, UX-Entwickler bei MetaMask, hat viele dieser Pull-Anfragen geprüft und wollte eine einheitliche Möglichkeit, Mitwirkenden dabei zu helfen, Best Practices für die Barrierefreiheit anzuwenden und moderne Webfunktionen zu nutzen. In seinem Editor hat er bereits die Modern Web Guidance von Chrome verwendet, eine Reihe von Funktionen, die Best Practices für Webplattformen und Daten zur Browserkompatibilität für Coding-Agents bereitstellen. Um anderen Mitwirkenden dieselbe Anleitung zu bieten, richtete er einen Bot ein, der jede Pull-Anfrage im Open-Source-Repository von MetaMask prüft, unabhängig von den Tools, die der Autor verwendet hat.

Die Herausforderung: Mit modernen Webfunktionen Schritt halten

Modernes HTML und CSS bieten immer mehr Funktionen, die die Barrierefreiheit und die Nutzerfreundlichkeit verbessern. Es ist jedoch schwierig, den Überblick darüber zu behalten, welche Funktionen in allen Browsern funktionieren. Bei vielen Mitwirkenden muss dieses Wissen alle erreichen, die eine Pull-Anfrage öffnen.

Die Sicherheit ist ein weiterer Grund, sich darum zu kümmern: MetaMask isoliert standardmäßig jede Drittanbieterabhängigkeit, sodass eine native Browserfunktion günstiger zu übernehmen ist als eine Bibliotheksalternative. Nepomuceno meinte dazu: „Der Zugriff auf diese modernen APIs, wie die Möglichkeit, Dialogfelder und Drop-down-Menüs ohne JavaScript zu verwenden, war ein großer Gewinn.“

Die Lösung: Modern Web Guidance prüft jede Pull-Anfrage

Am 16. September 2026 wurde in einem Pull Request an MetaMask/metamask-extension eine Seite „How it works“ mit FAQs hinzugefügt, die wie die meisten React-FAQs aufgebaut sind:

// Before: Custom React state (removes content from DOM)
const [expanded, setExpanded] = useState(false);
<button type="button" aria-expanded={expanded} onClick={() => setExpanded(c => !c)}>
  <Text>{question}</Text>
</button>
{expanded ? <Text>{answer}</Text> : null}

Etwa fünf Minuten später hat der Bot einen Kommentar hinterlassen. Unter Berufung auf den Leitfaden search-hidden-content wurden drei Punkte genannt:

• Wenn jede Antwort bedingt gerendert wird, wird sie aus dem DOM entfernt. Minimierter Text kann dann nicht mit der Suchfunktion des Browsers gefunden werden und ist für Hilfstechnologien schwerer zu erkennen.
• Eine native <details>/<summary>-Offenlegung (Baseline seit 2020) behält den Inhalt im DOM mit der richtigen Semantik bei. Bei sich gegenseitig ausschließenden Bereichen schließt ein gemeinsames name-Attribut (Baseline, neu verfügbar seit 2024) die anderen automatisch. Bei FAQs, bei denen mehrere Bereiche gleichzeitig geöffnet sein können, wird es weggelassen.
• Wenn das Team die vorhandene Disclosure-Komponente bevorzugt, sollte es zumindest die Antworten im DOM mit hidden="until-found" und einem beforematch-Listener beibehalten, der aria-expanded und den Symbolstatus synchronisiert.

// After: Native <details> / <summary> disclosure (findable with find-in-page)
<details>
  <summary>
    <Text>{question}</Text>
  </summary>
  <Text>{answer}</Text>
</details>

Dreizehn Minuten später hat der Autor eine Korrektur veröffentlicht. Die Komponente wurde zu einer nativen <details>/<summary>-Offenlegung, minimierte Antworten blieben für die Suche auf der Seite im DOM und zwei Navigationsschaltflächen wurden zu Links.

Dieser Bot ist eine Cursor-Automatisierung, die Modern Web Guidance ausführt. Nepomuceno hat ihn mit einem Prompt aus drei Zeilen eingerichtet. Bis zum 21. Oktober 2026, fünf Wochen nach der Veröffentlichung:

• Der Bot wurde für etwa 480 Pull-Anfragen ausgeführt und hat 64 davon kommentiert (57 Pull-Anfragen für Funktionen und Fehlerkorrekturen sowie 7 automatisierte Pull-Anfragen für Releases und Synchronisierungen) von 26 Autoren.
• In den Pull-Anfragen für Funktionen und Fehlerbehebungen haben die Entwickler 43 der Ergebnisse behoben und 3 weitere teilweise behoben, verteilt auf 22 Pull-Anfragen.
• Die Entwickler haben schnell reagiert: Von den 38 Fehlerkorrekturen mit einem identifizierbaren Commit wurden 19 innerhalb von 15 Minuten und 26 innerhalb einer Stunde vorgenommen.Der Medianwert von Kommentar bis Fehlerkorrektur lag bei 15,2 Minuten.

Hier erfahren Sie, wie MetaMask den Bot konfiguriert hat, was er erkannt hat und wo er zu viele Fehlalarme ausgelöst hat.

Die Einrichtung ist ein dreizeiliger Prompt,

Auf die Frage, wie die Automatisierung konfiguriert ist, antwortete Nepomuceno: „An unserer Einrichtung ist eigentlich nichts Besonderes. Wir halten es einfach kurz und prägnant.“ Die gesamte Anweisung:

- Run /modern-web-guidance for any client-facing changes
- Run /chrome-extensions for any relevant extension changes
- Comment on the PR only when there are issues to address. Keep the comment focused on actionable items

So verhält sich das in der Praxis:

• Er hat beratende Funktion: In den ersten beiden Tagen hat der Bot Rezensionen mit der Bitte um Änderungen (und eine Genehmigung) gepostet, die von den Autoren verworfen wurden, sobald sie sich darum gekümmert hatten. Seit dem 18. September ist jede Rezension ein Kommentar. Ein Zusammenführen wird nicht blockiert, sodass die Autoren die endgültige Entscheidung über jeden Vorschlag treffen.
• Es werden bestimmte Leitfäden und Dateien im Repository zitiert: In den 64 Pull-Anfragen, die kommentiert wurden, hat der Bot 122 Ergebnisse gemeldet. Von den 102 Pull-Anfragen für Funktionen und Fehlerbehebungen nennen 63 den spezifischen Modern Web Guidance-Leitfaden, den sie anwenden, z. B. search-hidden-content, state-aware-sticky-headers oder sms-otp-form, und verweisen auf eine vorhandene Datei im Repository, wenn diese bereits das empfohlene Muster verwendet.
• Er bleibt ruhig, es sei denn, eine Pull-Anfrage betrifft die Benutzeroberfläche: Von den etwa 480 Pull-Anfragen in diesen fünf Wochen betrafen mindestens 100 die Benutzeroberfläche oder den Clientcode. Der Bot fand durchschnittlich etwa zwei Ergebnisse pro Pull-Anfrage, die er kommentierte. Bei Teams mit hauptsächlich Frontend-Repositories ist zu erwarten, dass ein größerer Anteil kommentiert wird.

Der Prompt selbst funktioniert mit jedem Agent-Runner. Modern Web Guidance wird als Skill oder Plug-in für Cursor, Claude Code, Codex, GitHub Copilot, Antigravity und andere Coding-Agents installiert. Wenn ein KI-Agent den Skill ausführt, sucht er in einem lokalen Index nach den passenden Leitfäden, ohne dass API-Schlüssel erforderlich sind. Anschließend vergleicht er die Unterschiede mit dem Modell, das der Agent Runner des Teams bereits bereitstellt.

Was Modern Web Guidance im Gegensatz zu Lintern erkennt

Ein statischer Linter kann ein fehlendes Attribut für ein einzelnes Element kennzeichnen. Die folgenden Ergebnisse beziehen sich jedoch auf das Interaktionsverhalten, die HTML-Semantik und die Art und Weise, wie Komponenten dateiübergreifend zusammenpassen.

Ein Feld für Transaktionsgebühren, das so aussah, als könnte es bearbeitet werden, aber Eingaben wurden ignoriert.

In den erweiterten Einstellungen für Transaktionsgebühren von MetaMask sah das Feld für das Gaslimit (das die Netzwerkgebühr für eine Transaktion begrenzt) so aus, als ob es bearbeitet werden könnte, aber die Eingaben der Nutzer wurden stillschweigend ignoriert. Dies geschah, wenn eine Gebührenschätzung noch geladen wurde oder fehlgeschlagen war. Die Schaltfläche „Speichern“ war deaktiviert, ohne dass eine Erklärung vorhanden war, die von Hilfstechnologien gelesen werden konnte.

Unter Verweis auf den Leitfaden für Formulare hat der Bot drei Korrekturen vorgeschlagen:

• Deaktivieren Sie das Feld für das Gaslimit, wenn keine Schätzung verfügbar ist, und verknüpfen Sie den sichtbaren Statustext mit dem Feld, damit Hilfstechnologien die Erklärung vorlesen können.
• Verknüpfen Sie die deaktivierte Schaltfläche „Speichern“ mit demselben Statustext, damit Screenreader wissen, warum sie deaktiviert ist.
• Wechseln Sie das Feld in einen numerischen Eingabemodus, damit mobile Nutzer ein numerisches Tastenfeld erhalten.

Der Autor hat alle drei Korrekturen auf beide Einstellungen-Modals angewendet und sie in einer einzigen Komponente zusammengefasst.

Banner-Buttons, deren URLs ausgeblendet wurden

In einem Statusbanner für eine der Handelsfunktionen von MetaMask wurden die Inline-Aktionen „FAQ“ und „MetaMask-Support kontaktieren“ als Schaltflächen erstellt, die einen neuen Tab mit JavaScript anstelle von Links öffneten. Innerhalb von drei Minuten hat der Bot unter Berufung auf die HTML- und Bedienungshilfen-Leitfäden darauf hingewiesen, dass Screenreader sie als Schaltflächen ansagen und dass Nutzer Link-Affordanzen wie das Kopieren der URL oder das Öffnen in einem neuen Tab über das Kontextmenü verlieren. Außerdem wurde auf eine vorhandene Bannerkomponente in der Codebasis von MetaMask verwiesen, die diese Aktionen bereits als echte Links rendert.

Zwölf Minuten später hat der Autor beide Aktionen in Links geändert. „Ich finde es sehr nützlich, dass nach der Annahme einer Empfehlung in zukünftigen Überprüfungen darauf als Referenzbeispiel verwiesen wird“, so Nepomuceno.

Bestätigungseingaben, deren Labels sich an anderer Stelle befanden

Die Fähigkeit des Bots, mehrere Dateien zu lesen, hat sich auch bei einem mehrstufigen Formular ausgezahlt. Ein statischer Linter sieht in jedem Schritt nur ein Textfeld mit Platzhaltertext und kann nicht erkennen, dass die sichtbare Überschrift und die Anleitung in einer übergeordneten Layoutkomponente enthalten sind. Unter Berufung auf die Leitfäden zu Formularen und Barrierefreiheit stellte der Bot fest, dass der Platzhalter das einzige Label des Felds war, dass der Titel des Schritts und die Anweisungen im übergeordneten Layout nicht mit der Eingabe verknüpft waren und dass Fehler- und „Code erneut gesendet“-Meldungen nicht an Screenreader weitergegeben wurden. Fünfzehn Minuten später waren alle drei behoben und die Verkabelung für die Barrierefreiheit blieb intakt, als ein nachfolgender Pull-Request die Codeeingabe in sechs visuelle Ziffernfelder umgestaltete.

Weitere Dinge, die der Bot erkannt hat

Fünf weitere Ergebnisse aus demselben fünfwöchigen Zeitraum:

• Ein CSS-Detail, das der Entwickler des Bots übersehen hat: Nepomucenos eigener Pull-Request für angepinnte Startseiten-Tabs verschachtelte CSS-Scroll-State-Abfragen, ohne ihre Container zu benennen, und schaltete einen Rahmen so um, dass sich das Layout während des Scrollens verschob. Der Bot verwies auf den Leitfaden zu zustandsabhängigen fixierten Kopfzeilen und er behob beide Probleme. Er fand die Rezensionen hilfreich für die Positionierung von Ankern und für Abfragen zum Scrollstatus.
• Slippage-Begrenzung während der Eingabe: Benutzerdefinierte Slippage-Eingaben (die Preisbewegung, die ein Nutzer bei einem Trade toleriert) wurden bei jedem Tastendruck auf Werte über 100 % begrenzt. So wurde 101 in 100 umgewandelt, während der Nutzer noch tippte. Gemäß dem Leitfaden für Formulare wurde die Validierung durch die Korrektur auf den Zeitpunkt verschoben, an dem das Feld den Fokus verliert, und es wurde ein sichtbares Warnbanner hinzugefügt.
• Eine Ladeanzeige, die von Screenreadern nicht verwendet werden konnte: Ein Token-Listen-Ladeskelett hat das Label „Wird geladen“ auf ein generisches Element ohne Rolle gesetzt, was von ARIA nicht erlaubt ist. Der Bot verwies auf zwei Komponenten in der Codebasis, die bereits das Screenreader-only-Muster von MetaMask verwendeten (beide wurden sechs Tage zuvor nach einer Modern Web Guidance-Überprüfung aktualisiert). Der Autor passte das Skelett acht Minuten später an dieses Muster an.
• Ungeschützte asynchrone Aktion: Eine asynchrone Schaltfläche „Beim Anbieter ansehen“ hatte keinen Schutz für laufende Vorgänge, sodass ein Doppelklick doppelte Tabs und Hintergrund-Watcher öffnen konnte. Der Autor hat weniger als vier Minuten nach dem Kommentar eine Guard-Klausel hinzugefügt.
• Tastenanschlagvalidierung ohne Formular: Auf einer Seite zum Importieren von NFTs wurde bei jedem Tastenanschlag eine Validierung durchgeführt. Es fehlte ein <form>-Element für die Semantik des Einreichens. Beide wurden 19 Minuten nach der Überprüfung behoben.

Alle Rezensionen sind öffentlich. Die vollständigen Kommentare des Bots finden Sie in den verlinkten Pull-Anfragen. Sie können sie alle auf GitHub ansehen.

Was nicht behoben wurde und wie laut es ist

Nicht alle Ergebnisse waren erfolgreich. In der folgenden Tabelle sehen Sie, wie MetaMask die 102 Ergebnisse zu Pull-Anfragen für Funktionen und Fehlerkorrekturen gezählt hat. 20 weitere Ergebnisse wurden bei 7 Pull-Anfragen für Releases und Synchronisierungen gefunden, bei denen eine Überprüfung den Code voraussichtlich nicht ändert:

Aufgeschlüsselt nach Themen für alle 122 Ergebnisse (einschließlich der 20 Pull-Anfragen für Release und Synchronisierung):

Einige Muster in diesen Zahlen:

• Korrekturen, die sich auf eine Komponente beschränken, werden viel häufiger umgesetzt als übergreifende Änderungen an der Barrierefreiheit. Formular- und HTML-Fehler bleiben innerhalb der zu prüfenden Komponente, sodass Autoren sie in der Regel sofort beheben (19 von 31 Fehlern behoben). Bei der Barrierefreiheit wurden die meisten Ergebnisse (38) gefunden, aber nur 12 wurden behoben. Das lag in der Regel daran, dass die Behebung außerhalb des Bereichs des Pull-Anfrage lag oder eine gemeinsame Designsystemkomponente erforderte, die noch nicht existierte.
• „Sonstiges“ bezieht sich auf alles, was nicht den Richtlinien für Webplattformen entspricht. Sechzehn Ergebnisse betrafen die Konsistenz des Designsystems, Logikfehler, Texte, Testqualität, den dunklen Modus und die Codehygiene. Drei wurden bearbeitet, darunter eine echte Regression (eine Änderung der Netzwerkliste, die das Vorausfüllen von Formularen beeinträchtigte). Die meisten dieser 16 Tests waren leicht zu übergehen, aber das Erkennen dieser Regression machte einen kurzen Blick darauf lohnenswert.
• Falsch-positive Ergebnisse waren darauf zurückzuführen, wie der Agent die Leitfäden angewendet hat. Die meisten Fehler lassen sich in der Einrichtung beheben. Da der Review-Bot ein Agent ist, der ein Diff liest, und kein statischer Linter, stammen seine falsch positiven Ergebnisse aus dem falschen Lesen des umgebenden Codes oder der strengeren Anwendung einer Regel als im verlinkten Leitfaden. Die nächsten Anpassungen sind offensichtlich: Release- und Synchronisierungszweige überspringen und den Prompt so anpassen, dass sich der Agent an die Regeln hält, die explizit in einem Leitfaden angegeben sind.

Nepomuceno beschreibt die weitreichenden Auswirkungen auf das Team und die Bearbeitungszeit für Überprüfungen:

MetaMask-Entwickler David Murdoch hat auch einen Beitrag zur Anleitung selbst geleistet: Als der Leitfaden für CSS-Layouts einen Fehler in einem seiner Beispiele enthielt, reichte er ein Problem ein und das Modern Web Guidance-Team fügte zwei Tage später eine Korrektur ein.

Was MetaMask einem Team sagen würde, das es in Betracht zieht

• Lesen Sie sich die Anleitung durch, bevor Sie etwas schreiben. Führen Sie npx modern-web-guidance@latest search "accordion find in page" aus, um zu sehen, welche Leitfäden ein Agent für eine Aufgabe abrufen würde. Sie können auch die vollständige Liste der Modern Web Guidance-Leitfäden durchgehen.
• Beginnen Sie mit dem dreizeiligen Prompt und dem KI-Agenten, den Sie bereits ausgeführt haben. Installieren Sie den Skill (npx modern-web-guidance@latest install oder den Plug-in-Befehl eines Agents), verweisen Sie alles, was auf Pull-Anfragen ausgeführt werden kann, darauf und weisen Sie ihn an, nur dann zu kommentieren, wenn es etwas gibt, das umgesetzt werden kann, und sich an die Regeln zu halten, die explizit in einem Leitfaden angegeben sind. Dass der Bot ruhig bleibt, wenn alles in Ordnung ist, ist der Grund, warum die Entwickler von MetaMask seine Kommentare immer noch lesen.
• Einige Ergebnisse werden möglicherweise nicht berücksichtigt. Von 102 Ergebnissen zu Feature- und Fix-Pull-Anfragen wurden 43 behoben und 36 abgelehnt oder nicht bearbeitet. Dieses Verhältnis eignet sich gut für einen beratenden Prüfbot, wäre aber als blockierende Prüfung störend.
• Manuelle Überprüfung beibehalten. Der Bot ist gut in Webplattform-Semantik, modernem CSS und Interaktionsmustern, kennt aber das Produkt nicht.

Es gibt auch Dinge, die MetaMask noch nicht gemessen hat: Nach fünf Wochen hat das Team noch keine Kosten pro Pull-Anfrage, Laufzeit, Modellvergleiche oder das Verhalten des Review-Bots außerhalb einer React-Codebasis erfasst.

Mit nur drei Konfigurationszeilen erhielt MetaMask einen Review-Bot, der für die meisten Ergebnisse einen bestimmten Leitfaden zitiert (und ein vorhandenes Beispiel im Repository, falls vorhanden). Angenommene Vorschläge werden in der Regel innerhalb einer Stunde umgesetzt.