WCAG Aria patterns MCP

WAI-ARIA: Guía de Prácticas de Autoría

Este repositorio mantiene la Guía de Prácticas de Autoría de WAI-ARIA (APG).

• Publicado en: w3.org/wai/aria/apg
• Desarrollado por el Authoring Practices Task Force del ARIA Working Group
• Contacto del personal: Daniel Montalvo

Por favor, no proporcione acceso de confirmación a este repositorio sin coordinación.

Cómo se organiza el trabajo

• El trabajo se planifica y prioriza en nuestros hitos. Cada hito corresponde a un borrador de trabajo o una versión publicada en w3.org.
• El trabajo se organiza por tema en nuestros proyectos. Cada proyecto corresponde a un tipo de patrón de diseño o sección de guía.
• El alcance del trabajo y la hoja de ruta se describen en la wiki del proyecto.

Servidor MCP (Integración con IA y Chatbots)

El repositorio incluye un servidor Model Context Protocol (MCP) que expone la documentación de patrones WAI-ARIA como recursos bajo demanda. Los agentes de IA y los chatbots pueden obtener especificaciones de patrones (interacción con teclado, roles ARIA, estados y propiedades) al ayudar a los desarrolladores a crear componentes accesibles.

Requisitos previos: Node.js y npm install.

Ejecutar desde el repositorio clonado:

npm run mcp

Uso con Cursor: Agregue a su configuración de MCP (por ejemplo, en la configuración de Cursor o .cursor/mcp.json):

{
  "mcpServers": {
    "wai-aria-apg": {
      "command": "node",
      "args": ["/path/to/aria-practices/mcp-server/index.mjs"]
    }
  }
}

Reemplace /path/to/aria-practices con la ruta real a su repositorio clonado. La IA puede entonces obtener especificaciones de patrones a través de recursos como apg://pattern/accordion o apg://pattern/combobox.

Para otros clientes compatibles con MCP, consulte la documentación del Model Context Protocol.

Habilidad de Cursor: Copie skill/wai-aria-apg a .cursor/skills/ en su proyecto para que la IA use patrones APG al construir componentes accesibles. Consulte skill/README.md.

Contribuciones

1. Comente en un problema existente o cree un nuevo problema, expresando su disposición a ayudar y resumiendo brevemente la naturaleza de su resolución propuesta.
2. Un editor confirmará que no hay planes conflictivos y, si es necesario, proporcionará orientación.
3. Asegúrese de tener los linters instalados y configurados como se describe a continuación.
4. Lea nuestra página de wiki sobre cómo enviar solicitudes de extracción.
5. Haga un trabajo fabuloso y envíe una solicitud de extracción.

Nota: No dude en hacer preguntas a través de un problema o en la lista de correo del Authoring Practices Task Force.

Conformidad del código

Este repositorio utiliza herramientas de linting para realizar análisis estático de código y garantizar una calidad de código consistente en HTML, CSS y JavaScript. Cada herramienta de linting y sus respectivos estándares de código se documentan a continuación y en la guía de código.

Las solicitudes de extracción que contengan errores de linting no se fusionarán hasta que se resuelvan los errores. Para facilitar esto, puede instalar y ejecutar las herramientas localmente antes de enviar código. También tenga en cuenta que las herramientas para CSS y JavaScript corregirán automáticamente muchos problemas si las tiene instaladas localmente. Para instalar estas herramientas:

1. Asegúrese de tener Node.js instalado, que viene con node package manager (npm)
2. Abra el directorio que contiene su repositorio aria-practices en una terminal
3. Ejecute npm install

El validador HTML también requiere la instalación de un JDK para ejecutarse. Si aún no tiene un JDK instalado, descargue el último JDK de Oracle.

También se recomienda encarecidamente que utilice un editor de código que admita estas herramientas y EditorConfig.

HTML

HTML se valida contra el validador NU HTML. Si se produce una advertencia o error porque una característica futura de ARIA aún no está implementada, se agregará al archivo .vnurc, lo que permitirá que el error pase.

Ejecutar localmente:

npm run lint:html

CSS

CSS se valida mediante stylelint usando el conjunto de reglas stylelint-config-standard.

NOTA: al confirmar, stylelint se ejecutará en los archivos CSS preparados. Si se encuentran errores que se pueden corregir automáticamente con la bandera --fix, se corregirán y los cambios se confirmarán.

Ejecutar localmente:

npm run lint:css

JavaScript

JavaScript se valida mediante ESLint, usando nuestra propia configuración.

NOTA: al confirmar, eslint se ejecutará en los archivos CSS preparados. Si se encuentran errores que se pueden corregir automáticamente con la bandera --fix, se corregirán y los cambios se confirmarán.

Ejecutar localmente:

npm run lint:js

Pruebe y corrija su código

1. Abra una ventana de terminal en el directorio que contiene el repositorio aria-practices
2. El repositorio tiene un script definido que probará todo el JavaScript en el directorio de ejemplos. Para ejecutarlo, ejecute el comando npm test. Nota: esto puede tardar unos minutos y abrirá varias ventanas del navegador durante la prueba que ganarán el foco.
3. Muchos errores se pueden corregir automáticamente con el comando npm run fix.
4. Después de ejecutar la corrección, pruebe nuevamente para ver qué necesita corregir manualmente.

Cuando el linter encuentra errores, los informa en la consola. El informe de errores contendrá el nombre del archivo y el número de línea, e indicará el carácter o lugar en la línea que provocó la violación de estilo. Para corregir un error, satisfaga el cambio que indica la violación.

Por ejemplo, aquí hay un error por un estilo de nombre de variable no válido. Las variables deben seguir una convención camelCase.

/Users/user1/Documents/github/aria-practices/examples/slider/js/text-slider.js
  19:8  error  Identifier 'value_nodes' is not in camel case  camelcase

El error ocurrió en examples/slider/js/text-slider.js, en la línea 19 y el carácter infractor se indica con el número 8 después de los dos puntos. Cambie la variable value_nodes a valueNodes en su archivo fuente para eliminar este error.

Para ver la lista completa de reglas de estilo aplicadas por ESLint, revise el archivo .eslintrc.json en la raíz del proyecto.

Documentación editorial

Consulte las Pautas de estilo editorial de APG para obtener información sobre cómo escribir prosa para la APG. El ReadMe para la especificación ARIA contiene orientación editorial adicional útil.