Replit is een online werkplek waar Replit Agent, een AI-assistent, een website of app bouwt op basis van je beschrijving, ze laat draaien en online zet. Agent regelt veel zelf, maar bouwt wat je vraagt: staat toegankelijkheid niet in je vraag, dan hangt het van toeval af. Deze gids laat zien op welke problemen je let, hoe je instructies schrijft die Agent bij elke vraag leest en hoe je de gepubliceerde site controleert.
Wat Replit Agent bouwt
Voor websites en webapps gebruikt Agent vaak React (een veelgebruikte manier om webpagina’s te bouwen) met Tailwind CSS voor het uiterlijk, en onderdelen uit shadcn/ui, een verzameling kant-en-klare menu’s, dialoogvensters en formuliervelden. Daarachter draait meestal een kleine server in Node.js en een PostgreSQL-database. De precieze keuze hangt af van je vraag, en Agent kan ook mobiele apps bouwen. ibin controleert webpagina’s, dus deze gids gaat over sites die in een browser openen.
De onderdelen van shadcn/ui zijn een goed begin: de dialoogvensters, keuzemenu’s en tabbladen werken met het toetsenbord en geven de juiste informatie aan schermlezers (software die het scherm voorleest). Veel webapps van Replit zijn bovendien single-page apps: de browser laadt één pagina en wisselt de inhoud als je op een link klikt. Dat voelt snel, maar veroorzaakt de eerste twee problemen hieronder.
Problemen die vaak opduiken
Deze patronen komen regelmatig voor. Duidelijke instructies voorkomen de meeste.
- Eén titel voor elk scherm. In een single-page app blijft de titel in het tabblad van de browser vaak op elk scherm dezelfde. Gebruikers van een schermlezer horen die titel eerst en weten daaraan waar ze zijn.
- Focus die achterblijft na het navigeren. Na een klik op een menulink verschijnt de nieuwe inhoud, maar de toetsenbordpositie blijft in het menu staan. Wie met toetsenbord of schermlezer werkt, merkt niet dat er iets veranderd is.
- Knoppen met alleen een icoon, zonder naam. Een menu-, sluit- of verwijdericoon dat een schermlezer alleen als “knop” aankondigt.
- Foutmeldingen die alleen als toast verschijnen. Een toast is het kleine bericht dat in een hoek verschijnt en na een paar seconden verdwijnt. Mensen missen het, en niets bij het veld zegt wat er mis is.
- Gedempte tekst met te weinig contrast. Zachtgrijze tekst op wit of op lichtgrijze kaarten.
- Klikbare rijen en kaarten. Tabelrijen en kaarten in dashboards die op een muisklik reageren, maar die je niet bereikt met de Tab-toets.
Waar je vaste instructies zet
Replit Agent leest een bestand dat replit.md heet, in de hoofdmap van je project. Volgens de documentatie van Replit maakt Agent dit bestand aan bij een nieuw project en neemt het de inhoud mee bij elke vraag, om je voorkeuren, de opbouw van het project en je codeerstijl te begrijpen. Je kunt het bewerken zoals elk ander bestand.
- Open replit.md in de bovenste map van je project. Ontbreekt het, maak daar dan een bestand met precies die naam; Agent vindt het alleen in de hoofdmap.
- Plak het blok hieronder aan het einde.
Agent kan replit.md ook zelf bijwerken. Kijk af en toe of je toegankelijkheidsdeel er nog in staat.
Replit heeft ook skills, herbruikbare instructies die je in een project installeert, maar voor een korte lijst regels is replit.md de eenvoudigste plek.
Instructies voor Replit
Plak dit in replit.md. Pas de taalcode aan als je site niet in het Nederlands is.
## Toegankelijkheidseisen (niet verwijderen) Volg deze regels bij elke wijziging. Mik op WCAG 2.2 niveau AA. - Gebruik semantische elementen: header, nav, main, footer. Gebruik echte links voor navigatie en echte knoppen voor acties. Zet nooit een klikfunctie op een div, tabelrij of Card. Is een hele kaart klikbaar, zet er dan een echte link in. - Elke knop met alleen een icoon heeft een aria-label in de taal van de site, zoals "Factuur verwijderen". Zet aria-hidden op het icoon. - Elk formulierveld heeft een zichtbaar label dat eraan gekoppeld is. Een placeholder is nooit het enige label. Fouten staan als tekst bij het veld, niet alleen in een toast. - Tekstcontrast is minstens 4.5:1, grote tekst en iconen 3:1, in lichte en donkere modus. - Behoud een duidelijk zichtbare focusstijl op elke link, knop en elk veld. - Zet lang="nl" op het html-element. Werk de documenttitel bij bij elke routewissel, bijvoorbeeld "Facturen – Mijn app". - Zet na een routewissel de focus op de hoofdkop van het nieuwe scherm. - Eén h1 per scherm, koppen in volgorde. - Behoud het toetsenbordgedrag van shadcn/ui- en Radix-onderdelen. Dialoogvensters sluiten met Escape en zetten de focus terug op de knop die ze opende. - Betekenisvolle afbeeldingen krijgen een alt-tekst; decoratieve afbeeldingen krijgen alt="". - Respecteer prefers-reduced-motion bij animaties. - Zet een link "Naar de hoofdinhoud" als eerste onderdeel op elke pagina.
Vervolgprompts voor veelvoorkomende problemen
Vraag na een controle om één oplossing tegelijk. Vervang de delen tussen vierkante haken.
- Titels en focus: “Als ik naar een ander scherm ga, blijft de titel in het tabblad gelijk en blijft de toetsenbordfocus in het menu. Geef elk scherm een eigen titel en zet na het navigeren de focus op de hoofdkop.”
- Icoonknoppen: “Geef elke knop met alleen een icoon in [de facturentabel] een naam die zegt wat hij doet, en voor welk item. Verander niets aan het uiterlijk.”
- Fouten alleen in een toast: “Toon in [het aanmeldformulier] elke fout als tekst onder het veld waar ze bij hoort, gekoppeld aan dat veld. Houd de toast alleen als extra.”
- Contrast: “Maak de grijze tekst op [de dashboardkaarten] donkerder tot ze minstens 4.5:1 haalt.”
- Klikbare rijen: “Ik kan [een bestelling] niet openen met het toetsenbord. Vervang de klik op de tabelrij door een echte link in de eerste cel.”
Agent kan testen of functies werken, maar werken met de muis is niet hetzelfde als werken met het toetsenbord. Vraag het uitdrukkelijk: “Test de belangrijkste stappen alleen met het toetsenbord en vertel me waar het vastloopt.”
Publiceren en controleren
ibin controleert pagina’s op het openbare web en heeft dus een adres nodig dat iedereen kan openen. De publicatiegids van Replit beschrijft de stappen.
- Sla het ontwikkelvoorbeeld over. Het voorbeeldadres dat je tijdens het bouwen ziet, is tijdelijk. Controleer de gepubliceerde app.
- Publiceer. Kies Publish rechtsboven in de editor. Het adres eindigt op .replit.app.
- Kies openbare toegang. Replit biedt Public, Password protected, Workspace only en Invite only. Een controletool kan niet inloggen en geen wachtwoord typen, dus kies Public.
- Controleer de pagina met ibin. Begin met de startpagina en daarna je belangrijkste formulier of scherm.
- Plak de oplossing in Agent. Bij elk probleem in het rapport staat de knop “Instructies voor een AI-tool kopiëren”. Plak het resultaat in de chat met Agent. Het vraagt om een oplossing in de app zelf.
- Publiceer opnieuw en controleer opnieuw. Wijzigingen in de editor bereiken de live app pas als je Republish kiest. Het adres blijft hetzelfde.
- Controleer meer pagina’s. Meld je aan om tot 200 pagina’s van dezelfde site te controleren, en zet wekelijkse controles aan om problemen te zien die terugkomen.
Schermen achter een login kan geen enkele tool van buitenaf controleren, dus test die zelf met het toetsenbord. Automatische controles vinden ruwweg een derde tot de helft van alle problemen; doe daarom ook de toetsenbordtest van 10 minuten.
Wat Agent niet kan beoordelen
Agent kan een beschrijving voor een foto schrijven, maar weet niet of die foto je product, je team of gewoon een sfeer toont. Het kan niet inschatten of vijf knoppen met “Bekijken” zin hebben als een schermlezer ze opsomt, en ook niet of je tekst duidelijk is voor wie Nederlands als tweede taal leest. Kijk beschrijvingen van afbeeldingen en linkteksten zelf na telkens als je inhoud toevoegt. De optionele tweede blik van AI in ibin geeft deze punten een score van 1 tot 5, zodat je weet waar je begint, maar een mens beslist.
Zie ook het overzicht voor AI-bouwers en de herstelgidsen, bijvoorbeeld over formuliervelden zonder label en paginatitels.
Controleer je Replit-app
Publiceer je app met openbare toegang en controleer gratis een pagina met ibin. Kopieer de instructies bij elk probleem naar Replit Agent, publiceer opnieuw en controleer opnieuw tot de dringende problemen weg zijn.
Kijk hoe je eigen site scoort
Controleer gratis een pagina, zonder account. Je krijgt een duidelijke lijst van wat je eerst oplost, met afbeeldingen van waar elk probleem zit.