{"id":51462020,"url":"https://github.com/d-koppenhagen/practica11y","last_synced_at":"2026-07-06T06:31:18.999Z","repository":{"id":365732775,"uuid":"1273433775","full_name":"d-koppenhagen/practica11y","owner":"d-koppenhagen","description":"A gamified, browser-based learning platform for web accessibility","archived":false,"fork":false,"pushed_at":"2026-06-28T20:22:19.000Z","size":2026,"stargazers_count":2,"open_issues_count":14,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-28T22:17:12.063Z","etag":null,"topics":["a11y","a11y-testing","accessibility","axe-core","barrier-free","barrierefreiheit","html","screenreader","semantic-web","wcag","wcag-aa","wcag-aaa","wcag-contrast","wcag2","wcag22","web"],"latest_commit_sha":null,"homepage":"http://practica11y.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d-koppenhagen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":["d-koppenhagen"]}},"created_at":"2026-06-18T14:15:52.000Z","updated_at":"2026-06-28T20:22:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/d-koppenhagen/practica11y","commit_stats":null,"previous_names":["d-koppenhagen/practica11y"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/d-koppenhagen/practica11y","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-koppenhagen%2Fpractica11y","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-koppenhagen%2Fpractica11y/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-koppenhagen%2Fpractica11y/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-koppenhagen%2Fpractica11y/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d-koppenhagen","download_url":"https://codeload.github.com/d-koppenhagen/practica11y/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-koppenhagen%2Fpractica11y/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35180933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-06T02:00:07.184Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","a11y-testing","accessibility","axe-core","barrier-free","barrierefreiheit","html","screenreader","semantic-web","wcag","wcag-aa","wcag-aaa","wcag-contrast","wcag2","wcag22","web"],"created_at":"2026-07-06T06:31:18.121Z","updated_at":"2026-07-06T06:31:18.992Z","avatar_url":"https://github.com/d-koppenhagen.png","language":"TypeScript","funding_links":["https://github.com/sponsors/d-koppenhagen"],"categories":[],"sub_categories":[],"readme":"# Practica11y\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![Sponsor](https://img.shields.io/badge/Sponsor-♥-ff69b4)](https://github.com/sponsors/d-koppenhagen)\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\u003ca href=\"https://practica11y.dev\"\u003epractica11y.dev\u003c/a\u003e\u003c/strong\u003e\n\u003c/p\u003e\n\nPractica11y is a gamified, browser-based learning platform for web accessibility. Developers solve interactive challenges directly in the browser to learn the practical implementation of accessibility.\n\nThe mission is to raise awareness for web accessibility, sharpen understanding of WCAG guidelines, and turn inclusive development into a natural habit. Whether you're just starting out or deepening your expertise — hands-on practice makes the difference.\n\nThe platform is entirely client-side — no backend required. Progress is stored locally in the browser and can optionally be synced across devices via GitHub sign-in (OAuth Device Flow). Synced progress is stored in a private GitHub Gist owned by the authenticated user.\n\n## Prerequisites\n\n- **Node.js** \u003e= 24\n- **pnpm** \u003e= 11\n- **Git**\n\n## Installation\n\n```bash\npnpm install\n```\n\n## Development\n\n### Start the app\n\n```bash\npnpm nx serve practica11y\n```\n\nThe application will be available at `http://localhost:4200`.\n\n### Run tests\n\n```bash\npnpm nx run-many --target=test\n```\n\n### Run lint\n\n```bash\npnpm nx run-many --target=lint\n```\n\n### Create a build\n\n```bash\npnpm nx build practica11y\n```\n\n### Format code\n\n```bash\npnpm exec prettier --write .\n```\n\n## Project Structure\n\nThe project is organized as an **Nx monorepo**. The application and reusable libraries are clearly separated:\n\n```text\napps/\n  practica11y/              # Angular App (Standalone Components, Signals, Zoneless)\n\nlibs/\n  challenge/\n    models/                 # Challenge data models\n    loader/                 # Challenge loading and frontmatter parsing\n    validators/             # Validation logic (generic + challenge-specific)\n\n  preview/\n    sandbox/                # Sandboxed iframe for live preview\n\n  accessibility/\n    axe/                    # axe-core integration\n    tree/                   # Accessibility tree generator\n    keyboard/               # Keyboard analysis\n    focus/                  # Focus analysis\n\n  features/\n    challenge-shell/        # Main challenge view with analysis pipeline\n    challenge-list/         # Challenge overview list\n    challenge-feedback/     # Feedback panel\n    accessibility-tree/     # Tree visualization\n    virtual-screen-reader/  # Screen reader announcement simulator (Guidepup)\n    color-contrast-checker/ # Color contrast inspection panel (colorjs.io)\n\n  shared/\n    ui/                     # Shared UI components\n    util/                   # Gamification, ProgressStore, LayoutStore, ErrorHandler\n    types/                  # Shared TypeScript types\n```\n\n## Tech Stack\n\n- **Angular** (Standalone Components, Signals, Zoneless Change Detection)\n- **Nx** (Monorepo build system)\n- **Tailwind CSS** 4\n- **Vitest** (Unit and integration tests)\n- **Monaco Editor** (Code editor)\n- **axe-core** + **dom-accessibility-api** (Accessibility analysis)\n- **@guidepup/virtual-screen-reader** (Screen reader announcement simulation)\n- **colorjs.io** (WCAG 2.1 contrast ratio calculation)\n- **TypeScript** (strict mode)\n- **pnpm** (Package manager)\n\n## Contributing\n\nContributions are welcome! Whether it's reporting bugs, suggesting new challenges, improving documentation, or submitting pull requests — every bit helps make accessibility education better.\n\n- **Report a bug or request a feature**: [Open an issue](https://github.com/d-koppenhagen/practica11y/issues)\n- **Submit a pull request**: Fork the repo, create a branch, and open a PR\n- **Suggest a challenge**: Have an idea for a new accessibility challenge? Open an issue and describe it\n\nPlease make sure your contributions follow the existing code style and pass all tests before submitting.\n\n## Sponsoring\n\nIf Practica11y helps you on your accessibility journey, consider supporting its development:\n\n[**Sponsor on GitHub**](https://github.com/sponsors/d-koppenhagen)\n\nEvery contribution — big or small — helps keep this project alive and growing.\n\n## Author\n\n**Danny Koppenhagen**\n\n- Website: [k9n.dev](https://k9n.dev)\n- GitHub: [@d-koppenhagen](https://github.com/d-koppenhagen)\n- Bluesky: [@k9n.dev](https://bsky.app/profile/k9n.dev)\n- LinkedIn: [d-koppenhagen](https://www.linkedin.com/in/d-koppenhagen)\n\n## Deployment\n\nThe application is deployed via **GitHub Pages** and available at [practica11y.dev](https://practica11y.dev).\n\nThe build output (`dist/apps/practica11y/browser`) is published to GitHub Pages. A `CNAME` file in the `public/` folder ensures the custom domain is preserved on each deploy.\n\n## Documentation\n\nArchitecture documentation and further details can be found in the `docs/` folder.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd-koppenhagen%2Fpractica11y","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd-koppenhagen%2Fpractica11y","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd-koppenhagen%2Fpractica11y/lists"}