Usability and accessibility » Web components

Sebastian Greger This is a living document
Last update:

Web components are a popular technique to build encapsulated HTML building blocks. To make them universally accessible, they have to be carefully designed.

At its core, the key design concept for an accessible, progressively enhanced web component is actually rather straightforward:

Web Components as Progressive Enhancement cloudfour.com

Reference projects and examples

Some #a11y-focused, inclusively designed web components:

HowTo: Components – howto-tabs googlechromelabs.github.io
Add Responsive-Friendly Enhancements to `details` with `details-utils` zachleat.com
ciampo/macro-carousel: Carousel as a Vanilla Web Component. github.com
Filament Group Modal | A simple, accessible modal dialog web component filamentgroup.github.io

Critique

Why I don’t use web components dev.to

Make sure to read the comments as well, as they debunk some of the points of the author

I'm Sebastian, Sociologist and Interaction Designer aiming to bring toge­ther social science and design for inclusive, privacy-focused, and sustainable "human-first" digital strategies. This is my "digital garden" with carefully curated resources. For a more stream-like outlet, see my journal.

My occasionally sent email newsletter has all of the above, and there is of course also an RSS feed or my Mastodon/Fediverse profile.