Accessible Collapsible & Accordion Components in Svelte with Melt UI





Accessible Collapsible & Accordion Components in Svelte with Melt UI



Accessible Collapsible & Accordion Components in Svelte with Melt UI

Short summary: this article shows how to design and implement accessible, keyboard-friendly collapsible/accordion UI for modern frontend stacks — SvelteKit + TypeScript + TailwindCSS — and how Melt UI primitives and WAI-ARIA guidance fit into the picture. Expect practical code, SEO-minded patterns (voice-search & snippets), and enough accessibility detail to keep auditors and users equally happy.

1. Quick SERP analysis & user intent (TL;DR)

Target keywords (webdev, svelte, melt-ui, collapsible, accordion, accessibility, wai-aria, sveltekit, typescript, tailwindcss, webcomponents, javascript, frontend, programming, ui-components) map to at least three clear intents:

– Informational: „how to build accessible collapsible/accordion” and „Melt UI examples in Svelte”.

– Transactional/Commercial: „Melt UI docs”, „SvelteKit starter + Tailwind” (users looking for libraries, boilerplates).

– Navigational: „Melt UI docs”, „SvelteKit site”, „Tailwind docs”.

Top-ranking pages typically include a short explainer, code samples, ARIA guidance, and a working demo. Successful pages often provide both a library-based example (Melt UI or similar primitives) and a minimal vanilla implementation for learning and progressive enhancement.

2. Semantic core & keyword clusters (extracted and expanded)

Below is an expanded semantic core built from your seeds plus commonly searched variants and LSI terms. Grouped by intent and role so you can drop them naturally into content and headings.

Primary (main targets)

  • collapsible
  • accordion
  • melt-ui
  • svelte
  • sveltekit

Secondary (supporting / implementation)

  • typescript
  • tailwindcss
  • accessibility
  • wai-aria
  • ui-components

Modifiers & LSI (search variations and long tails)

  • „accessible accordion svelte”
  • „collapsible component melt ui example”
  • „svelte collapsible typescript”
  • „tailwind accordion animation”
  • „keyboard accessible accordion WAI-ARIA”
  • „sveltekit accordion server-side rendering”
  • „progressive enhancement collapsible javascript”

Use the primary keywords in H1/H2/H3 and sprinkle LSI/long-tail variants in code comments, captions, and the first 150 words for featured-snippet friendliness.

3. Popular user questions (People Also Ask / forums)

Collected common questions (typical PAA and forum intents):

  • How do I build an accessible accordion in Svelte?
  • Does Melt UI provide collapsible primitives for Svelte?
  • How to add keyboard navigation and ARIA roles to collapsible panels?
  • Can I animate collapsible height with TailwindCSS?
  • How to use collapsible components with TypeScript in SvelteKit?
  • Should I use webcomponents or Svelte components for UI primitives?

For the final FAQ we’ll use the three most actionable questions:

  1. How do I build an accessible accordion in Svelte?
  2. Does Melt UI have collapsible components and how do I use them?
  3. How to ensure keyboard & screen reader accessibility (WAI-ARIA) for collapsibles?

4. Implementation: Setup & strategy

Goal: provide two paths — a library-based flow using Melt UI primitives (fast, tested) and a minimal, explicit Svelte + TypeScript version (learning, no external dependency). Both work in SvelteKit and pair nicely with TailwindCSS for styling. Pick one for production: Melt UI if you want consistent primitives and accessibility baked in; a minimal solution if you need absolute control.

Prereqs: SvelteKit app, TypeScript enabled (check svelte config), and TailwindCSS integrated. Quick links: Svelte (https://svelte.dev), SvelteKit (https://kit.svelte.dev), Melt UI (https://melt-ui.com), TailwindCSS (https://tailwindcss.com), WAI-ARIA reference (https://www.w3.org/WAI/ARIA).

Install commands (example):

npm install -D tailwindcss postcss autoprefixer
npm install @melt-ui/core
# or the specific Melt packages your project needs (see Melt docs)

5. Example A — Melt UI primitives (recommended path)

Melt UI provides accessible primitives for common UI patterns. If you’re using Melt, prefer their Collapsible/Accordion primitives to avoid re-implementing keyboard logic and ARIA. I won’t pretend to memorize every export name — consult the official Melt docs linked above — but the typical install + usage flow is consistent: import primitives, wrap triggers and content, style with Tailwind.

Advantages: tested keyboard handling, proper aria attributes, animations, and predictable behavior across browsers. Disadvantage: dependency and potential bundle size (usually small for primitives).

Integration notes: in SvelteKit a Melt-based component is client-friendly; if you SSR, hydrate on client — Melt usually handles this. Always test with keyboard and a screen reader.

6. Example B — Minimal accessible collapsible in Svelte + TypeScript (no external primitives)

Here is a concise, production-minded Svelte component. It uses WAI-ARIA patterns for a single collapsible. For an accordion (multiple items where only one is open), you will add parent-managed state and roving focus — I show notes after the snippet.

<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  export let id = 'collapsible-1';
  export let open: boolean = false;
  export let label = 'Details';
  const dispatch = createEventDispatcher();

  function toggle() {
    open = !open;
    dispatch('toggle', { open });
  }

  // Keyboard: Space/Enter toggle is on button element default behavior.
</script>

<section class="mb-4">
  <h3>
    <button
      id="{id}-button"
      aria-controls="{id}-panel"
      aria-expanded="{open}"
      on:click="{toggle}"
      class="flex items-center justify-between w-full p-3 bg-gray-100 rounded hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
    >
      <span>{label}</span>
      <svg class="w-4 h-4 transform {open ? 'rotate-180' : ''} transition-transform" viewBox="0 0 24 24">
        <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </button>
  </h3>

  <div
    id="{id}-panel"
    role="region"
    aria-labelledby="{id}-button"
    hidden={!open}
    class="mt-2 p-3 bg-white border rounded"
  >
    <p>This is the collapsible content. Keep it concise and semantic. Use headings where appropriate.</p>
  </div>
</section>

Notes on the snippet:

– Use a native <button> for the trigger: it provides keyboard activation (Enter/Space) and is expected by assistive tech.

– aria-expanded on the trigger and aria-controls linking to the panel are the core WAI-ARIA connections. The panel should use role=”region” and aria-labelledby for clarity.

– Use the hidden attribute or toggle max-height with CSS transitions for animation. If using Tailwind, craft utilities for smooth open/close (see Tailwind docs for transition utilities).

7. Accordion behavior & keyboard patterns

If you implement an accordion (multiple items with mutual exclusivity), follow WAI-ARIA Authoring Practices:

  • Use roving tabindex (manage focus index) or use native buttons with a single tab stop per header.
  • Provide Arrow Up/Down to move focus between headers, Home/End to jump. Keep Enter/Space to toggle.

Implementation options:

– Library (Melt UI) handles the above for you. Great when you want robust behavior fast.

– Manual: manage a focusedIndex and on:keydown handlers on the header buttons. Always test with VoiceOver and NVDA.

8. Tailwind tips for animations & layout

Animating height from 0 to auto is awkward with pure CSS; options:

– Use max-height with a known max (simple hack). Not perfect but simple.

– Use CSS transforms or opacity + scale for non-layout animations (smooth but doesn’t affect layout). For content that needs to push layout, prefer JS to measure content height and animate explicitly (Svelte’s transition:slide can help).

9. SEO & voice-search optimization

To optimize this article/component for SERP features and voice search:

– Provide short, direct answers near the top (featured-snippet friendly). E.g., „To build an accessible accordion in Svelte: use native <button> triggers, aria-expanded, aria-controls, and role=’region’ on panels.”

– Add structured data: FAQPage JSON-LD and Article schema. Include concise Q&A pairs so Google can surface them as Rich Results. See the JSON-LD block at the end of this file.

– Ensure server-rendered content (SvelteKit SSR) includes the core text so crawlers see it without JS. Hydrate behavior is fine for interactive parts.

10. Suggested microdata (FAQ JSON-LD and Article)

Insert this JSON-LD into the page head or just before closing body to enable FAQ rich results.

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How do I build an accessible accordion in Svelte?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Use native button triggers with aria-expanded and aria-controls, role=\"region\" on panels, and implement keyboard navigation (Enter/Space to toggle, Arrow keys for navigation). Test with screen readers."
      }
    },
    {
      "@type": "Question",
      "name": "Does Melt UI have collapsible components and how do I use them?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes — Melt UI provides accessible primitives (see the Melt UI docs). Import the Collapsible/Accordion primitives and wrap triggers and content, then style with Tailwind."
      }
    },
    {
      "@type": "Question",
      "name": "How to ensure keyboard & screen reader accessibility for collapsibles?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Follow WAI-ARIA patterns: use aria-expanded, aria-controls, role attributes, and add keyboard handlers for Arrow/Home/End navigation if implementing an accordion."
      }
    }
  ]
}

11. Backlinks (recommended external anchors)

Use the following authoritative links as outbound references in your published article. Anchor text matches recommended keywords for better topical signals:

12. Final checklist before publishing

– Include concise answer near top (for snippets and voice search). Keep the first paragraph tight.

– Add the FAQ JSON-LD into the page head or before closing body.

– Verify SSR content via SvelteKit so crawlers see the text without JS. Test keyboard navigation and a couple of screen readers. Add unit/visual tests if part of a component library.

FAQ (final three, short answers)

How do I build an accessible accordion in Svelte?

Use native <button> triggers with aria-expanded and aria-controls, mark panels with role=”region” and aria-labelledby, and implement keyboard navigation (Enter/Space to toggle; optionally Arrow/Home/End for moving focus). Test with VoiceOver/NVDA.

Does Melt UI have collapsible components and how do I use them?

Yes. Melt UI provides accessible primitives for collapsible/accordion patterns — import the Collapsible or Accordion primitives from Melt and wrap triggers and content. See the official Melt documentation for exact API and examples: https://melt-ui.com.

How to ensure keyboard & screen reader accessibility (WAI-ARIA) for collapsibles?

Follow WAI-ARIA Authoring Practices: aria-expanded on triggers, aria-controls linking to the panel, role=”region” on panels, and proper keyboard handling (Enter/Space for toggle; Arrow keys for accordion navigation). Also ensure focus styles and test with screen readers.

SEO Title & Meta Description (ready-to-use)

Title (≤70 chars): Accessible Collapsible & Accordion in Svelte — Melt UI + TypeScript

Description (≤160 chars): Build accessible collapsible and accordion UI in SvelteKit using Melt UI, TypeScript and TailwindCSS. Code examples, ARIA patterns and SEO tips.

Appendix: Semantic core block (copyable HTML)

Use this block on your CMS to keep keywords visible to editors and for internal SEO tracking:

<div class="seo-keywords">
  <!-- Primary -->
  collapsible, accordion, melt-ui, svelte, sveltekit
  <!-- Secondary -->
  typescript, tailwindcss, accessibility, wai-aria, ui-components
  <!-- LSI -->
  accessible accordion svelte, melt ui collapsible example, svelte collapsible typescript, tailwind accordion animation, keyboard accessible accordion WAI-ARIA
</div>

That’s it. If you want, I can:

  • Generate a ready-to-drop SvelteKit route (full file tree) with Melt UI and Tailwind configured;
  • Produce an accordion component that supports ARIA roving focus and a11y tests (NVDA/VoiceOver snippets);
  • Run a content audit simulation comparing 3 top competitors and suggest exact H2/H3 headings to outrank them.

Pick one and I’ll produce the code or audit next. Meanwhile — go build something collapsible and make accessibility proud.


Zobacz także

Osoba trzyma w obu dłoniach czarnego smartfona i robi za jego pomocą zdjęcie swojej córce, która puszcza bańki mydlane.

Zdjęcia na telefonie – przechowywanie, przenoszenie, przerabianie

Publikowane porady na stronie mają jedynie charakter informacyjny. Autor strony nie ponosi odpowiedzialności za skutki wynikłe z zastosowania się do opublikowanych treści.
Kopiowanie bez zgody i wiedzy właściciela strony jest niezgodne z prawem. Wszelkie prawa zastrzeżone © 2026 https://www.sposobnawszystko.pl