WCAG Aria patterns MCP

WAI-ARIA: Guia de Práticas de Autoria

Este repositório mantém o Guia de Práticas de Autoria WAI-ARIA (APG).

• Publicado em: w3.org/wai/aria/apg
• Desenvolvido pela Força-Tarefa de Práticas de Autoria do Grupo de Trabalho ARIA
• Contato da equipe: Daniel Montalvo

Por favor, não conceda acesso de commit a este repositório sem coordenação.

Como o trabalho é organizado

• O trabalho é planejado e priorizado em nossos marcos. Cada marco corresponde a um rascunho de trabalho ou versão publicada em w3.org.
• O trabalho é organizado por tópico em nossos projetos. Cada projeto corresponde a um tipo de padrão de design ou seção de orientação.
• O escopo do trabalho e o roteiro são descritos no wiki do projeto.

Servidor MCP (Integração com IA e Chatbots)

O repositório inclui um servidor Model Context Protocol (MCP) que expõe a documentação de padrões WAI-ARIA como recursos sob demanda. Agentes de IA e chatbots podem buscar especificações de padrões (interação por teclado, papéis ARIA, estados e propriedades) ao ajudar desenvolvedores a criar componentes acessíveis.

Pré-requisitos: Node.js e npm install.

Executar a partir do repositório clonado:

npm run mcp

Uso com Cursor: Adicione às suas configurações do MCP (por exemplo, nas configurações do Cursor ou .cursor/mcp.json):

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

Substitua /path/to/aria-practices pelo caminho real do seu repositório clonado. A IA pode então buscar especificações de padrões por meio de recursos como apg://pattern/accordion ou apg://pattern/combobox.

Para outros clientes compatíveis com MCP, consulte a documentação do Model Context Protocol.

Habilidade do Cursor: Copie skill/wai-aria-apg para .cursor/skills/ no seu projeto para que a IA use os padrões APG ao criar componentes acessíveis. Veja skill/README.md.

Contribuindo

1. Comente em uma issue existente ou abra uma nova issue, expressando sua disposição para ajudar e resumindo brevemente a natureza da sua resolução proposta.
2. Um editor confirmará que não há planos conflitantes e, se necessário, fornecerá orientação.
3. Certifique-se de ter os linters instalados e configurados conforme descrito abaixo.
4. Leia nossa página do wiki sobre envio de pull requests.
5. Faça um trabalho fabuloso e envie um pull request.

Nota: Sinta-se à vontade para fazer perguntas por meio de uma issue ou na lista de discussão da Força-Tarefa de Práticas de Autoria.

Conformidade de código

Este repositório utiliza ferramentas de linting para análise estática de código e garantir qualidade consistente de código em HTML, CSS e JavaScript. Cada ferramenta de linting e os respectivos padrões de código estão documentados abaixo e no guia de código.

Pull requests que contenham erros de linting não serão mesclados até que os erros sejam resolvidos. Para facilitar, você pode instalar e executar as ferramentas localmente antes de enviar o código. Observe também que as ferramentas para CSS e JavaScript corrigirão automaticamente muitos problemas se você as tiver instaladas localmente. Para instalar essas ferramentas:

1. Certifique-se de ter o Node.js instalado, que vem com o gerenciador de pacotes do Node (npm)
2. Abra o diretório que contém seu repositório aria-practices em um terminal
3. Execute npm install

O validador de HTML também requer a instalação de um JDK para ser executado. Se você ainda não tiver um JDK instalado, baixe o JDK mais recente da Oracle.

Também é altamente recomendável usar um editor de código que suporte essas ferramentas e o EditorConfig.

HTML

O HTML é validado pelo Validador NU HTML.

Se ocorrer um aviso ou erro porque um recurso futuro de ARIA ainda não foi implementado, ele será adicionado ao arquivo .vnurc, permitindo que o erro seja ignorado.

Execute localmente:

npm run lint:html

CSS

O CSS é validado pelo stylelint usando o conjunto de regras stylelint-config-standard.

NOTA: no commit, o stylelint será executado nos arquivos CSS preparados. Se forem encontrados erros que possam ser corrigidos automaticamente com a flag --fix, eles serão corrigidos e as alterações serão commitadas.

Execute localmente:

npm run lint:css

JavaScript

O JavaScript é validado pelo ESLint, usando nossa própria configuração.

NOTA: no commit, o eslint será executado nos arquivos CSS preparados. Se forem encontrados erros que possam ser corrigidos automaticamente com a flag --fix, eles serão corrigidos e as alterações serão commitadas.

Execute localmente:

npm run lint:js

Teste e corrija seu código

1. Abra uma janela de terminal no diretório que contém o repositório aria-practices
2. O repositório tem um script definido que testará todo o JavaScript no diretório de exemplos. Para executá-lo, execute o comando npm test. Nota: isso pode levar alguns minutos e abrirá várias janelas do navegador durante o teste que ganharão foco.
3. Muitos erros podem ser corrigidos automaticamente com o comando npm run fix.
4. Após executar a correção, teste novamente para ver o que você precisa corrigir manualmente.

Quando o linter encontra erros, ele os relata no console.

O relatório de erros conterá o nome do arquivo e o número da linha, e indicará o caractere ou o local na linha que causou a violação de estilo. Para corrigir um erro, atenda à alteração indicada pela violação.

Por exemplo, aqui está um erro para um estilo de nome de variável inválido. As variáveis devem seguir a convenção 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

O erro ocorreu em examples/slider/js/text-slider.js, na linha 19, e o caractere ofensor é indicado pelo número 8 após os dois pontos. Altere a variável value_nodes para valueNodes no seu arquivo de origem para eliminar esse erro.

Para ver a lista completa de regras de estilo aplicadas pelo ESLint, revise o arquivo .eslintrc.json na raiz do projeto.

Documentação editorial

Consulte as Diretrizes de Estilo Editorial do APG para obter informações sobre como escrever prosa para o APG.

O ReadMe da especificação ARIA contém orientação editorial adicional útil.