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 32 patterns have AI-friendly definition files:

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Alert

An element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.

Alert Dialog

A modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.

Breadcrumb

A list of links to the parent pages of the current page in hierarchical order.

Button

An element with role="button" that enables users to trigger an action. Demonstrates why native <button> is recommended.

Toggle Button

A two-state button that can be either pressed or not pressed, using aria-pressed to communicate state.

Carousel

Presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.

Checkbox

Supports dual-state (checked/unchecked) and tri-state (checked/unchecked/partially checked) checkboxes.

Combobox

An input widget with an associated popup that enables users to select a value from a collection.

Dialog (Modal)

A window overlaid on the primary window, rendering the content underneath inert.

Disclosure

A button that controls the visibility of a section of content.

Feed

A section of a page that automatically loads new sections of content as the user scrolls.

Grid

A container that enables users to navigate the information or interactive elements using directional navigation keys.

Landmarks

A set of eight roles that identify the major sections of a page.

Link

A widget that provides an interactive reference to a resource.

Listbox

A widget that allows the user to select one or more items from a list of choices.

Menubar

A horizontal menu bar with dropdown menus, submenus, checkbox items, and radio groups for application-style navigation.

Menu Button

A button that opens a menu of actions or options.

Meter

A graphical display of a numeric value that varies within a defined range.

Radio Group

A set of checkable buttons, known as radio buttons, where only one can be checked at a time.

Slider

An input where the user selects a value from within a given range.

Slider (Multi-Thumb)

A slider with two thumbs that allows users to select a range of values within a given range.

Spinbutton

An input widget for selecting from a range of discrete values, typically with increment/decrement buttons.

Switch

A type of checkbox that represents on/off values, as opposed to checked/unchecked.

Table

A static tabular structure containing one or more rows that each contain one or more cells.

Tabs

A set of layered sections of content, known as tab panels, that display one panel at a time.

Toolbar

A container for grouping a set of controls, such as buttons, toggle buttons, or checkboxes.

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Tree View

A widget that presents a hierarchical list with nested groups that can be collapsed and expanded.

Treegrid

A widget that presents a hierarchical data grid consisting of tabular information that is editable or interactive.

Data Grid

An advanced grid for displaying and manipulating tabular data with sorting, filtering, and row selection.

Window Splitter

A moveable separator between two sections, or panes, that enables users to change the relative size of the panes.

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.