Resonance Labs provides production-aligned implementation examples that demonstrate how accessibility criteria translate into real, usable interactions. By bridging theory and practice, it accelerates understanding, supports validation, and promotes scalable adoption of inclusive pattern
This repository contains accessible web UI components with live demos and source code. Each component is self-contained with HTML, CSS, and JS for easy learning and reuse.
| Component | Description | Demo Link |
|---|---|---|
| Accordion | Expandable sections that show and hide content panels | Live Demo |
| Autocomplete | Text input with filtered suggestions as the user types | Live Demo |
| Breadcrumbs | Navigation trail showing the user's location in a hierarchy | Live Demo |
| Button | Clickable element that triggers an action or submits a form | Live Demo |
| Card | Contained surface for related content and actions | Live Demo |
| Card List | A collection of cards displayed as a navigable list | Live Demo |
| Carousel | Rotating set of slides with navigation controls | Live Demo |
| Checkbox | Toggle control for selecting one or more options | Live Demo |
| Combobox | Input with a dropdown list that supports typing and selection | Live Demo |
| Dropdown | Menu that appears on trigger, presenting a list of actions | Live Demo |
| Link | Inline navigation element that takes users to another page or section | Live Demo |
| Mega Navigation | Large multi-column dropdown for complex site navigation | Live Demo |
| Modal | Dialog overlay that requires user interaction before continuing | Live Demo |
| Password Input Toggle | Password field with a show/hide toggle for visibility | Live Demo |
| Progress Bar | Visual indicator showing completion status of a task | Live Demo |
| Radio Button | Selection control for choosing one option from a group | Live Demo |
| Search Input | Text field designed for search queries with clear action | Live Demo |
| Select | Dropdown control for choosing a single value from a list | Live Demo |
| Table | Structured data display organized in rows and columns | Live Demo |
| Tabs | Tabbed interface for switching between content panels | Live Demo |
| Text Input | Single-line field for entering freeform text | Live Demo |
| Toggle Switch | On/off control for binary settings | Live Demo |
| Tooltip | Contextual popup that appears on hover or focus | Live Demo |
| Video | Embedded media player with accessible controls | Live Demo |
- Clone the repository:
git clone https://github.com/Accenture/resonance-labs.git- Start a local HTTP server from the project root:
macOS / Linux (Python is pre-installed):
cd resonance-labs
python3 -m http.server 8080Windows (Python):
cd resonance-labs
python -m http.server 8080Alternative — Node.js (any platform):
npx http-server -p 8080- Open http://localhost:8080 in your browser.
No build tools or frameworks required — everything runs with vanilla HTML, CSS, and JS.
A local server is needed because components are loaded via fetch(), which requires HTTP.
├── index.html # Front page with component grid
├── styles.css # Front page styles
├── assets/
│ ├── style/global.css # Shared styles across all components
│ └── images/ # Logos, icons, and banner artwork
└── components/
└── <component-name>/
├── index.html # Demo page with code preview
├── <name>.html # Component markup fragment
├── <name>.css # Component styles
└── <name>.js # Component behaviour
Created and maintained by Accenture Song