{"id":50484809,"url":"https://github.com/simonplmak-cloud/wcag-aaa-web-design","last_synced_at":"2026-06-01T21:02:20.882Z","repository":{"id":338624106,"uuid":"1158273307","full_name":"simonplmak-cloud/wcag-aaa-web-design","owner":"simonplmak-cloud","description":"An open-source WCAG 2.2 AAA accessible design system and AI agent skill for building enterprise web applications. Includes a full component library, templates, and validation scripts for corporate/formal web apps.","archived":false,"fork":false,"pushed_at":"2026-02-15T15:10:40.000Z","size":4989,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-15T20:24:56.861Z","etag":null,"topics":["a11y","accessibility","aria","corporate","css-custom-properties","design-system","enterprise","frontend","owasp","responsive-design","wcag","wcag-aaa","wcag22","web-accessibility"],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/simonplmak-cloud.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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":null,"dco":null,"cla":null}},"created_at":"2026-02-15T04:30:43.000Z","updated_at":"2026-02-15T16:31:18.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/simonplmak-cloud/wcag-aaa-web-design","commit_stats":null,"previous_names":["simonplmak-cloud/wcag-aaa-web-design"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/simonplmak-cloud/wcag-aaa-web-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonplmak-cloud%2Fwcag-aaa-web-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonplmak-cloud%2Fwcag-aaa-web-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonplmak-cloud%2Fwcag-aaa-web-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonplmak-cloud%2Fwcag-aaa-web-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonplmak-cloud","download_url":"https://codeload.github.com/simonplmak-cloud/wcag-aaa-web-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonplmak-cloud%2Fwcag-aaa-web-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33793044,"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-06-01T02:00:06.963Z","response_time":115,"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","accessibility","aria","corporate","css-custom-properties","design-system","enterprise","frontend","owasp","responsive-design","wcag","wcag-aaa","wcag22","web-accessibility"],"created_at":"2026-06-01T21:02:20.047Z","updated_at":"2026-06-01T21:02:20.868Z","avatar_url":"https://github.com/simonplmak-cloud.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e The content of this `README.md` is written for a human audience on GitHub. The `SKILL.md` file contains the instructions for the Manus agent.\n\n# WCAG 2.2 AAA Web Design Toolkit: An AI Skill for Accessible Enterprise Web Apps\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![WCAG 2.2 AAA Compliant](https://img.shields.io/badge/WCAG%202.2-AAA%20Compliant-brightgreen.svg)](https://www.w3.org/TR/WCAG22/)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n\nA framework-agnostic toolkit and AI agent skill for building enterprise-grade, corporate/formal web applications that meet the highest level of web accessibility, **WCAG 2.2 Level AAA**.\n\nThis repository provides a comprehensive, production-ready system grounded in industry best practices from Nielsen Norman Group, IBM Carbon Design System, and OWASP. It includes a formal design system, responsive HTML/CSS templates, ARIA patterns, a modular JavaScript template, security guidance, and robust validation scripts.\n\n![Social Preview Image](https://raw.githubusercontent.com/simonplmak-cloud/wcag-aaa-web-design/main/social-preview.png)\n\n## What is This? A Toolkit for Humans and AI\n\nAchieving WCAG 2.2 AAA compliance is notoriously difficult. This toolkit aims to provide a complete, practical, and well-documented starting point for developers tasked with building highly accessible, corporate web applications. It is designed to be framework-agnostic, using standard HTML, CSS custom properties, and modular JavaScript that can be adapted to any technology stack.\n\nMore importantly, this is also an **AI agent skill**. As AI coding assistants increasingly build our websites, they often produce inaccessible code. This toolkit is structured to be used by an AI agent to autonomously generate a fully compliant website, ensuring the automated web is inclusive by default.\n\n## Getting Started\n\n### For Developers\n\n1.  **Clone or download** this repository.\n2.  **Copy the `templates/` directory** into your project's source folder.\n3.  **Consult the `references/` directory** for in-depth guidance on design patterns, security, and accessibility.\n4.  **Use the `scripts/`** to validate your work.\n\n### For AI Agents\n\nThis repository is designed to be used as a skill by an AI agent like Manus. The `SKILL.md` file provides the agent with a 7-step workflow to autonomously build a compliant web application. To use this as an AI skill, follow these steps:\n\n1.  **Load the Skill**: Make the `wcag-aaa-web-design` directory available to your AI agent. In Manus, this is done by placing it in the `/home/ubuntu/skills/` directory.\n\n2.  **Provide a High-Level Prompt**: Give the agent a high-level goal that triggers the skill's description. The skill's `description` in `SKILL.md` is:\n\n    \u003e \"Create corporate/formal, device-sensitive web applications compliant with WCAG 2.2 AAA standards. Use for building highly accessible websites and web apps that require strict adherence to accessibility, a formal tone, and responsive design for at least three device sizes. This skill provides a complete workflow, design system, component templates, and validation scripts.\"\n\n3.  **Agent Execution**: The agent will read `SKILL.md` and follow the 7-step workflow, using the provided templates and references to build the application. The agent will:\n    -   Copy the templates.\n    -   Consult the design system and security references.\n    -   Implement navigation, content structure, and interactive components.\n    -   Run the validation scripts to audit its own work.\n\n**Example Prompt:**\n\n\u003e \"Build a 3-page corporate website for a financial consulting firm. The site must be highly accessible and meet WCAG 2.2 AAA standards. It needs a formal, professional design and must be responsive for mobile, tablet, and desktop. The pages are Home, About Us, and Contact Us.\"\n\nThis prompt contains the keywords that will activate the skill and guide the agent through the structured development process.\n\n## The 7-Step Workflow for Building Accessible Web Apps\n\nThis toolkit is built around a 7-step workflow to guide development from foundation to final audit:\n\n1.  **Foundation \u0026 Theming**: Set up the project and apply the corporate visual style using `tokens.css`.\n2.  **Security Configuration**: Harden the application using the guidance in `security-error-handling.md`.\n3.  **Information Architecture \u0026 Navigation**: Define the application structure using the patterns in `navigation-patterns.md`.\n4.  **Content \u0026 Structure**: Build pages with semantic HTML and proper heading hierarchy using `base.html`.\n5.  **Data Presentation \u0026 Application States**: Design for data-heavy screens and non-ideal states (loading, empty, error).\n6.  **Interactive Components \u0026 Forms**: Build accessible interactive elements with proper security using ARIA patterns.\n7.  **Validation \u0026 Auditing**: Use the provided scripts and checklists to confirm compliance.\n\n## Resources Included\n\n| Directory | Purpose |\n|---|---|\n| `scripts/` | Automated validation scripts for contrast checking (`check_contrast.py`) and full WCAG 2.2 AAA audits (`validate_accessibility.sh`). |\n| `references/` | 11 in-depth guides covering the entire system: security, UX patterns, ARIA, forms, data presentation, navigation, design system, and a full WCAG checklist. |\n| `templates/` | 11 production-ready, framework-agnostic templates: a secure HTML5 boilerplate, modular JavaScript, responsive CSS, design tokens, and accessible components (header, footer, data table, sidebar, empty states). |\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a pull request or open an issue.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonplmak-cloud%2Fwcag-aaa-web-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonplmak-cloud%2Fwcag-aaa-web-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonplmak-cloud%2Fwcag-aaa-web-design/lists"}