Progressive enhancement in Svelte

Introduction

Progressive enhancement means making your web app work well for everyone, even if some features or scripts don't load. It starts with a simple, basic version and adds fancier features on top.

You want your website to work on old browsers or slow connections.

You want your app to be accessible to users with disabilities.

You want your site to still show content if JavaScript is disabled.

You want to improve user experience step-by-step without breaking basics.

Syntax

Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count++} aria-label="Increase count">
  Clicked {count} times
</button>

<noscript>
  <p>Please enable JavaScript to use the interactive features.</p>
</noscript>

Use

Use semantic HTML and ARIA labels to keep accessibility good.

Examples

This button works only if JavaScript is enabled.

Svelte

<button on:click={() => alert('Hello!')}>Click me</button>

This message shows only if JavaScript is disabled.

Svelte

<noscript>
  <p>JavaScript is off. Please enable it for full experience.</p>
</noscript>

Link works even without JavaScript, ensuring basic navigation.

Svelte

<a href="/basic-page">Go to basic page</a>

Sample Program

This Svelte component shows a button that counts clicks if JavaScript is enabled. If JavaScript is off, the

Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count++} aria-label="Increase count">
  Clicked {count} times
</button>

<noscript>
  <p>JavaScript is disabled. You can still read the content but interactive features are off.</p>
</noscript>

Important Notes

Always start with simple HTML content that works alone.

Add JavaScript features on top without removing basic content.

Use

Summary

Progressive enhancement ensures your app works for everyone.

Start with basic content, then add interactive features.

Use semantic HTML, ARIA, and <noscript> for accessibility and fallback.