[Svelte Series 15] Building Accessible Svelte Components

Accessibility isn't an extra feature; it's inviting more people to use what you built.

Key terms

1. Focus: the currently interactive element while using the keyboard; adjust the order with tabindex.
2. aria-label: text hidden visually but announced by screen readers to explain a control.
3. Modal (dialog): an overlay window that must trap focus while open.
4. Contrast media query: CSS rules like @media (prefers-contrast: more) that match users asking for stronger outlines.

Core ideas

Focus defines which element keyboard users control. When you repurpose a non-button element, set role="button" and tabindex="0" so it becomes reachable. Screen reader labels describe intent even without visible text via aria-label or aria-labelledby. Modals sit atop the page and must keep focus inside until closed, then restore the previous position.

Code examples

Let's review card toggles, modals, and contrast tweaks.

<div
  role="button"
  tabindex="0"
  on:click={() => toggle(task)}
  on:keydown={(event) => {
    if (event.key === 'Enter' || event.key === ' ') toggle(task);
  }}
>
  <h3>{task.title}</h3>
</div>

<button aria-label={`Toggle completion for ${task.title}`}>
  ✔
</button>

<dialog bind:open={open} aria-labelledby={labelId} aria-describedby={descId}>
  <h2 id={labelId}>Task detail</h2>
  <p id={descId}>Check status, assignee, and attachments.</p>
  <button on:click={() => (open = false)}>Close</button>
</dialog>

:global(.card) {
  background: var(--surface);
}

@media (prefers-contrast: more) {
  :global(.card) {
    border: 2px solid var(--outline-strong);
  }
}

Attach aria-label to icon buttons and connect dialog headings/descriptions so screen readers announce them. Contrast media queries strengthen outlines for users who request high contrast.

Why it matters

School projects serve people in all kinds of contexts. Some rely entirely on the keyboard; others zoom in or enable high-contrast modes. Basic ARIA attributes and focus order checks dramatically reduce support requests.

Practice tasks

• Follow along: add role, tabindex, and keyboard handlers to card toggles so they work via the Tab key.
• Extend it: build a dialog-based modal with bind:open and a close button.
• Debugging: if screen readers stay quiet, verify aria-live regions and aria-label wiring.
• Done when: every major action is reachable with Tab and card outlines remain visible in high-contrast mode.

Wrap-up

Accessibility checks must repeat regularly. Next we'll validate these components with automated tooling to keep quality high.