WCAG-fixar för Next.js
Granska detekterar er Next.js-version, identifierar WCAG-fel i tema och tillägg, och genererar JSX / TSX-fixar med rätt syntax — inte generiska rekommendationer.
De 7 vanligaste WCAG-felen i Next.js
Mönster vi ser i SaaS-frontends och custom e-handel byggda med App Router och Pages Router.
Ikonknappar utan tillgängligt namn
Knappar som bara innehåller <Icon /> utan aria-label eller dold text — vanligt i headers, cart-buttons och nav-toggles byggda med shadcn/ui-fragment.
Semantiska element ersatta med <div>
Custom buttons som <div onClick> istället för <button>, navigation i <ul> istället för <nav>. React-konventionen att rendera 'whatever, style it later' bryter semantiken.
Modaler/dialoger utan focus-trap
Custom dropdowns och sheets utan focus-management. Radix UI och Headless UI fixar det, men hand-rullade Dialog-komponenter missar typiskt focus-trap och return-on-close.
Next/Image utan alt-attribut
next/image kräver alt men accepterar tom sträng. Många dev-team använder alt='' även för innehållsbilder, vilket genererar tom alt i HTML.
Felaktig fokusordning vid client-side navigation
Next.js App Router behåller fokus vid soft navigation, vilket gör att skärmläsaren inte annonserar att sidan har bytts — användaren 'tappas bort'.
Lang-attribut hårdkodat eller saknat
<html lang="en"> kvarstår från create-next-app-template. För svenska sajter måste det vara <html lang="sv"> eller dynamiskt per route.
Layoutbrott vid 200% zoom
Fixed-width container med h-screen + overflow-hidden bryter på 320px viewport / 200% zoom — gäller särskilt SaaS-dashboards och mobil-versions av landing-pages.
Så identifierar Granska att ni kör Next.js
_next/static/... · __next_data__ inline JSONX-Powered-By: Next.js · Vercel CDN headersApp Router: /app prefix · Pages: /_next/data/_next/image · _next/static/css · /api/...Tre kodfixar för vanliga Next.js-issues
Icon-only button med tillgänglig text
// Före (Granska upptäcker)
<button onClick={openCart}>
<CartIcon />
</button>
// Efter (Granska-fix)
<button
type="button"
onClick={openCart}
aria-label="Öppna varukorg"
>
<CartIcon aria-hidden="true" />
<span className="sr-only">Öppna varukorg</span>
</button>Annonsera sidbyten i App Router till skärmläsare
"use client";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
export function RouteAnnouncer() {
const pathname = usePathname();
const [title, setTitle] = useState("");
useEffect(() => {
setTitle(document.title);
}, [pathname]);
return (
<div
role="status"
aria-live="polite"
aria-atomic="true"
className="sr-only"
>
{title && `Navigerade till ${title}`}
</div>
);
}Ersätt div onClick med faktisk button
// Före (Granska upptäcker — div utan tangentbordsstöd)
<div
onClick={handleClick}
className="cursor-pointer"
>
<h3>{title}</h3>
</div>
// Efter (Granska-fix — semantisk button-wrapper)
<button
type="button"
onClick={handleClick}
className="text-left cursor-pointer focus:outline-none focus:ring-2"
>
<h3>{title}</h3>
</button>
// ELLER om hela kortet ska vara en länk:
<Link
href={href}
className="block focus:outline-none focus:ring-2"
>
<h3>{title}</h3>
</Link>Vanliga problem per UI-bibliotek
App Router vs Pages Router — vad vi ser
Skanna er Next.js-sajt på 60 sekunder
Granska detekterar Next.js-version, router-typ och UI-bibliotek, och genererar TSX-diffar med rätt komponent-kontext.
Automatiserad scanning hittar 30–40 % av alla WCAG-fel. Full compliance kräver även manuell granskning.