ui-design

Use the native <dialog> element with .showModal(), which handles focus trapping and inert background content automatically. Set aria-labelledby to the dialog heading and restore focus to the invoking element on close; manual focus traps are outdated for modern browsers.

Key criteria include 1.4.3 contrast (4.5:1 body text), 1.4.10 reflow to 320px, 1.4.11 non-text contrast at 3:1, 2.4.7 focus visible, 2.5.8 target size minimum of 24x24 CSS px, and 3.3.8 accessible authentication without cognitive tests. WCAG 2.2 AA is the baseline floor.

Prefer native HTML elements like <button>, <a href>, and <dialog> before adding ARIA. WebAIM data shows sites using ARIA average 41% more detected accessibility errors, so no ARIA is better than incorrect ARIA on repurposed elements.

Svelte with SvelteKit is the default pick for compile-time reactivity and small bundles. Choose React with Next.js when the team already knows React, hiring pool matters, or the shadcn/ui and Radix ecosystem is explicitly required.

Automated tools like axe-core catch roughly 30-57% of issues because they cannot judge meaningful labels, focus order intent, or keyboard model correctness on custom widgets. Manual keyboard testing and screen-reader passes with NVDA, VoiceOver, or TalkBack remain necessary.

It does not cover backend API design, frontend runtime debugging, or performance profiling beyond UI design choices. Pair it with testing and performance skills for browser-verified flows and Core Web Vitals work.