dally.md, design accessibility

Deixe seu Figma acessível

Acessibilidade antes do primeiro pixel

O DA11Y.md é um protocolo para o agente de inteligência artificial (IA) do Figma desenhar, analisar e anotar interfaces acessíveis. Ele leva ao arquivo de design as mesmas regras que o A11Y.md (abre em nova aba) leva ao código. Assim a interface já nasce acessível no protótipo, e quem desenvolve recebe no arquivo o que o leitor de tela vai ler.

  • 0.2.0, em teste
  • 27 guias de componente
  • português e inglês
  • 4 testes de campo

Como começar

  1. Abra a skill na Comunidade do Figma e salve na sua conta.

    Abrir a skill na Comunidade do Figma (abre em nova aba)

  2. No chat do agente do Figma, digite /da11y e escreva o pedido. Por exemplo:

    • Para criar/da11y crie este componente
    • Para analisar/da11y analise esta tela
    • Para o handoff de acessibilidade/da11y prepare o handoff de acessibilidade desta tela

Também dá para usar sem instalar nada, ou deixar a regra na sua biblioteca. Veja as outras formas de usar.

O que pedir ao agente

O protocolo atende três pedidos. Cada um grava uma coisa diferente no arquivo, e o que o agente mediu não se mistura com o que ele propõe.

Criar

Você pede

“/da11y crie este componente”

O agente faz

  1. Procura o que a biblioteca já tem.

  2. Desenha com ela, sem trocar token nem recriar componente.

  3. Entrega a tela e desenha a leitura numa página do arquivo, em cards numerados.

No arquivo fica

Proposta

3 · botão

🔊 botão "Continuar"

Analisar

Você pede

“/da11y analise esta tela”

O agente faz

  1. Mede contraste, área de toque, estados e texto, com código.

  2. Anota na tela só o que você corrige neste arquivo, com o número do achado.

  3. Desenha o relatório numa página do arquivo, com a tela e os achados numerados. A leitura fica nele, como rascunho.

No arquivo fica

Accessibility

CONDICIONAL

Perguntas abertas — 1

Leituras — não anotadas

Corrigir aqui — 1

Erros do design system — 0

Não lidos — 2

Corrigir aqui

🟠 HIGH · Aqui: borda do campo E-mail com a cor trocada

Handoff de acessibilidade

Você pede

“/da11y prepare o handoff de acessibilidade desta tela”

O agente faz

  1. Lê cada elemento em que o leitor de tela para.

  2. Desenha numa página do arquivo a ordem de leitura, em cards numerados ao lado de uma cópia da tela, numa lista fechada. Também mede as áreas de toque e mostra os estados de foco da biblioteca.

  3. Você confere, edita se quiser e confirma no card com ✓ e o seu nome.

No arquivo fica

Proposta

5–7 · status da solicitação

5) 🔊 título "Status da solicitação"

6) 🔊 "Número do protocolo, 48213"

7) 🔊 "Situação, Em análise"

✓ Marina

Nos três pedidos, a tela recebe a anotação com o status, as contagens do que há para fazer e onde está o relatório completo. Ilustração feita para esta página.

Como as anotações aparecem no arquivo

No Figma, cada anotação fica presa ao elemento que ela comenta. As letras ligam cada elemento da tela à anotação dele.

Ilustração feita para esta página.

As anotações, como o Figma mostra

  • Proposta

    3 · aviso

    📢 "Aviso salvo"

    🔊 botão "Fechar aviso"

    A leitura que o agente propõe para o elemento, ou uma pergunta sobre ele.

    3 ·
    a ordem de leitura
    📢
    o que o leitor de tela anuncia
    🔊
    o que ele lê, uma parada por linha

    Você confirma com ✓ e o seu nome. No agente do Figma, ela fica na página de handoff.

  • Corrigir aqui

    🟠 HIGH · Aqui: borda do campo E-mail com a cor trocada

    Um defeito de uso, como uma cor trocada.

    🟠 HIGH
    a gravidade, em cor e em texto
    Aqui:
    o defeito é deste arquivo

    Você corrige, ou autoriza o agente a corrigir. Ela fica na tela.

  • Erro do design system

    🟠 HIGH · Biblioteca: texto do botão abaixo do contraste mínimo

    Um defeito do componente, do token ou do estilo.

    🟠 HIGH
    a gravidade
    Biblioteca:
    o defeito é da biblioteca, não deste arquivo

    Quem cuida da biblioteca corrige lá. No agente do Figma, ela fica na página de relatório.

  • Accessibility

    CONDICIONAL

    Perguntas abertas — 0

    Leituras a confirmar — 1

    Corrigir aqui — 1

    Erros do design system — 1

    Não lidos — 0

    O status da tela e quantas anotações de cada tipo ela tem.

    CONDICIONAL
    a tela só é aprovada depois que alguém que não desenhou confere

    Ela fica presa à tela inteira.

Outras formas de usar

Link no pedido

Para um pedido de cada vez, sem instalar nada.

  1. Escreva o pedido como sempre e acrescente o link do protocolo. Por exemplo:

    O pedido
    Para criar 
    Crie este componente seguindo estritamente as regras de acessibilidade do arquivo https://raw.githubusercontent.com/fecarrico/DA11Y.md/main/docs/pt-BR/DA11Y.md
    Para analisar 
    Analise esta tela seguindo estritamente as regras de acessibilidade do arquivo https://raw.githubusercontent.com/fecarrico/DA11Y.md/main/docs/pt-BR/DA11Y.md
    Para o handoff de acessibilidade 
    Prepare o handoff de acessibilidade desta tela seguindo estritamente as regras de acessibilidade do arquivo https://raw.githubusercontent.com/fecarrico/DA11Y.md/main/docs/pt-BR/DA11Y.md

  2. O agente lê o protocolo, aplica a sua biblioteca primeiro e grava no arquivo o resultado do pedido: a tela desenhada com a leitura, os erros da análise ou o handoff de acessibilidade para quem desenvolve.

  3. Quando ele apontar um contraste reprovado, confira o mesmo par na checagem de contraste do Figma, no seletor de cor. Não use a correção automática, porque ela troca a cor que veio da biblioteca.

Skill à mão

Para criar a skill na sua conta, em vez de salvar a da Comunidade. Funciona em todos os planos.

  1. No chat do agente, clique na caixa do pedido e escolha Skills › Add skill › Start from scratch. Preencha os três campos com estes textos e clique em Add.

    Nome 
    da11y
    Descrição 
    Obrigatória para desenhar, editar, analisar ou revisar a acessibilidade de telas, fluxos ou componentes no Figma. Aplica o protocolo DA11Y.md, lido do GitHub, mede contraste, alvos e texto com código, e só termina com a evidência gravada no arquivo: as anotações e as páginas de relatório e de handoff.
    Instruções 
    Ao desenhar ou avaliar jornadas, telas ou componentes, siga estritamente as regras de acessibilidade do arquivo https://raw.githubusercontent.com/fecarrico/DA11Y.md/main/docs/pt-BR/DA11Y.md

  2. Depois, digite /da11y e o pedido, como na skill da Comunidade. A skill fica disponível em todos os seus arquivos.

Na biblioteca

Para a regra entrar sozinha nos desenhos feitos com a sua biblioteca.

  1. Baixe a guideline pronta, um arquivo Markdown com a regra.

    Guideline pronta (abre em nova aba)

  2. Na biblioteca, abra Library › Manage guidelines e envie o arquivo.

  3. Quando alguém pedir ao agente um desenho com essa biblioteca, a regra entra sozinha.

As guidelines de biblioteca são um recurso dos planos Professional, Organization e Enterprise, e valem para pedidos de desenho com a biblioteca. Para analisar uma tela que já existe, use o chat ou a skill.

Por MCP

Para usar outro agente de inteligência artificial, como o Claude ou o Cursor, sem os créditos do agente do Figma. Ele se liga ao arquivo por um servidor de Model Context Protocol (MCP).

  1. No Figma, abra o menu da conta e vá em Settings › Security › Personal access tokens. Crie um token com leitura do conteúdo dos arquivos, das versões e das variáveis, e com leitura e escrita dos comentários.

  2. Ponha no seu agente o servidor figma-console-mcp. No Claude Code, rode este comando com o seu token no lugar de figd_SEU_TOKEN:

    Comando 
    claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_SEU_TOKEN -- npx -y figma-console-mcp@latest

    No Claude Desktop e no Cursor, o mesmo servidor entra no arquivo de configuração, como mostra o repositório do figma-console-mcp (abre em nova aba).

  3. No aplicativo do Figma para computador, abra o arquivo e importe o plugin da ponte em Plugins › Development › Import plugin from manifest, com o arquivo ~/.figma-console-mcp/plugin/manifest.json. Depois, rode o plugin no arquivo.

  4. Selecione a tela no Figma e peça ao agente, com o link do protocolo:

    Pedido 
    Analise a tela selecionada no Figma seguindo estritamente as regras de acessibilidade do arquivo https://raw.githubusercontent.com/fecarrico/DA11Y.md/main/docs/pt-BR/DA11Y.md

    O agente lê o protocolo e, pelo plugin, mede, anota e desenha no arquivo as páginas de relatório e de handoff.

O agente roda fora do Figma, com a assinatura de inteligência artificial que você já usa. A ponte precisa do aplicativo do Figma para computador e não roda no navegador. O token abre todos os seus arquivos para o agente. Guarde-o só no seu computador e revogue quando parar de usar. Um servidor que não roda código no Figma só consegue anotar, e então o relatório fica no chat.

Por que começar pelo design

Muitas decisões de acessibilidade são tomadas antes de o código existir. Quando o desenho chega a quem desenvolve, estas já estão nele:

  • ContrasteA cor do texto e dos ícones contra o fundo. Aqui, 15,18:1.
  • Área de toqueO tamanho de cada botão e de cada link. Aqui, 48 px de altura.
  • Estados de focoComo cada controle aparece quando o teclado chega nele. Aqui, um contorno de 3 px.
  • Mensagens de erroO que avisa que algo deu errado e como resolver, em texto, perto do campo.
  • Ordem de leituraA sequência em que o leitor de tela percorre a tela: 1, 2, 3.
Quando o desenho ignora essas decisões, o dev corrige no código, e o produto acaba diferente do que foi desenhado. O DA11Y.md leva as regras para o momento em que a tela é desenhada. Assim design e código respondem aos mesmos números.

O que ele pede ao agente

O DA11Y.md é um arquivo Markdown que o agente lê por link e carrega só as partes que a tarefa pede. São cinco regras.

  • O que já existe vem primeiro

    O agente procura os componentes, as variáveis e os estilos da biblioteca, e as regras já registradas, como um DESIGN.md. Ele aplica tudo como está e depois confere o resultado. Ele avisa cada decisão prévia que afeta a acessibilidade, com a origem e a medida, e só corrige com autorização expressa.

    Exemplo 
    Origem: token border/default · medida 2,9:1 · piso 3:1 · 🟡 MEDIUM · corrijo?

  • Calcular, nunca estimar

    O contraste é calculado por um script que roda dentro do Figma, a partir dos valores dos tokens, em todo estado e em todo modo. Quando um par reprova, você confere o mesmo par na checagem de contraste do próprio Figma.

    Exemplo 
    text/primary sobre surface/default · 11,84:1 · piso 7:1 · passa

  • A evidência fica no arquivo

    Cada tela analisada recebe uma anotação curta, nativa do Figma, com o status, o que há para fazer e o link para o relatório. O relatório completo é desenhado numa página do próprio arquivo, com a tela e os achados numerados, e se repete no chat, para você salvar e entregar a quem desenvolve.

    Exemplo 
    CONDICIONAL
Corrigir aqui — 1
Relatório completo na página DA11Y — relatórios

  • A tela guarda só o que você corrige

    Na tela ficam a anotação com o status e um Corrigir aqui para cada defeito deste arquivo, com o número do achado. Os erros do design system e as perguntas ficam numerados no relatório, e a leitura vai para o handoff. Um erro cabe numa linha. Medidas, ressalvas e o que passou ficam no relatório.

    Exemplo 
    🟠 HIGH · Aqui: seta branca sobre branco · achado 2

  • Design system com contexto para agentes

    Quando a tarefa é criar componentes, o agente também escreve o que o próximo agente precisa ler: a descrição, os apelidos, o contrato de acessibilidade e a anatomia na ordem de leitura. Para fazer isso à mão, o passo a passo está em Design system pronto para o agente.

    Exemplo 
    Switch. Liga ou desliga algo na hora. Não use para escolher entre opções (use Radio). Apelidos: toggle, liga/desliga.

Irmão do A11Y.md

O A11Y.md (abre em nova aba) é um arquivo que ensina a IA que programa (Cursor, Claude, Copilot) a construir interfaces acessíveis desde a primeira linha, seguindo as Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.2, na sigla em inglês). O DA11Y.md é o irmão dele para quem desenha. Ele leva as mesmas regras ao Figma, antes de o código existir.

A marca do A11Y.md e o selo “Apoiado pelo Claude for Open Source Program”, redesenhados em caracteres.

A11Y.md

para o agente de código

  1. Os mesmos números (do A11Y.md para o DA11Y.md)
  2. O mesmo jeito de usar (do A11Y.md para o DA11Y.md)
  3. Do desenho para o código (do DA11Y.md para o A11Y.md)

DA11Y.md

para o agente do Figma

  • Os mesmos númerosOs perfis de conformidade, os limites de contraste e de área de toque e o modelo de severidade vêm do A11Y.md. Um script confere que os dois nunca se afastam, em inglês e em português.
  • O mesmo jeito de usarUm arquivo que o agente lê por link e que carrega cada guia só quando a tarefa pede. Nada para instalar.
  • Do desenho para o códigoO relatório de design termina pedindo que o código siga o A11Y.md, e o agente de código continua de onde o design parou. O que tem ✓ chega como decisão, e o que não tem chega como pergunta. Quem programa não precisa carregar as regras de design.
  • O que só existe no canvasLer um arquivo do Figma, avaliar o que o design system já decidiu e deixar a evidência em anotações no próprio arquivo.
Dois arquivos, um link de ida: o DA11Y.md compila os números do A11Y.md e nunca o contrário. O relatório de design é a volta.
Em caracteres claros sobre fundo escuro, um relógio derretido escorre da borda de uma mesa, e outro se dobra sobre uma figura adormecida.
A Persistência da Memória, detalhe Salvador Dalí, 1931 Óleo sobre tela, 24,1 × 33 cm Museum of Modern Art, Nova York Redesenhado aqui com caracteres de texto

Curiosidade

O nome e o logotipo

DA11Y.md é a soma do D de design com o A11Y de acessibilidade. O nome pode ser lido como "dally", que soa como o nome do pintor Salvador Dalí. A referência à arte é de propósito, porque aproxima o projeto do design e da criatividade, que é o meio de quem vai usá-lo.

O "a" do logotipo carrega o relógio derretido do quadro A Persistência da Memória. A escolha mostra a pretensão do projeto, que é ser um contexto persistente na memória do agente. O agente deve usar o protocolo sempre que desenha, analisa ou anota uma interface.

Para caber nessa memória, o protocolo segue boas práticas de engenharia de prompt e carrega cada guia só quando a tarefa pede, o que poupa tokens. Mas o foco não é economia, é acessibilidade.

Como contribuir

A contribuição mais útil é um relato de campo. Conte o que aconteceu quando você usou o DA11Y.md num desenho real. O guia de contribuição (abre em nova aba) explica o resto.