Platform under construction

Web Components & Accessibility

Advanced

Progressive Enhancement

Progressive enhancement starts with usable HTML and adds JavaScript as an improvement.

<a href="/account/settings">Account settings</a>

if ("customElements" in window) {
  customElements.define("settings-link", SettingsLink);
}

Web Components & Accessibility

Progressive Enhancement belong to usable component design.

Progressive enhancement starts with usable HTML and adds JavaScript as an improvement.

A component should hide repetition without hiding meaning. Start with semantic HTML, then add the browser feature that solves the real problem.

The professional version is not only that the component works. It must remain accessible, testable, maintainable and understandable in production.

Core API

feature detection

Meaning first

Use the right HTML before adding custom behavior.

User input

Keyboard, focus and assistive technology need deliberate support.

Production habit

Clean up listeners and keep component boundaries clear.

Examples

Good component code keeps meaning visible.

Use the browser feature with semantic intent

<a href="/account/settings">Account settings</a>

if ("customElements" in window) {
  customElements.define("settings-link", SettingsLink);
}

Hide meaning behind JavaScript

<button data-route="/account/settings">Settings</button>
// Without JavaScript the navigation no longer works.

Code patterns

Reusable examples for quick reference.

Use these examples as a quick reference when building reusable browser UI.

Basic pattern

A compact example of the feature in context.

<a href="/account/settings">Account settings</a>

if ("customElements" in window) {
  customElements.define("settings-link", SettingsLink);
}

Weak pattern

A common shortcut that creates maintenance or accessibility problems.

<button data-route="/account/settings">Settings</button>
// Without JavaScript the navigation no longer works.

Feature check

Check support before depending on advanced browser features.

if ("customElements" in window) {
  // Register or enhance the component.
}

Accessible update

Dynamic UI should communicate state changes clearly.

const status = document.querySelector("[aria-live]");
status.textContent = "Interface updated.";

Rules that matter

Accessible components need rules, not luck.

Web Components can be powerful, but the browser does not automatically make custom UI accessible.

Start from working HTML

The page should have meaning before JavaScript upgrades it.

Use native controls when possible

Buttons, links and form controls already handle many accessibility details.

Manage focus deliberately

Dynamic interfaces should not trap or lose keyboard users.

Clean up side effects

Remove listeners and timers when components leave the page.

Keep styling boundaries clear

Shadow DOM can help, but it should not make the UI impossible to theme.

Test without a mouse

Keyboard testing catches real usability problems quickly.

Production thinking

Ship components that survive reuse.

Why does this matter?

Component code often gets reused everywhere. If the foundation is inaccessible, the problem spreads everywhere too.

Accessibility

This chapter is accessibility-heavy on purpose: reusable UI has to work for keyboard users, screen readers and dynamic content updates.

Production note

Production components need documented APIs, predictable lifecycle behavior, cleanup and browser-support decisions.

SEO note

Important content should not be locked inside client-only behavior that search engines or no-JavaScript users cannot reach.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change the visible text and run the example again.
Explain which part is plain HTML and which part is JavaScript enhancement.
Test the example using only the keyboard where possible.

Practice assignment

Do this before moving to the next topic.

Write the simplest semantic HTML version first.
Add the JavaScript behavior in a small, named block.
Add one accessibility check before calling the component finished.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Progressive Enhancement.