Accessible Collapsible & Accordion Components in Svelte with Melt UI

Practical patterns for webdev teams using Svelte, SvelteKit, Melt UI, TailwindCSS and TypeScript. Also touches WAI-ARIA and exporting as Web Components.

Quick SERP analysis & user intent (English TOP-10)

Search results for terms like «accessible accordion svelte», «melt-ui collapsible», and «svelte collapsible component» are dominated by: official docs (Melt UI site, Svelte docs), short blog tutorials (Dev.to, personal blogs), GitHub examples, and MDN/W3C references on ARIA. Practical guides and code sandboxes often outrank purely conceptual posts.

User intents cluster clearly: informational/tutorial intent (how-to, examples), commercial intent (component libraries and paid UI kits), navigational (finding Melt UI or Svelte docs), and mixed queries (how-to + best component for production). Most queries want runnable code + accessibility guidance, not theory.

Top competitors typically provide a short 200–800 word tutorial with a code example and screenshots. High-quality winners include: comprehensive docs, copy-paste examples, accessibility notes, and live sandboxes. Depth gaps you can exploit: step-by-step WAI-ARIA explanation, TypeScript patterns, SvelteKit integration, and exporting as webcomponents.

Semantic core (clusters, LSI and intents)

Below is an SEO-minded semantic core derived from the provided keywords and typical English search behavior. Use these phrases naturally across headings, code comments and alt text.

  
  {
    "main": [
      {"kw":"webdev","intent":"informational"},
      {"kw":"svelte","intent":"navigational/informational"},
      {"kw":"melt-ui","intent":"navigational/commercial"},
      {"kw":"sveltekit","intent":"informational"},
      {"kw":"webcomponents","intent":"informational/technical"},
      {"kw":"collapsible","intent":"informational/tutorial"},
      {"kw":"accordion","intent":"informational/tutorial"},
      {"kw":"accessibility","intent":"informational"},
      {"kw":"wai-aria","intent":"informational"},
      {"kw":"ui-components","intent":"commercial/informational"}
    ],
    "secondary": [
      {"kw":"typescript","intent":"informational"},
      {"kw":"tailwindcss","intent":"informational"},
      {"kw":"javascript","intent":"informational"},
      {"kw":"frontend","intent":"informational"},
      {"kw":"programming","intent":"informational"}
    ],
    "modifiers_and_longtails": [
      "accessible accordion svelte",
      "melt-ui collapsible example",
      "svelte collapsible component typescript",
      "accordion keyboard navigation aria",
      "tailwindcss styling melt ui",
      "sveltekit collapsible route example",
      "export svelte component as webcomponent",
      "aria-controls aria-expanded accordion"
    ],
    "LSI_and_synonyms": [
      "collapse component",
      "expand/collapse",
      "toggle panel",
      "disclosure widget",
      "accordion pattern",
      "keyboard accessible accordion",
      "sr-only label",
      "aria attributes for collapsible"
    ]
  }
  

How to build a robust collapsible/accordion with Melt UI in Svelte

Start with Melt UI’s primitives — they are designed with Svelte in mind and include accessibility patterns out-of-the-box. Install Melt and import the Collapsible or Accordion primitives into your Svelte component, then wire up triggers and panels. If you’re following a tutorial, the code will usually be 20–60 lines once you add markup and styles.

Use Melt UI for state handling and ARIA wiring and style with TailwindCSS utility classes for a compact and maintainable setup. If you prefer TypeScript, keep components typed: props, event payloads and ref forwarding (when needed) make long-term maintenance easier.

An example pattern: a list of headings (buttons) that toggle associated panels, with unique IDs and aria-controls/aria-expanded attributes. Melt UI may provide a higher-level Accordion abstraction — use it for grouped behaviors (single-open, multi-open), and fall back to Collapsible primitives for single isolated toggles.

Accessibility: WAI-ARIA and keyboard requirements

Accessibility is not optional. For collapsibles/accordions, ensure triggers have aria-expanded and aria-controls. The content panels should have an ID referenced by aria-controls and a role of region with aria-labelledby when the heading is separate. These attributes make state visible to assistive tech and are searchable by automated test suites.

Keyboard interactions matter: Enter and Space must toggle the currently focused trigger; Arrow keys (Up/Down or Left/Right) should move focus across triggers in an accordion group. Focus management also requires attention when panels open — don’t trap focus unless the pattern requires modal behavior.

Consult the WAI-ARIA Authoring Practices for the canonical pattern. For quick reference see the WAI-ARIA resources at W3C WAI-ARIA and MDN’s accessibility docs. If you use Melt UI, verify its implementation against these specs and add missing pieces (like keyboard nav) in small wrappers if needed.

Practical SvelteKit + TypeScript tips

In SvelteKit, keep UI components isolated under src/lib/components and use +page.svelte for route-level composition. Import Melt UI components into your Svelte files and use TypeScript by naming files .svelte with