Semmet — ARIA & Semantic HTML Patterns

Do padrão acessível ao código Angular, dentro do editor.

Semmet é uma extensão de VS Code para criar interfaces acessíveis com mais rapidez. Ela ajuda você a inserir padrões HTML, gerar componentes Angular e preparar recursos do projeto sem sair do editor.

Nos arquivos HTML, digite o nome de um padrão — como accordion, tabs, modal ou tooltip — e selecione a sugestão. A extensão insere roles, atributos aria-* e identificadores vinculados. CSS e comportamento JavaScript permanecem sob responsabilidade do projeto.

Em projetos Angular, o código gerado é local e editável. Você pode adaptar o visual, o conteúdo e o comportamento às necessidades da aplicação.

O que a extensão oferece

• 28 padrões acessíveis para HTML;
• 68 opções entre componentes acessíveis, componentes financeiros e blocos Angular;
• recursos para funcionalidades, acesso HTTP, testes e entrega;
• revisão dos arquivos antes da gravação e comparação das alterações propostas;
• geração de AGENTS.md com o fluxo do Figma para o Semmet;

Inserir um padrão HTML

1. Abra um arquivo .html.
2. Comece a digitar o nome do padrão, como accordion.
3. Selecione a sugestão do Semmet e pressione Tab ou Enter.
4. Preencha o primeiro ponto de edição. O identificador é replicado nos atributos id, aria-controls e aria-labelledby relacionados.

Para consultar todos os padrões, abra a Paleta de Comandos (Cmd+Shift+P ou Ctrl+Shift+P) e execute Semmet: Show Available Components.

Padrões HTML disponíveis (28)

Sobreposições e conteúdo expansível

Navegação e estrutura

Formulários e campos

Mensagens e mídia

Limites dos padrões HTML

Esse fluxo insere apenas a estrutura HTML, com roles e atributos ARIA. Ele não adiciona CSS ou JavaScript. Padrões como abas e combobox também exigem interação por teclado, atualização de estados e gerenciamento de foco para atender ao comportamento descrito pelo W3C APG. Implemente esse comportamento no projeto ou use a geração Angular, que inclui TypeScript e CSS funcional.

Gerar componentes Angular

O comando Semmet: Generate Angular Component gera componentes standalone, diretivas e blocos de composição com TypeScript, HTML, CSS e testes.

Fluxo de geração

1. Abra um workspace Angular que contenha angular.json e esteja marcado como confiável no VS Code.
2. Execute Semmet: Generate Angular Component na Paleta de Comandos.
3. Escolha o que deseja gerar, informe o nome e revise os arquivos propostos.
4. Confirme a geração para gravar os arquivos.

As classes CSS seguem BEM e derivam do nome escolhido. Um componente botao-voltar, por exemplo, pode usar .botao-voltar e .botao-voltar__icon. Não há um prefixo CSS global da Semmet.

A geração Angular exige Workspace Trust e fica desabilitada em workspaces não confiáveis.

Configurar o projeto Angular

Execute Semmet: Generate Angular Project Setup para preparar funcionalidades, testes ou publicação:

• feature, api-resource e interceptor;
• e2e;
• ci, docker e deploy;
• ng-add.

Quando a geração propõe alterações em arquivos existentes, a extensão informa os caminhos afetados e pode abrir uma comparação lado a lado antes da confirmação. Em caso de conflito, você decide se deseja cancelar ou continuar.

A extensão não executa instalações de pacotes. No fluxo e2e, os arquivos são gerados e a instalação das dependências do Playwright deve ser realizada manualmente.

Fluxo com agentes de IA

Execute Semmet: Add AI Instructions to Workspace para criar AGENTS.md no projeto atual. O arquivo inclui o fluxo do Figma para o Semmet, orientações de acessibilidade e o catálogo disponível na extensão.

Configurações

• semmet.showDocsLink — quando true, inclui um comentário HTML com a referência W3C/WAI do padrão. O padrão é true.
• semmet.enabledPatterns — define quais dos 28 padrões aparecem nas sugestões.

Contribuição

Para sugerir um novo padrão, abra uma issue ou um pull request e inclua a referência correspondente do W3C APG, WAI-ARIA ou WCAG.

Licença

MIT