Hvert bibliotek blev installeret i det samme React 19 / Next.js 15 / TypeScript 5.5-stillads ved hjælp af dets aktuelle leverandøranbefalet installationssti: npm i for de pakkede biblioteker (Radix UI primitiver, Headless UI 2.x, Mantine 8.x, Chakra UI v3, Ark UI, React Aria Components) og shadcn CLI for shadcn/ui — som kopierer kildekode ind i components/ui frem for at levere en pakke. Vi monterede derefter en kitchen-sink-demoside, der eksponerede hvert biblioteks fulde sæt af interaktive primitiver i deres standardtilstand uden temaoverskrivninger og uden brugerdefinerede wrappers.

Revisionsharness kørte i tre gennemløb. Gennemløb ét var et automatiseret axe-core 4.11-sweep gennem Playwright mod den renderede DOM, med det fulde WCAG 2.2 AA-regelsæt og de eksperimentelle regler aktiveret. Gennemløb to var et manuelt tastatur-sweep: tab, shift-tab, piletaster, escape, enter, space og home/end mod hvert primitiv, scoret mod WAI-ARIA Authoring Practices Guide’s forventede tastaturkontrakt. Gennemløb tre var en skærmlæser-smoke-test med NVDA 2025.1 på Chrome og Safari/VoiceOver på macOS Sonoma med fokus på rolleannonceringen, det tilgængelige navn og tilstandsannonceringen, når brugeren interagerer.

Vi valgte elleve ARIA-mønstre som overfladeareal for matricen, fordi disse er de mønstre, der optræder i produkt-UIs, der bliver sagsøgt: dialog, alarmdialog, combobox, listbox, menu, menubar, faneblade, accordion, tooltip, switch og slider. Et bibliotek, der klarer sig godt med knapper og overskrifter, men leverer en ødelagt combobox, er et bibliotek, der vil fejle en revision, første gang en rigtig bruger forsøger at filtrere en kundeliste.

Tre af de syv biblioteker — Radix UI, React Aria Components og Ark UI — bestod axe på hvert primitiv i deres standardtilstand uden påkrævede overskrivninger. Headless UI bestod på alle undtagen menu-primitivet, hvor en manglende aria-activedescendant på listbox-stil menu-udløseren kastede en enkelt overtrædelse. shadcn/ui — som selv er et tyndt lag oven på Radix UI — bestod på hvert primitiv, det leverer, men fangsten er, at det kun leverer ca. to tredjedele af Radix-overfladen, og hullerne (combobox, listbox, menubar) er præcis de mønstre, hvor leverandører oftest laver tilgængeligheds-fejl, når de ruller dem selv.

Mantine og Chakra UI v3 var de to biblioteker, hvis standarder leverede axe-overtrædelser. Mantines combobox, switch og slider genererede alle mindst én axe-overtrædelse i deres dokumenterede brugseksempel, primært omkring manglende tilgængelige navne på det underliggende input. Chakra UI v3 — som skiftede til en Zag-baseret tilstandsmaskine-arkitektur i slutningen af 2024 — rettede mange af v2-problemerne, men leverer stadig en tooltip, der kun udløses ved hover, hvilket er en 1.4.13 Indhold ved hover eller fokus-overtrædelse i axe og en tastaturfalderisk risiko i skærmlæservirtuel tilstand.

Det elleve-mønsters gitter nedenfor er den overordnede reference. En grøn celle betyder, at biblioteket leverer primitivet nativt og består axe i sin standardtilstand. En gul celle betyder, at biblioteket leverer primitivet, men mindst én axe-overtrædelse, tastaturkontrakthul eller skærmlæserhul opstod i det dokumenterede brugseksempel. Et grå »N/A« betyder, at biblioteket ikke leverer dette primitiv — for shadcn/ui er det tre mønstre, hvor du skulle importere Radix direkte eller koble en tredjepart ind.

Den mest gentagelige fejl på tværs af biblioteker var ikke en manglende aria-attribut — det var en tastaturkontrakt, der næsten matchede APG og derefter divergerede med én tast. Mantines combobox reagerer ikke på Home og End som APG specificerer. Chakra v3’s tooltip kan ikke afvises med Escape, når den blev åbnet ved hover. Headless UIs menu-primitiv folder sammen ved den første ArrowDown frem for at placere fokus på det første element, fordi implementeringen behandler udløseren som den aktive efterkommer ved åbning.

Disse er ikke eksotiske kanttilfælde. De er de mønstre, en skærmlæserbruger når frem til i det første minut. Sammenligningen nedenfor parrer den samme combobox-API skrevet på to måder — én med Mantines standarder, én med React Aria Components — for at vise, hvordan tastaturkontrakten ser ud, når den behandles som en specifikation frem for et polish-element.

Den mest almindelige indvending mod at vælge de strenge biblioteker er bundle-størrelse. Revisionen bekræftede ikke dette. Radix UI-primitiver er tree-shakeable per primitiv og leverer i ca. 7-15 KB gzippet-intervallet hvert; React Aria Components er tungere — ca. 95 KB gzippet for det fulde bundle — men er også tree-shakeable. Headless UI er det letteste med ca. 25 KB gzippet for hele pakken. Mantine og Chakra v3 er begge batteries-included og leverer stylesystemet i det samme bundle, hvilket placerer dem i ca. 180-220 KB gzippet-intervallet som standard.

Afvejningen er reel men mindre end diskursen antyder. En combobox, der ikke respekterer Home og End, koster ca. det samme antal bytes som én, der gør. Valget er ikke »tilgængelighed versus ydeevne« — det er »specifikationsafledt adfærd versus håndrulet adfærd«, og den håndrulet version er oftere den større, fordi den bærer sin egen ad-hoc-tilstandsmaskine.

De biblioteker, der rydder en axe-revision rent, er de biblioteker, hvis forfattere behandlede WAI-ARIA Authoring Practices Guide som en kontrakt frem for en reference. Radix UI, React Aria Components og Ark UI afledt alle deres tastaturkontrakter og ARIA-kobling fra en offentliggjort specifikation — APG i tilfældet Radix og React Aria, Zag.js-tilstandsmaskiner i tilfældet Ark UI — og de leverer specifikationen, ikke et delsæt af den.

De biblioteker, der fejler, gør det ikke, fordi deres forfattere ikke bekymrer sig om tilgængelighed. De fejler, fordi tastaturkontrakten blev behandlet som en funktionsliste, og funktionslister ender på 80% frem for 100%. De sidste 20% — Home og End i en combobox, Escape til at afvise en hover-åbnet tooltip, fokusstyring på den første ArrowDown i en menu — er den del, brugeren lægger mærke til.

shadcn/ui-historien placerer sig mærkeligt på tværs af begge kategorier. De komponenter, det leverer, arver Radix’s specifikationsafledning og består. De komponenter, det ikke leverer, er hullerne, hvor teams ruller en intern combobox selv, og den interne combobox er der, den næste axe-overtrædelse kommer ind i kodebasen. Løsningen er ikke at vælge et andet bibliotek — det er at importere Radix direkte for disse tre mønstre og behandle dem med samme alvor som resten af designsystemet.

Ingeniørteams, der adopterer et bibliotek, bør kombinere valget med resten af udviklertoolkit’et på vores udviklerside, køre en gratis WCAG 2.2-scanning på bibliotekets demo inden det sendes til produktion, og benchmarke resultatet mod den fulde WCAG 2.2 succeskriterier-reference.