Waria

Accessible by default, performant by design

A framework-agnostic web components library with built-in WCAG 2.1 AA compliance

What is W-a11y?

A collection of accessible web components that handle all the complex ARIA patterns for you. Just use the components — keyboard navigation, focus management, and screen reader support work automatically.

❌ The Hard Way (manual ARIA)

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="title"
  aria-describedby="desc"
  tabindex="-1"
>
  <h2 id="title">Modal</h2>
  <p id="desc">Content here</p>
  <!-- + focus trap, escape key, click outside... -->
</div>

✅ The Waria Way (just works!)

<w-dialog>
  <w-slot trigger><button>Open</button></w-slot>
  <w-slot body>
    <div>
      <h2>Modal</h2>
      <p>Content here</p>
    </div>
  </w-slot>
</w-dialog>

Quick Start

Add Waria to your project in seconds:

📦 NPM

npm install @dufeut/waria

⚡ Initialize

import { App } from "@dufeut/waria";
App.start();

Why Waria?

♿

Accessible by Default

WCAG 2.1 AA compliant. Keyboard navigation, focus management, and ARIA attributes built-in.

🚀

Zero Dependencies

Native web components. Works with React, Vue, Svelte, or vanilla JS.

🎯

Slot-Based Composition

Bring your own markup. Style however you want with your existing CSS.

29 Web Components

Everything you need for accessible interfaces:

w-accordionw-dialogw-menuw-tabsw-tooltipw-popoverw-selectw-switchw-navw-treew-carouselw-toast

View all components →