HTML static / server-side rendering
Adaugă snippetul în <head>, identic cu metoda universală. Funcționează cu orice limbaj de backend — PHP, Python, .NET, Java — pentru că widgetul operează exclusiv în browser.
React / Next.js
// Next.js (App Router) — app/layout.tsx
import Script from 'next/script'
<Script
src="https://cdn.wcag.ro/widget.js"
data-site-id="ID-UL-TAU"
strategy="afterInteractive"
/>Pentru SPA-uri cu rutare client-side, widgetul detectează automat schimbările de rută și reaplică ajustările pe conținutul nou — nu este nevoie de reinițializare manuală.
Vue / Angular
Adaugă scriptul în index.html sau încarcă-l dinamic în hook-ul de inițializare al aplicației. API-ul global window.WCAGRO permite control programatic: deschiderea panoului dintr-un buton propriu, setarea limbii sau citirea profilului activ.
Bune practici pentru aplicații custom
- Gestionează focusul la schimbarea rutei (mută focusul pe titlul noii pagini și anunț prin
aria-live); - Folosește HTML semantic înainte de ARIA — un
<button>nativ bate orice<div role="button">; - Testează fluxurile critice exclusiv de la tastatură la fiecare release;
- Include scanarea WCAG în pipeline-ul CI — planul Enterprise expune un API de scanare exact pentru asta.