Guide

How to use APG Patterns Examples for building accessible components.

Using with AI Code Assistants

Each pattern includes an AI-friendly definition file ({pattern}.md) that can be used as context when implementing similar components with AI coding assistants like Claude, Cursor, or GitHub Copilot.

What's included in definition files

ARIA roles, properties, and states requirements
Keyboard interaction specifications
Focus management rules
Test checklist for verification
Example test code snippets

How to use

1. Copy & paste into prompt

Copy the content and include it in your prompt when asking AI to implement a component.

Implement a Tabs component in Angular following this specification:

[paste definition file content here]

2. Add to project context

For Claude Code or Cursor, place definition files in your project for automatic context.

my-project/
├── .ai/
│   └── apg-patterns/
│       ├── tabs.md
│       ├── dialog.md
│       └── accordion.md
└── src/

3. Use for test generation

The test checklist helps AI generate comprehensive accessibility tests.

Generate Jest tests for my Tabs component based on this checklist:

## Test Checklist
- [ ] ArrowRight moves to next tab
- [ ] Selected tab has aria-selected="true"
- [ ] Only selected tab has tabIndex="0"

Available Patterns

All 28 patterns have AI-friendly definition files:

Accordion

Vertically stacked headings that reveal content sections.

Alert

Live region for important, time-sensitive messages.

Alert Dialog

Modal dialog requiring user response with accessible focus management.

Breadcrumb

Navigation trail showing page location in hierarchy.

Toggle Button

Two-state button with aria-pressed for toggle actions.

Carousel

Rotating content with accessible navigation controls.

Checkbox

Single checkbox with optional tri-state support.

Combobox

Text input with dropdown suggestions and autocomplete.

Dialog

Modal window with focus trap and keyboard support.

Disclosure

Simple show/hide toggle for content visibility.

Feed

Scrollable list of articles with accessible navigation.

Grid

Interactive grid with keyboard navigation support.

Landmarks

Page regions for assistive technology navigation.

Link

Accessible links with proper semantics and states.

Listbox

Selection widget with single and multi-select modes.

Menu Button

Button that opens a menu with accessible keyboard support.

Menubar

Horizontal menu with submenus and keyboard navigation.

Meter

Visual indicator of a value within a known range.

Radio Group

Single selection from mutually exclusive options.

Slider

Input for selecting a value from a range.

Spinbutton

Numeric input with increment/decrement controls.

Switch

On/off toggle with aria-checked state.

Table

Data table with proper headers and structure.

Tabs

Layered content sections with roving tabindex.

Toolbar

Container for grouped controls with arrow key navigation.

Tooltip

Contextual popup for element descriptions.

Treegrid

Grid with expandable rows and tree-like hierarchy.

Tree View

Hierarchical list with expandable/collapsible nodes.

Window Splitter

Resizable panes with keyboard-accessible separator.

Direct Links to Pattern Definitions

Copy these URLs directly or fetch them with AI tools:

Contributing

Help us add more AI-friendly definitions! Visit our GitHub repository to contribute.