Posts

a13y
2025

An open-source library that makes web accessibility a TypeScript type constraint, not an option.

a13y - Type-Safe Accessibility
Accessibility
TypeScript
React
Open Source

What is a13y?

a13y is a type-safe accessibility enforcement layer for TypeScript. Unlike linters or best practices, a13y transforms accessibility requirements into TypeScript constraints: if the code is not accessible, it does not compile.

The Problem it Solves

TypeScript prevents type errors at runtime, but it does not prevent accessibility violations. Patterns like buttons without labels, modals without focus traps, or images without alt text compile without errors but break the experience for users with disabilities.

How it Works

a13y makes accessibility attributes mandatory at the type level. If you forget an aria-label or focus management, TypeScript warns you immediately:

1import { AccessibleButton } from '@a13y/react';
2
3// This compiles - accessible!
4<AccessibleButton label="Submit form">
5  Submit
6</AccessibleButton>
7
8// TypeScript Error: Property 'label' is missing
9// Accessibility enforced at compile time!
10<AccessibleButton>
11  Submit
12</AccessibleButton>

Example: Accessible Dialog

a13y components automatically handle focus trap, escape key, and screen reader announcements:

1import { AccessibleDialog } from '@a13y/react';
2
3function MyModal() {
4  return (
5    <AccessibleDialog
6      title="Confirm Action"      // Required for screen readers
7      onClose={handleClose}       // Required for keyboard escape
8      initialFocus={confirmRef}   // Focus management built-in
9    >
10      <p>Are you sure you want to continue?</p>
11      <AccessibleButton ref={confirmRef} label="Confirm">
12        Yes, continue
13      </AccessibleButton>
14    </AccessibleDialog>
15  );
16}

What's Included

  • @a13y/core: Framework-agnostic runtime utilities (announce, focus management, ARIA)
  • @a13y/react: 17+ WCAG 2.1 compliant React components (AccessibleDialog, AccessibleButton, etc.)
  • @a13y/devtools: Runtime validation in development with zero cost in production
  • Keyboard navigation, screen reader compatibility, automatic focus management
  • All components comply with WCAG 2.1 Level AA

Tech Stack

TypeScript, React, pnpm monorepo

Links

License: MIT