Use a two-column CSS grid: sidebar (200-240px fixed) + content (1fr). Sidebar: vertical nav with links styled as list items, active state with accent background + left border indicator. Content area: scrollable with a heading matching the active category. URL-based routing: /settings/profile, /settings/billing — enables deep-linking and browser back/forward. On mobile (< 768px): hide the sidebar, show a full-width list of categories; selecting one navigates to the settings panel with a back button.

Sidebar: <nav aria-label="Settings"> with <ul role="list">. Active link: aria-current="page". Content area: <main> or role="main" with heading matching the active category. Mobile: back button aria-label="Back to settings categories." Keyboard: Tab navigates sidebar links, Enter activates. Ensure focus moves to the content heading when a category is selected (manage focus on route change).

Use a Tabs component (Radix UI, shadcn/ui) with each TabsTrigger as a category name and TabsContent as the settings panel. Route-based tabs: sync the active tab with the URL path (e.g., /settings?tab=notifications). Each panel contains form groups with headings. For overflow (>6 tabs): add horizontal scroll with fade indicators or a "More" dropdown. Mobile: tabs can stack vertically or switch to a select dropdown. Persist tab state across page reloads via URL.

Tabs: role="tablist" with role="tab" on each trigger and role="tabpanel" on content. aria-selected="true" on the active tab. Keyboard: Arrow Left/Right moves between tabs, Enter/Space activates. Tab panels: aria-labelledby pointing to the corresponding tab. Do not auto-activate tabs on arrow key — require Enter/Space (manual activation mode) for settings pages where each tab may trigger data loading.

Each group: a <section> with an <h3> heading, optional description paragraph, and the settings controls. Separate groups with 2rem+ gap or a horizontal divider. Jump links: render a list of anchor links at the top of the page, each linking to the section ID. Use IntersectionObserver to highlight the active section in the jump links as the user scrolls. Group order: most frequently changed settings first (analytics show 80% of users only change 2-3 settings).

Each section: aria-labelledby pointing to its heading. Jump links: <nav aria-label="On this page">. Active jump link: aria-current="true". Headings: proper hierarchy (h2 for page title, h3 for groups, h4 for sub-groups). Dividers: <hr> with role="separator" or purely visual (aria-hidden). Ensure the page is navigable by heading level for screen reader users (common navigation method).

Flex row with justify-content: space-between. Left side: label (<label> or <span>) + optional description text (muted, smaller font). Right side: the control (Switch, Select, Input). Vertical alignment: center the control with the label. For text inputs or multi-field settings, stack the control below the description (full-width). Group multiple rows in a card or bordered section. Row height: minimum 48px for touch targets. Add a subtle hover background for interactive rows.

Label: <label for="setting-id"> explicitly associated with the control. Description: aria-describedby on the control pointing to the description element. Toggle: role="switch" aria-checked. Select: native <select> or custom with role="listbox". Ensure the entire row is not clickable — only the control is interactive (clicking the label is fine as it's associated). Tab order: sequential through controls, skip decorative elements.

Search input pinned at the top of the settings page (or in the sidebar header). On input: filter all settings by matching the query against name + description + category. Use a lightweight fuzzy matcher (fuse.js) or simple substring matching. Highlight matching text with <mark>. Show results grouped by category. If no results: show "No settings found for [query]" with a suggestion to clear the search. Debounce input at 150ms. Clear button (X) to reset. Keyboard shortcut: Cmd+K or Ctrl+K to focus search.

Search input: role="searchbox" aria-label="Search settings." Results count: aria-live="polite" region announcing "5 settings found" or "No results." Highlight: <mark> element is accessible by default. Clear button: aria-label="Clear search." Keyboard: Escape clears search and restores full settings view. Ensure filtered-out settings are truly hidden (display: none, not just visually hidden) so screen readers only encounter matching results.

Form with labeled inputs for each profile field. Avatar: circular <img> with an overlaid "Change" button that opens a file picker (accept="image/*"). Preview the selected image immediately (URL.createObjectURL). Name/Username: text inputs with max length. Email: input type="email" with blur validation. Bio: <textarea> with character count. Save button: disabled until changes are detected (dirty form tracking). Show a success toast on save. For email changes, show an inline notice: "A verification email will be sent to your new address."

Form: <form aria-label="Edit profile">. All inputs: <label> elements with for attributes. Avatar upload: the "Change" button must be keyboard-accessible with aria-label="Change profile picture." File input: visually hidden but accessible (sr-only class, not display:none). Validation errors: aria-describedby on the input pointing to the error message, aria-invalid="true". Save button: aria-disabled when no changes. Success feedback: aria-live="polite" toast.

Preview: circular container with object-fit: cover. Upload trigger: click on the avatar or a "Change photo" button. File input: accept="image/jpeg,image/png,image/webp" with 5MB max size validation. Crop modal: use react-image-crop or cropperjs with a circular mask overlay. Zoom slider (1x-3x). "Save" and "Cancel" buttons. On save: upload the cropped image (canvas.toBlob) to the server. Show a loading spinner during upload. Optimistic: display the cropped preview immediately while uploading.

Upload button: aria-label="Upload new profile picture." Crop modal: role="dialog" aria-label="Crop profile picture." Zoom slider: <input type="range" aria-label="Zoom level" min="1" max="3" step="0.1">. Save/Cancel buttons: standard labels. Loading state: aria-live="polite" announcing "Uploading profile picture." Success: "Profile picture updated." Drag target: aria-label="Drop image here to upload." Ensure crop area is operable via keyboard (arrow keys for position).

Danger Zone section: red/destructive border, warning heading "Delete Account." Description lists consequences: "This will permanently delete your account, all projects, and all data. This action cannot be undone." "Delete account" button (destructive variant). Confirmation dialog: "Type [account-name] to confirm" input + password input. Disable the confirm button until the typed name matches exactly. On confirm: soft-delete server-side with a 30-day grace period. Send confirmation email with a cancel link. Show a countdown banner if the user logs back in during the grace period.

Danger Zone heading: visually distinct with red color AND a warning icon + text label "Danger Zone." Delete button: aria-label="Delete account permanently." Confirmation dialog: role="alertdialog" aria-label="Confirm account deletion." Typed confirmation input: aria-label="Type [account-name] to confirm deletion." Announce validation inline: "Name matches — you can confirm." Password input: standard accessible label. Success: redirect to a "Account scheduled for deletion" page with clear messaging.

List of provider cards. Each card: provider logo (32px) + name + status. Connected: show linked email, "Connected" badge, "Disconnect" button. Not connected: "Connect" button that opens a new window for OAuth. On successful OAuth callback: update the card to show connected state. Disconnect: confirmation dialog if it's the only auth method ("You won't be able to log in without another method"). Store connections in a user_connections table: {provider, provider_user_id, email, access_token, refresh_token}.

Provider list: role="list" aria-label="Connected accounts." Each card: role="listitem." Connection status: text label (not icon-only). Connect button: aria-label="Connect Google account." Disconnect button: aria-label="Disconnect GitHub account." Confirmation dialog: role="alertdialog" warning about login method loss. OAuth popup: announce "Connecting to Google..." via aria-live when the popup opens. On success: "Google account connected" via aria-live="polite".

Text input with real-time validation. On input (debounced 300ms): API call to check uniqueness. Show status: spinner (checking), green check + "Available" (available), red X + "Taken" (unavailable), format error (invalid characters). Character rules: /^[a-z0-9-]+$/, 3-39 characters, no leading/trailing hyphens. Consequences warning: "Your profile URL, @mentions, and API endpoints will change." Require password confirmation to finalize. After change: set up a redirect from the old URL for 30 days.

Input: <label for="username">Username</label> with aria-describedby pointing to the validation status and character requirements. Validation status: aria-live="polite" region that announces "username-abc is available" or "username-abc is taken." Format requirements: visible text below the input (not just placeholder). On error: aria-invalid="true" on the input. Character count: "12 of 39 characters" in a live region. Save confirmation: role="alertdialog" explaining consequences.

Three options: Light (sun icon), Dark (moon icon), System (monitor icon). Use a segmented control or radio group. On selection: set a data-theme attribute on <html> ("light" | "dark"), save to localStorage, and sync to user profile API. System mode: listen to window.matchMedia("(prefers-color-scheme: dark)") and update dynamically. Prevent FOUC: inline <script> in <head> reads localStorage and sets data-theme before render. CSS: define color tokens as CSS custom properties scoped to [data-theme="light"] and [data-theme="dark"].

Control: role="radiogroup" aria-label="Color theme" with role="radio" options. Each option: aria-label="Light theme" / "Dark theme" / "System theme (follows your operating system)." Announce change: aria-live="polite" with "Theme changed to Dark." Ensure both themes meet WCAG 2.1 AA contrast ratios (4.5:1 for text). Dark mode: avoid pure black (#000) backgrounds — use #121212 or similar to prevent halation for users with astigmatism. Test all interactive states (focus, hover, active) in both themes.

Render as a table: rows = notification types, columns = channels. Each cell: <Switch> component. Header row: channel names with optional "all on/off" toggle. Group rows by category (Activity, Marketing, System). Auto-save each toggle change immediately (no "Save" button needed for individual toggles). API: PATCH /preferences/notifications with { type, channel, enabled }. Show a brief toast on save: "Notification preference updated." Include an "Unsubscribe from all marketing" one-click option for compliance (CAN-SPAM, GDPR).

Table: <table> with <thead> (channel headers as <th scope="col">) and notification types as <th scope="row">. Each switch: aria-label="Email notifications for Comments" (combining row and column context). Master toggles: aria-label="Enable all Email notifications." Auto-save feedback: aria-live="polite" announcing "Saved." Group headings: <th scope="rowgroup"> with colspan. Ensure the table is navigable with arrow keys (grid pattern) or via standard Tab through cells.

Language: <select> or searchable Combobox with flag icons + native language names. Sort by: current language first, then alphabetically. Time zone: searchable select (300+ zones) with the auto-detected zone pre-selected and labeled "(Detected)." Date format: radio group with live preview. Number format: follows locale automatically. First day of week: radio (Sunday/Monday). Auto-save on change. Require page reload for language changes (or use i18n framework with runtime switching). Store as locale code: "en-US", "de-DE".

Language selector: aria-label="Interface language." Each option: text in native script (screen readers will attempt to pronounce it). Time zone selector: aria-label="Time zone" with autocomplete. Format preview: aria-live="polite" updating as selections change. If the language change triggers a page reload, announce before reloading: "Switching language to Deutsch. The page will reload." Ensure the settings page itself is translated — don't show an English-only settings page for non-English speakers.

Table or list: Action (text) + Key binding (rendered as <kbd> elements). Search: filter by action name. Categories: group by context (Global, Editor, Navigation). Rebind: click the key binding → show "Press new shortcut..." → capture keydown → validate no conflicts → save. Store custom bindings in user preferences (or localStorage for local-only). Reset button: "Restore defaults" per shortcut or globally. Show a "Conflicts with [action]" warning if the chosen binding is already used.

Shortcut list: <table> or <dl> (description list) with action/binding pairs. Key bindings: <kbd> elements with aria-label spelling out the shortcut: "Control plus K" not "Ctrl+K". Rebind button: aria-label="Change shortcut for [action name]." Capture mode: role="dialog" aria-label="Press new keyboard shortcut." Conflict warning: aria-live="assertive." Reset: confirmation dialog. Ensure the shortcut panel itself is fully keyboard-navigable (ironic but critical).

On each control change: (1) optimistically update the UI, (2) call the API (debounced 500ms for text inputs, immediate for toggles/selects), (3) show "Saving..." spinner, (4) on success: show "Saved" checkmark that fades after 2s, (5) on failure: revert the control value, show error toast. Use a per-setting save indicator (not a global one) so users know which setting was saved. For text inputs: auto-save on blur or after 1s of inactivity (not on every keystroke). Track unsaved changes for page navigation warnings (beforeunload).

Save indicator: aria-live="polite" region per setting group announcing "Saved" or "Failed to save." Do not announce every individual toggle save — group nearby changes within 2 seconds. Saving spinner: aria-label="Saving..." on the indicator element. Reverted change: aria-live="assertive" announcing "Failed to save — reverted to previous value." For text inputs with debounced save: announce "Saving..." during the debounce delay, "Saved" on completion.

Card grid: 2-4 cards with equal height (CSS grid or flex). Each card: plan name, price (dynamic based on monthly/annual toggle), feature list, CTA button. Recommended plan: accent border, "Popular" badge, slightly larger or elevated. Monthly/Annual toggle: segmented control above the cards with savings callout. Upgrade flow: confirmation dialog showing prorated charge + "You'll be charged $X today." Downgrade flow: show lost features + "Changes take effect on [date]." Current plan: disabled button with "Current Plan" label.

Plan cards: role="radiogroup" aria-label="Select a plan" with each card as role="radio". Feature list: <ul> with checkmark (aria-hidden on the icon, include "Included:" or "Not included:" as sr-only text). Price toggle: role="radiogroup" aria-label="Billing period." Recommended badge: text is sufficient (no aria-label needed as it's visible). CTA: clear button labels ("Upgrade to Pro" not just "Select"). Confirmation dialog: role="alertdialog" with price and consequences.

List of payment method cards. Each card: brand logo (Visa, Mastercard, Amex) + "•••• 4242" + "Expires 12/27" + default badge. Actions: "Set as default" (if not default), "Remove" (with confirmation). "Add payment method" button opens a modal with Stripe Elements (CardElement or PaymentElement) for PCI-compliant card collection. On add: tokenize client-side, send token to server. Never transmit raw card data through your server. Show processing spinner during tokenization and API call.

Payment list: role="list" aria-label="Payment methods." Each entry: aria-label="Visa ending in 4242, expires December 2027, default payment method." Default badge: visible text label. Set default: aria-label="Set Visa ending in 4242 as default." Remove: aria-label="Remove Visa ending in 4242" with confirmation dialog (role="alertdialog"). Add form: Stripe Elements handles its own a11y (label, error messaging). Processing state: aria-live="polite" with "Processing payment method."

https://docs.stripe.com/payments/elements

Table with columns: Date, Description, Amount, Status, Invoice. Status badges: green (Paid), yellow (Pending), red (Failed), gray (Refunded). Each row has a "Download PDF" or "View Invoice" link. Pagination: show 10-20 per page. At the top: card showing "Next payment: $29.00 on April 6, 2026." Failed payment alert: red banner with "Payment failed — update your payment method" + CTA button. Link to Stripe Customer Portal for detailed billing management if using Stripe Billing.

Table: <table> with <caption>"Billing history"</caption>, <th scope="col"> headers. Status badges: text label (not color-only). Download link: aria-label="Download invoice for March 2026, $29.00." Failed payment alert: role="alert" with clear CTA. Next payment card: regular text content, no special ARIA needed. Pagination: standard accessible pagination with aria-label="Billing history pages." Filter controls: labeled form elements.

Progress bar container with the filled portion reflecting percentage. Label: "8,432 / 10,000 API calls (84%)." Color: CSS custom properties transitioning through green → yellow → red based on thresholds. Warning state (80%+): yellow bar + "Approaching limit" text + "Upgrade" link. Exceeded (100%+): red bar + "Limit exceeded" alert. Multiple meters: stack vertically in a card grid. Reset date: "Resets on April 1, 2026." Historical trend: optional sparkline chart showing last 30 days.

Progress bar: <div role="progressbar" aria-valuenow="8432" aria-valuemin="0" aria-valuemax="10000" aria-label="API calls used: 8,432 of 10,000">. Text label: visible alongside the bar (not inside it). Warning: aria-live="polite" announcing "API call usage at 84% — approaching plan limit." Exceeded: role="alert" with "API call limit exceeded." Color must not be the sole indicator — pair with text labels and icons. Upgrade CTA: clear link text "Upgrade plan to increase API call limit."

HTML <table> with sticky header row (plan names + prices). Feature rows grouped with <tbody> per category and category headings as full-width rows. Current plan column: accent background or border. Checkmark: SVG icon. Dash: "—" character. Values: plain text. Mobile: convert to stacked cards (one card per plan showing its features) or use horizontal scroll with the plan names sticky. "Upgrade" button in the column header for each plan above the current.

Table: <table> with <caption>"Plan comparison"</caption>. Plan headers: <th scope="col">. Feature names: <th scope="row">. Checkmarks: aria-label="Included" (not just an icon). Dashes: aria-label="Not included." Values: plain text is self-describing. Current plan: visually highlighted AND labeled with "(Current plan)" text. Category group headings: <th scope="rowgroup" colspan="...">. Mobile card view: maintain the same information hierarchy. Column highlight: do not rely on background color alone.

Form with three fields: Current Password, New Password, Confirm New Password. Each with a visibility toggle (eye icon button). Strength meter below New Password: visual bar (red/yellow/green) + text label (Weak/Fair/Strong). Use zxcvbn for realistic strength estimation (not just regex rules). Validation: match check between new + confirm, minimum requirements, not same as current. Submit: verify current password server-side, hash new password (bcrypt/argon2), update. Option: "Log out of all other sessions" checkbox. Success toast + email notification.

All inputs: <label> elements with for attributes. Visibility toggle: aria-label="Show password" / "Hide password" with aria-pressed. Strength meter: role="meter" aria-valuenow (0-4) aria-valuemin="0" aria-valuemax="4" aria-label="Password strength: Strong." Validation errors: aria-describedby on inputs, aria-invalid="true." Confirm mismatch: "Passwords do not match" as inline error. Submit: aria-disabled when validation fails. Success: aria-live="polite" toast.

Setup flow: (1) Generate TOTP secret server-side, (2) Render QR code (otpauth:// URI) using qrcode library, (3) Show "Can't scan? Enter this code manually: XXXX-XXXX-XXXX-XXXX", (4) Verification input (6-digit OTP), (5) On success: generate 8-10 recovery codes, (6) Display recovery codes with "Copy" and "Download" buttons, (7) Confirm: "I have saved my recovery codes" checkbox before enabling. Store TOTP secret encrypted. Display current 2FA status: enabled methods, last used date.

QR code: <img alt="Scan this QR code with your authenticator app"> with the manual secret key as accessible alternative text. Manual key: selectable text with "Copy" button. OTP input: aria-label="Enter 6-digit verification code" with inputmode="numeric" autocomplete="one-time-code." Recovery codes: <pre> or <code> block with aria-label="Recovery codes — save these in a secure location." Copy button: aria-label="Copy recovery codes." Download: aria-label="Download recovery codes as text file." Checkbox: accessible label.

List of session cards. Each card: device icon (desktop/mobile/tablet) + browser name + OS + location + "Last active: 2 hours ago." Current session: "This device" badge, no revoke button. Other sessions: "Revoke" button. Revoke all: button at the top with confirmation dialog ("This will log you out of all devices except this one"). Data: from a sessions table with user_agent parsing (ua-parser-js), IP geolocation (MaxMind GeoLite2). Show "Unknown device" for unrecognized user agents. Auto-remove sessions inactive for 30+ days.

Session list: role="list" aria-label="Active sessions." Each entry: aria-label="Chrome on macOS, San Francisco, US, last active 2 hours ago." Current device: "(This device)" in the text label. Revoke button: aria-label="Revoke session — Chrome on macOS." Revoke all: confirmation dialog role="alertdialog" with warning text. Location: include country name (not just code). Announce revocation: "Session revoked" via aria-live="polite."

Key list: table with columns Name, Key (prefix only: "sk_live_Ax8f..."), Created, Last Used, Actions. Create dialog: name input + scope checkboxes (Read, Write, Admin) + expiration select (Never, 30 days, 90 days, 1 year). On create: server generates the key, returns it once. Show in a modal with a "Copy" button and warning: "This key will not be shown again." Revoke: confirmation dialog ("Revoking this key will immediately break any integrations using it"). Store only the key hash server-side. Rate limit key creation.

Key table: standard accessible table with <th scope="col"> headers. Key prefix: display as text, not in an input. Create dialog: role="dialog" aria-label="Create API key." Scope checkboxes: role="group" aria-label="Key permissions." Created key display: aria-live="assertive" announcing "API key created — copy it now, it won't be shown again." Copy button: aria-label="Copy API key to clipboard" with confirmation "Copied." Revoke: role="alertdialog" with consequences. Last used: relative time with title attribute for exact timestamp.

Append-only event list rendered as a vertical timeline or simple table. Event types: login_success, login_failed, password_changed, 2fa_enabled, 2fa_disabled, session_revoked, api_key_created, api_key_revoked. Each entry: icon + description + relative timestamp + IP + location. Filter: checkboxes per event type. Suspicious activity: highlighted with a yellow/orange background + alert icon. Real-time: new events prepended via polling (every 60s) or WebSocket. Pagination: "Load more" or infinite scroll. Retain for 90 days minimum.

Event list: role="feed" or role="list" aria-label="Security log." Each entry: role="article" with aria-label summarizing the event: "Successful login from Chrome on macOS, San Francisco, 2 hours ago." Suspicious events: additional text "(Unusual activity)" appended to the label, plus aria-live="assertive" for new suspicious events. Filter controls: standard checkbox accessibility. Timestamp: <time datetime="...">. Load more: aria-label="Load older events."

UI: checkbox list of data categories (Profile, Posts, Comments, Files, Activity Log, Settings) + format selector (JSON, CSV). "Request Export" button. On submit: create an async job, show "Your export is being prepared. We'll email you when it's ready." Email: download link valid for 48 hours. Status in settings: "Export requested on [date] — processing / ready / expired." Rate limit: one export per 24 hours. For small accounts (<1MB): generate immediately and offer direct download. Compress to ZIP for multi-file exports.

Category checkboxes: role="group" aria-label="Data to export." Each checkbox: standard <input type="checkbox"> with <label>. Format selector: <select> or radio group with label. Submit: "Request data export" button. Status: aria-live="polite" region showing current export status. Email notification: accessible HTML email with prominent download button. Expired link: clear error message "This download link has expired. Request a new export." Progress (if shown): role="progressbar" with aria-valuenow.

Grouped toggles organized by category: Data Collection (analytics, crash reports), Communications (marketing emails, product updates), Visibility (public profile, search engine indexing), Sharing (third-party integrations, advertising). Each toggle: label + clear description of what it controls. Default: off for non-essential collection (privacy by default). "Do Not Sell" toggle or link for CCPA. Cookie preferences: link to cookie consent manager. Last updated date shown. Auto-save each toggle with confirmation.

Each toggle: role="switch" with aria-checked and associated <label>. Description: aria-describedby on the switch pointing to the explanatory text. Groups: role="group" aria-label="Data Collection preferences." Changes: aria-live="polite" announcing "Analytics tracking disabled." "Do Not Sell" link: prominent, keyboard-accessible, labeled clearly. Ensure toggles are large enough for touch (44x44px minimum). Do not use dark patterns (pre-checked boxes, confusing double negatives like "Don't not send me emails").

Accordion or grouped sections per cookie category. Each section: name, description, toggle (except Necessary — always on), expandable list of individual cookies with name, purpose, and expiry. "Accept All" / "Reject Non-Essential" / "Save Preferences" buttons. On save: update cookie consent state (stored in a first-party cookie), delete cookies from rejected categories (document.cookie = "name=; expires=..."), and update any third-party scripts (disable/enable Google Analytics, marketing pixels, etc.). Link from the footer and privacy settings.

Category toggles: role="switch" with aria-checked. Necessary: aria-disabled="true" with aria-describedby explaining "Required for the website to function." Accordion: role="region" with aria-expanded. Cookie list: <table> with Name, Purpose, Expiry columns. Action buttons: clear labels. "Accept All" must not be visually dominant over "Reject" (no dark pattern of making reject small/hidden). Announce preference save: "Cookie preferences saved" via aria-live="polite".

Two paths: (1) Selective data deletion — checkbox list of data categories + "Delete Selected Data" button + confirmation dialog listing exactly what will be removed. (2) Full account deletion — redirects to the Account Deletion pattern with a Danger Zone. For selective deletion: async processing for large datasets, email confirmation when complete. Retention notices: "Financial records must be retained for 7 years per regulatory requirements" — these categories have disabled checkboxes with explanatory text. Audit log entry for every deletion request.

Category checkboxes: standard accessible checkboxes. Disabled categories: aria-disabled="true" with aria-describedby explaining retention requirements. Confirmation dialog: role="alertdialog" with clear description of what will be deleted and what will be retained. Processing status: aria-live="polite" region. Completion notification: "Your data has been deleted" via email and in-app notification. Undo option (during grace period): prominent "Cancel deletion" button with aria-label.

Step wizard: Source Selection → Upload/Connect → Field Mapping → Review → Import. Source: card grid of supported services + "Upload file" option. Upload: drag-and-drop zone for CSV/JSON. Field mapping: two-column table — Source Field → Destination Field with <select> dropdowns per row. Preview: show first 5 rows of mapped data. Import: async with progress bar. Results page: "247 imported, 3 skipped (duplicate), 1 failed (invalid email)" with downloadable error report. Rate limit: one import per hour.

Step wizard: <ol> with aria-current="step" on the active step. File upload: accessible drag-and-drop with <input type="file"> fallback. Field mapping: <table> with <th scope="row"> for source fields. Select dropdowns: standard accessible <select>. Preview: accessible data table. Progress: role="progressbar" aria-valuenow aria-valuemin aria-valuemax aria-label="Import progress." Results: clear text summary with "Download error report" link (aria-label). Step navigation: "Back" and "Next" buttons with step context.