GitHub - simonplmak-cloud/wcag-aaa-web-design: 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.

Resumen Principal

Este contenido describe un Toolkit de Diseño Web WCAG 2.2 AAA innovador, diseñado para facilitar la creación de aplicaciones web empresariales, corporativas y formales con el más alto nivel de accesibilidad. El sistema es agnóstico a frameworks, utilizando HTML, CSS y JavaScript modulares, lo que permite su adaptación a cualquier pila tecnológica. Su principal fortaleza reside en su doble propósito: servir como una guía exhaustiva para desarrolladores humanos y, crucialmente, como una habilidad (skill) para agentes de IA como Manus. Reconociendo la dificultad inherente de alcanzar la conformidad WCAG 2.2 AAA y la tendencia de la IA a generar código inaccesible, este toolkit ofrece un sistema completo y listo para producción, basado en mejores prácticas de Nielsen Norman Group, IBM Carbon Design System y OWASP, garantizando que la web automatizada sea inclusiva por defecto.

Elementos Clave

Doble Propósito: Humanos y Agentes de IA: El toolkit está meticulosamente estructurado para ser utilizado tanto por desarrolladores que buscan una base sólida y bien documentada para la accesibilidad AAA, como por agentes de IA. El archivo SKILL.md proporciona al agente una descripción detallada y un flujo de trabajo de 7 pasos para construir autónomamente aplicaciones web conformes, abordando proactivamente el desafío de la IA que genera código inaccesible.
Cumplimiento Integral WCAG 2.2 AAA: Este sistema se enfoca en el nivel más riguroso de accesibilidad web, WCAG 2.2 Nivel AAA. Incluye un sistema de diseño formal, plantillas HTML/CSS responsivas, patrones ARIA avanzados, una plantilla JavaScript modular, guías de seguridad exhaustivas y scripts de validación robustos para asegurar una auditoría continua y completa de la conformidad, superando los estándares comunes de accesibilidad.
Flujo de Trabajo Estructurado de 7 Pasos: El toolkit organiza el desarrollo en un proceso lineal y detallado, desde la "Fundación & Temática" y la "Configuración de Seguridad" hasta la "Arquitectura de la Información & Navegación", "Contenido & Estructura", "Presentación de Datos & Estados de la Aplicación", "Componentes Interactivos & Formularios", y finalmente, la "Validación & Auditoría". Este enfoque metodológico garantiza que la accesibilidad y la seguridad sean consideradas en cada fase.
Recursos y Guías Exhaustivos: El repositorio incluye directorios clave: scripts/ para herramientas de validación automática (como check_contrast.py y validate_accessibility.sh), references/ con 11 guías detalladas sobre seguridad, patrones UX, ARIA, formularios, y una lista de verificación completa de WCAG, y templates/ que ofrece 11 plantillas listas para producción, incluyendo un boilerplate HTML5 seguro, CSS responsivo y componentes accesibles (encabezado, pie de página, tablas de datos).

Análisis e Implicaciones

Este toolkit establece un nuevo estándar en el desarrollo web al integrar la accesibilidad WCAG 2.2 AAA de forma profunda y dual. Su capacidad para guiar tanto a desarrolladores humanos como a agentes de IA tiene implicaciones significativas para la escalabilidad de la accesibilidad, haciendo posible que incluso las creaciones automatizadas sean inclusivas por defecto.

Contexto Adicional

El proyecto fomenta la colaboración, aceptando contribuciones y solicitudes de extracción, y está licenciado bajo la Licencia MIT, lo que promueve su uso y modificación abiertos.

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.

WCAG 2.2 AAA Web Design Toolkit: An AI Skill for Accessible Enterprise Web Apps

A 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.

This 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.

What is This? A Toolkit for Humans and AI

Achieving 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.

More 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.

Getting Started

For Developers

Clone or download this repository.
Copy the templates/ directory into your project's source folder.
Consult the references/ directory for in-depth guidance on design patterns, security, and accessibility.
Use the scripts/ to validate your work.

For AI Agents

This 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:

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.
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:

"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."
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:
- Copy the templates.
- Consult the design system and security references.
- Implement navigation, content structure, and interactive components.
- Run the validation scripts to audit its own work.

Example Prompt:

"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."

This prompt contains the keywords that will activate the skill and guide the agent through the structured development process.

The 7-Step Workflow for Building Accessible Web Apps

This toolkit is built around a 7-step workflow to guide development from foundation to final audit:

Foundation & Theming: Set up the project and apply the corporate visual style using tokens.css.
Security Configuration: Harden the application using the guidance in security-error-handling.md.
Information Architecture & Navigation: Define the application structure using the patterns in navigation-patterns.md.
Content & Structure: Build pages with semantic HTML and proper heading hierarchy using base.html.
Data Presentation & Application States: Design for data-heavy screens and non-ideal states (loading, empty, error).
Interactive Components & Forms: Build accessible interactive elements with proper security using ARIA patterns.
Validation & Auditing: Use the provided scripts and checklists to confirm compliance.

Resources Included

Directory	Purpose
`scripts/`	Automated validation scripts for contrast checking (`check_contrast.py`) and full WCAG 2.2 AAA audits (`validate_accessibility.sh`).
`references/`	11 in-depth guides covering the entire system: security, UX patterns, ARIA, forms, data presentation, navigation, design system, and a full WCAG checklist.
`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).

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Absortio