Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Welcome to the Accessible Design System

A comprehensive library of accessible web components built following WCAG 2.2 Level AA guidelines. Every component includes detailed documentation, code examples, and accessibility testing instructions.

About This Design System

This design system provides ready-to-use, accessible components for building inclusive web applications. Each component has been carefully crafted to ensure:

  • WCAG 2.2 Level AA Compliance: All components meet or exceed the latest web accessibility standards
  • Keyboard Navigation: Full keyboard support with visible focus indicators
  • Screen Reader Compatibility: Proper ARIA attributes and semantic HTML
  • Touch-Friendly: Minimum 44x44px touch targets for mobile devices
  • High Contrast Mode Support: Components remain visible in Windows High Contrast Mode
  • Clear Documentation: HTML, CSS, and accessibility guidelines for each component

How to Use This Design System

1. Browse Components

Use the sidebar navigation to explore available components. Components are organized into categories:

  • Foundations: Colors, typography, and spacing systems
  • Components: Buttons, forms, links, tables, cards, and alerts

2. Copy Code Examples

Each component page includes:

  • Live Examples: See how the component looks and behaves
  • HTML Code: Copy the semantic markup with a single click
  • CSS Code: Get the complete styles including all states
  • JavaScript (when needed): Copy interactive functionality

Look for the "Copy code" button next to each code block.

3. Follow Accessibility Guidelines

Every component includes an "Accessibility Guidelines" section with:

  • Key Requirements: Essential accessibility features to implement
  • Custom Implementation Notes: Best practices and common pitfalls
  • How to Test: Step-by-step testing instructions for screen readers, keyboard, and visual checks
  • WCAG References: Links to relevant success criteria

4. Search for Components

Use the search bar at the top of the page to quickly find components by name, description, or keywords. Try searching for:

  • "button" - Find all button-related components
  • "form" - See all form input types
  • "accessible" - View components with specific accessibility features

Getting Started

Ready to build accessible interfaces? Start with these popular components:

Buttons

Primary, secondary, icon, and disabled button components

Forms

Text inputs, checkboxes, radio buttons, and select dropdowns

Links

Skip links, inline links, and navigation patterns

Colors

Accessible color palette with proper contrast ratios

Tables

Accessible data tables with proper headers and scope

Alerts

Success, warning, and error alert messages

Design Principles

Inclusive by Default

Every component is built with accessibility in mind from the start, not added as an afterthought.

Standards-Based

Follows WCAG 2.2 Level AA guidelines and uses semantic HTML with proper ARIA attributes.

Device Agnostic

Works seamlessly with keyboard, mouse, touch, and assistive technologies.

Well Documented

Each component includes implementation details, testing instructions, and WCAG references.

Copy and Paste

Ready-to-use code examples that you can copy directly into your projects.

Customizable

Built with CSS variables for easy theming while maintaining accessibility.

Who Is This For?

  • Developers: Get production-ready accessible components with complete code examples
  • Designers: Understand accessibility requirements when creating interface designs
  • QA Testers: Learn how to test components for accessibility compliance
  • Product Managers: Ensure your products meet accessibility standards
  • Students: Learn web accessibility best practices with real-world examples

Important Notes

CSS Class Naming Convention

All custom CSS classes use the ads- prefix to avoid conflicts with your existing styles. For example: ads-button-primary, ads-input, ads-card.

CSS Variables

Colors, fonts, and spacing use CSS variables for easy customization. All variables are defined in the :root selector. Examples: --ads-primary-color, --ads-font-family.

Minimum Font Size

All text uses a minimum font size of 16px to ensure readability and prevent mobile browsers from zooming in on form inputs.

High Contrast Mode

Components use explicit borders (e.g., border: 2px solid) instead of border: none to ensure visibility in Windows High Contrast Mode.

Ready to Get Started?

Explore components in the sidebar or use the search bar to find what you need.

Browse Components