Design Patterns
Practical UI component implementation patterns that combine HTML, CSS, and accessibility. Each pattern includes a live demo and code example. The English detailed walkthroughs are being prepared — switch to Japanese for the full guides today.
Pattern catalogue
Forms
- Beginner
Text Input (with errors)
Label, help text, validation, and error messaging — the essential text input pattern.
- Beginner
Select
Native single-choice picker with labels, empty state, and optgroup.
- Advanced
Combobox
Search input combined with a list of suggestions and ARIA state management.
- Beginner
Switch
Immediate on/off setting and how it differs from a checkbox.
- Beginner
Checkbox Group
Multi-select using fieldset, legend, and group-level error display.
Disclosure
- Intermediate
Accordion
Stacked expandable sections built on button + aria-expanded.
- Intermediate
Tabs
Sibling panels using role=tablist and arrow-key focus management.
- Intermediate
Tooltip
Hover/focus tooltip that meets WCAG 1.4.13 dismissibility/persistence.
- Beginner
Disclosure
Show/hide a single block with a button — the simplest disclosure.
Navigation
- Beginner
Breadcrumb
Hierarchical location indicator using nav + ordered list + aria-current.
- Intermediate
Pagination
Page-by-page navigation with current-page indication.
- Intermediate
Navigation Bar
Site-wide top navigation, landmark roles, and responsive behavior.
- Intermediate
Side Navigation
Persistent side navigation with section grouping and active state.
Overlay
- Advanced
Modal Dialog
Native <dialog> with focus trap and restoration.
- Intermediate
Toast
Transient notifications announced via aria-live / role=status.
- Advanced
Popover
Anchored floating panel built on the native Popover API.
- Advanced
Drawer
Side-drawer with focus trap, scroll lock, and esc-to-close.
Data Display
- Intermediate
Table
Accessible data table with proper header semantics, scope, and caption.
- Beginner
Card
Reusable content card with semantic heading and link.
- Beginner
Badge
Small label for status/count/category with sufficient contrast.
- Beginner
Progress Bar
Determinate or indeterminate progress with <progress> or role=progressbar.