Met trots kondigen we de eerste alpha release aan van @nuxt/a11y - een nieuwe core Nuxt module die real-time accessibility testen direct in Nuxt DevTools brengt. Dit was een ongelooflijke reis, en ik ben dankbaar om dit eindelijk met de community te kunnen delen.
Wat is @nuxt/a11y?
@nuxt/a11y is een development module die geautomatiseerde accessibility auditing biedt, geïntegreerd in Nuxt DevTools. Het detecteert WCAG-overtredingen in real-time terwijl je bouwt, zodat je accessibility problemen kunt vinden en oplossen tijdens development - niet na de launch.
Belangrijkste kenmerken:
- Real-time scanning - Scant je pagina terwijl je ermee interacteert en navigeert
- Gebouwd op axe-core - Dezelfde accessibility engine die Google en Microsoft vertrouwen
- Visuele highlighting - Problemen worden direct op je pagina gemarkeerd
- Zero productie-impact - Alleen tijdens development, geen toename in bundle size
Aan de slag
Installatie is simpel:
npx nuxt module add a11y
De module registreert zichzelf automatisch in je nuxt.config.ts. Na installatie open je Nuxt DevTools en navigeer je naar het a11y panel.
Features in Detail
DevTools Dashboard
De DevTools integratie biedt een compleet overzicht van accessibility issues in je applicatie. Je ziet totale violation counts georganiseerd op impact level - critical, serious, moderate of minor - zodat je kunt prioriteren wat je eerst moet oplossen.
Visuele Element Highlighting
Klik op een violation om de getroffen elementen direct op je pagina te highlighten. Genummerde badges worden aan elementen vastgepind, waardoor het makkelijk is om elk issue in context te vinden en te begrijpen.
Gedetailleerde Violation Informatie
Elke violation card toont het impact level, rule ID, een link naar WCAG documentatie, het aantal getroffen elementen en CSS selectors om je te helpen de problematische code te vinden.
Auto-Scan Mode
Schakel auto-scan in om je pagina continu te monitoren terwijl de DOM verandert. Dit vangt nieuwe violations op die ontstaan door user interactions of dynamische content updates.
Route Tracking
De module volgt automatisch violations per route terwijl je door je applicatie navigeert, wat je een duidelijk beeld geeft van accessibility over je hele site.
Configuratie
Pas het module gedrag aan in je nuxt.config.ts:
export default defineNuxtConfig({
a11y: {
// Module aan/uit (standaard: true in dev)
enabled: true,
// Automatisch alle violations highlighten bij detectie
defaultHighlight: false,
// Log issues naar browser console
logIssues: true,
// Configureer axe-core
axe: {
options: {}, // axe-core configuratie
runOptions: {}, // axe-core runtime opties
},
},
});
Voor geavanceerde axe-core configuratie, zie de axe-core API documentatie.
Waarom Dit Belangrijk Is
Bij Focusring is onze missie om accessibility makkelijker te maken voor developers door issues eerder in het development proces te vinden. Deze module belichaamt die missie - geautomatiseerde accessibility testing die draait waar developers al werken, zonder frictie.
Accessibility issues vinden tijdens development is dramatisch kosteneffectiever dan ze na de launch oplossen. Met @nuxt/a11y kan elke Nuxt developer nu accessibility testing integreren in hun dagelijkse workflow zonder extra tooling of configuratie.
Dankwoord
Een enorme dank aan Daniel Roe en het hele Nuxt team voor de kans om deze module bij te dragen aan het Nuxt ecosysteem. Hun begeleiding, code reviews en support tijdens de development waren van onschatbare waarde. Het was een eer om met zo'n getalenteerd en gastvrij team te werken.
Doe Mee
Dit is een alpha release, en we horen graag jullie feedback! Zo kun je helpen:
- Probeer het uit - Installeer de module en test het op je projecten
- Meld issues - Bug gevonden? Open een issue
- Deel ideeën - Heb je feature suggesties? We willen ze horen
- Draag bij - PRs zijn welkom!
Bekijk de repository en geef het een ster als je het nuttig vindt:
Laten we het web toegankelijker maken, één app tegelijk.
Voor meer informatie over het toegankelijk maken van uw digitale diensten voor alle gebruikers, neem contact op met focusring.io via hello@focusring.io