Capturas de Tela Anotadas: Regras e Exemplos

Uma captura de tela anotada mostra um estado real da interface e identifica as regiões exatas que o leitor precisa notar. A imagem carrega marcadores numerados; a página carrega a legenda textual correspondente. Essa separação é o elemento: nem uma imagem de produto sem marcações nem rótulos embutidos nos pixels satisfazem o contrato.

Auditoria de atualização de conteúdo, filtrada para uma URL monitorada.

1. URL monitorada: Confirma que a revisão se aplica à página pretendida, e não ao domínio inteiro.
2. Filtro de status: Reduz a tabela a páginas que exigem uma decisão editorial.
3. Data do resultado: Mostra quando o registro de auditoria subjacente foi atualizado pela última vez.

A captura está pendente, então o comentário é uma especificação de captura de produção, não uma referência de imagem quebrada. Quando o ativo existir, a imagem, legenda e lista numerada são renderizados como uma figura semântica única.

Por que este elemento é importante

Os leitores usam uma imagem de produto para responder a uma pergunta espacial: “Qual controle, valor ou estado esta instrução significa?” Interfaces densas contêm navegação, filtros, rótulos, dados, insígnias e ações que podem parecer igualmente importantes. Uma captura de tela sem anotação exige que o leitor deduza a atenção do autor. Marcadores numerados reduzem essa busca a uma correspondência direta entre uma localização visível e uma explicação curta.

O elemento também substitui linguagem de coordenada frágil. “Use o controle à direita” se torna errado quando uma barra de ferramentas quebra; “escolha o filtro de status marcado como 2” permanece utilizável enquanto a captura estiver atual.

A extraibilidade por máquina significa que o software pode isolar e reutilizar o significado útil de uma unidade de conteúdo. A visão computacional pode reconhecer texto de interface, mas não consegue inferir de forma confiável por que um entre vinte controles importa para este procedimento. Uma legenda visível e ordenada cria pares explícitos de marcador para explicação que sistemas de busca, ferramentas de tradução, software de acessibilidade e auditorias de conteúdo podem processar como texto. A imagem fornece evidência espacial; a legenda fornece significado pesquisável. Isso segue as regras de redação de elementos mais amplas: o conteúdo permanece tipado e portátil mesmo quando seu renderizador muda.

Nunca incorpore a legenda nos pixels. Texto em pixels não pode ser traduzido, pesquisado, selecionado ou corrigido sem editar o material gráfico. Também é invisível para um leitor de tela, software que anuncia conteúdo digital a pessoas que não podem ver a tela. Apenas números de marcadores pertencem à imagem.

Quando usar

Use uma captura de tela anotada quando o leitor precisar identificar uma região específica em uma interface real e as palavras por si só deixarem mais de um alvo plausível. É necessário quando dois controles têm nomes semelhantes, um estado importante é sutil, um resultado deve ser interpretado em seu contexto circundante, ou uma configuração visual não pode ser representada fielmente em prosa. Também é útil quando uma página de produto faz uma afirmação concreta sobre a interface que a imagem pode comprovar.

Uma captura de tela é opcional quando a instrução já nomeia um controle único e visível e a interação é convencional. “Selecione Salvar alterações” normalmente não precisa de imagem quando a página contém um único botão desse tipo. Torna-se necessária se a mesma tela tiver Salvar rascunho, Salvar visualização e Salvar alterações, e escolher o errado mudar o resultado.

Uma captura de tela é prejudicial quando adiciona peso sem resolver incerteza. Não adicione uma por decoração ou para repetir texto que fica mais claro em uma tabela. Quatorze capturas de tela em um guia de catorze etapas criam catorze interrupções, problemas de zoom em dispositivos móveis e ativos desatualizados. Capture as etapas ambíguas; deixe verbos precisos carregarem as rotineiras.

Quase-acertos incluem:

• Um painel completo usado para explicar um ícone: corte para a menor região que preserve a orientação. Um marcador perdido em uma interface ampla não reduz o esforço de busca.
• Uma captura de tela usada como evidência numérica: repita o valor decisivo em texto ou tabela. Pixels não podem ser a única cópia acessível de uma afirmação.
• Uma captura de tela de um menu antes de abrir: capture o estado que o leitor precisa inspecionar. O estado fechado prova que o produto existe, mas não qual escolha fazer.
• Uma captura de tela contendo registros de clientes: substitua-os por dados de demonstração estáveis antes da captura. Desfocar é fácil de passar despercebido.
• Um diagrama disfarçado de captura de tela: use um diagrama para relações abstratas. O realismo da interface ajuda apenas quando a interface é relevante.

Onde posicionar

Posicione a figura após o parágrafo ou etapa que primeiro pede ao leitor para inspecionar a interface. Em um procedimento, coloque-a após a ação e antes do estado de sucesso ou solução de problemas, para que o leitor localize o controle antes de verificar o resultado.

Mantenha a imagem, legenda e lista de marcadores juntas. Um título pode introduzir o grupo, mas outro parágrafo, callout, anúncio ou quebra de página não deve separar a captura de suas explicações numeradas. Uma legenda identifica a tela inteira e o contexto; ela não carrega uma instrução que pertence à prosa nem substitui a lista de marcadores.

Não coloque duas capturas de tela em largura total juntas. Insira a explicação que as distingue, ou crie uma comparação identificada quando ambos os estados precisarem ser avaliados juntos. Mantenha as capturas de tela longe de chamadas para ação não relacionadas, tabelas densas e galerias.

Repita o elemento apenas quando cada ocorrência responder a uma pergunta espacial diferente. Prefira uma figura focada; caso contrário, dê a cortes distintos nomes de arquivo e propósitos diferentes.

Anatomia

A captura de anatomia demonstra as partes visíveis e textuais de um elemento completo. Os rótulos explicativos permanecem na legenda renderizada, em vez de se tornarem parte da imagem fonte.

Legenda renderizada

1. Limite de contexto: Inclui interface circundante suficiente para identificar a página e localização, mas exclui navegação não relacionada e espaço vazio.
2. Marcador numerado: Usa um círculo de alto contraste e um número inteiro, não apenas cor, para conectar uma região à sua entrada na legenda.
3. Região alvo: Marca o menor controle, valor ou estado completo necessário para a explicação; nunca cobre o rótulo do alvo.
4. Ponto de referência de orientação: Preserva um título, aba ou rótulo de painel estável para que o leitor encontre a mesma área no produto real.
5. Legenda: Nomeia a tela, estado e cenário em texto visível abaixo da imagem.
6. Lista de marcadores: Usa uma lista ordenada cujos números correspondem exatamente aos marcadores e cujas entradas explicam o significado, não apenas a aparência.

Os números dos marcadores começam em 1 e seguem a ordem da legenda. Use dois a seis por imagem; um serve para um alvo difícil, enquanto mais de seis geralmente sinaliza uma captura muito ampla.

Exemplos de design

As variantes suportadas alteram o corte e o viewport, não a política de anotação. Cada variante usa dados de demonstração, marcadores de imagem numerados, uma legenda textual externa e uma legenda visível.

Controle focado: Preferido para uma única ação ambígua. Preserve um rótulo de orientação para que o corte não se torne um retângulo anônimo.

Estado do fluxo de trabalho: Use quando a relação entre uma entrada, um status e um resultado for relevante. Mantenha a navegação global não relacionada fora do quadro.

URL em contexto: A única variante padrão que inclui chrome do navegador, ou seja, as abas, barra de endereços e controles do próprio navegador. Inclua apenas a barra de endereços e o indicador de permissão ou segurança necessário.

Estado móvel: Capture o layout estreito real quando a interação mudar na largura móvel. Não reduza uma tela larga de desktop e chame-a de exemplo móvel.

Parâmetros

Os parâmetros formam o contrato de conteúdo portátil. Valores visuais como cor do marcador, espessura da borda e tipografia da legenda pertencem ao renderizador e não são campos do autor.

O screenId identifica a superfície do produto independentemente de seu nome de arquivo, para que uma versão possa encontrar diferentes cortes de content-freshness-audit. O arquivo alt.yaml permanece simples: um nome de arquivo seguido por uma string de texto alternativo dobrada.

Sintaxe e exemplos de código

Cada notação preserva os mesmos metadados, legenda, marcadores e ordem de leitura imagem–legenda–lista de marcadores.

Diretiva Markdown portátil

:::annotated-screenshot{src="/images/seo-playbook/elements/annotated-screenshot/workflow-state.webp" viewport=1440 density="2x" screenId="content-freshness-audit" captureDate="2026-08-27"}
Auditoria de atualização de conteúdo filtrada para uma URL monitorada.

1. **URL monitorada:** Confirma qual página a auditoria avalia.
2. **Filtro de status:** Limita os resultados a páginas aguardando revisão.
3. **Data do resultado:** Mostra quando os dados da auditoria foram atualizados.
:::

O adaptador resolve alt a partir do arquivo alt.yaml da pasta. Uma chave de nome de arquivo ausente é uma falha de publicação, não permissão para copiar a legenda.

Mapeamento de shortcode Hugo

{{< annotated-screenshot src="/images/seo-playbook/elements/annotated-screenshot/workflow-state.webp" viewport="1440" density="2x" screenId="content-freshness-audit" captureDate="2026-08-27" >}}
Auditoria de atualização de conteúdo filtrada para uma URL monitorada.

1. **URL monitorada:** Confirma qual página a auditoria avalia.
2. **Filtro de status:** Limita os resultados a páginas aguardando revisão.
3. **Data do resultado:** Mostra quando os dados da auditoria foram atualizados.
{{< /annotated-screenshot >}}

Este é um contrato de adaptador, não um shortcode registrado. Até que um renderizador e ativo aprovados existam, use o pipeline de figura semântica estabelecido ou deixe o comentário de captura prescrito. Não substitua por um renderizador que remova a legenda ou campos de atualização.

Bloco ou shortcode WordPress

[annotated_screenshot src="workflow-state.webp" viewport="1440" density="2x" screen_id="content-freshness-audit" capture_date="2026-08-27"]
[caption]Auditoria de atualização de conteúdo filtrada para uma URL monitorada.[/caption]
[marker number="1" label="URL monitorada"]Confirma qual página a auditoria avalia.[/marker]
[marker number="2" label="Filtro de status"]Limita os resultados a páginas aguardando revisão.[/marker]
[marker number="3" label="Data do resultado"]Mostra quando os dados da auditoria foram atualizados.[/marker]
[/annotated_screenshot]

Um bloco WordPress pode expor os campos como controles, mas deve armazenar as descrições dos marcadores como texto.

Exemplos

Bom: um estado ambíguo, três marcadores úteis

Revisão de atualização de conteúdo para demo.example/pricing/.

1. URL monitorada: Verifica se o resultado pertence à página de preços selecionada na instrução.
2. Needs review: Identifica o filtro exato que remove páginas atuais da fila de trabalho.
3. Última atualização: Impede que o editor trate um resultado de auditoria antigo como um diagnóstico atual.

Isso funciona porque cada marcador responde a uma decisão, o corte preserva a orientação e a legenda explica consequências não visíveis nos pixels. O domínio de demonstração é claramente um dado não real de cliente.

Ruim: um pôster de produto rotulado

A versão ruim explica um painel inteiro de uma vez. Oito setas se cruzam, rótulos obscurecem controles, e a promoção embutida não dá nenhuma ação. Favoritos do navegador criam risco de privacidade, nomes de clientes tornam a aprovação incerta, nenhum identificador de tela suporta atualizações, e a escala móvel torna os alvos ilegíveis.

Repare selecionando uma tarefa, usando dados de demonstração aprovados, cortando para o painel e mantendo apenas os marcadores necessários. Mova as explicações para uma legenda textual, adicione texto alternativo contextual e registre o identificador da tela e a data.

Marcação de esquema e acessibilidade

Uma captura de tela anotada não tem um tipo especial de Schema.org. Ela pode preencher a propriedade image de um Article ou um ImageObject com contentUrl, legenda, largura e altura precisos. Não invente propriedades de marcadores; mantenha a legenda visível.

Use semântica nativa de figura: um <figure> contendo o <img>, um <figcaption> e a lista ordenada de marcadores. A legenda nomeia a tela e o estado inteiros. O atributo alt da imagem descreve o que a tela mostra neste contexto; não deve começar com “captura de tela de”, porque o próprio elemento de imagem já se anuncia. A lista de marcadores fornece as explicações numeradas detalhadas, então repetir todas as seis entradas no texto alternativo cria um anúncio longo e duplicado.

Mire em 80–180 caracteres, com 250 como teto. Nomeie a área do produto, estado e propósito marcado: “Auditoria de atualização de conteúdo filtrada para uma URL monitorada, com marcadores no filtro de status e data da última atualização.” Não transcreva a interface, coloque palavras-chave ou use o nome do arquivo. Esta imagem informativa normalmente precisa de texto alternativo não vazio.

Os números dos marcadores devem ser legíveis sem cor. Use alto contraste contra regiões de interface claras e escuras, mantenha seu tamanho visual consistente e não cubra rótulos ou valores. A lista de marcadores usa uma lista ordenada na ordem normal do documento; evite papéis ARIA, ou Accessible Rich Internet Applications, que transformam conteúdo estático em um alerta ou widget interativo. Uma relação aria-describedby é opcional apenas quando os testes mostrarem que melhora a navegação sem fazer com que a legenda visível seja anunciada duas vezes.

Em larguras estreitas, o design responsivo deve preservar o significado. Dimensione uma imagem larga apenas enquanto marcadores e alvos permanecerem legíveis; caso contrário, forneça um corte focado ou captura móvel genuína. Nunca cause rolagem horizontal no nível da página ou exija zoom. A legenda e a lista de marcadores quebram abaixo.

Regras de conteúdo e captura

A consistência torna as capturas de tela comparáveis e substituíveis. Capture telas de produto em desktop em um viewport fixo de 1440 CSS pixels e densidade de pixels 2x, frequentemente chamada de densidade Retina, que registra dois pixels de dispositivo para cada pixel CSS. Capture estados móveis genuínos em 390 CSS pixels e densidade 2x. Use o tema de produto aprovado de forma consistente dentro de um guia; não alterne modo claro e escuro a menos que a diferença de tema seja o assunto.

Use apenas dados de demonstração: sem nomes reais, endereços de e-mail, domínios, detalhes de faturamento, tokens, prompts ou resultados. Inspecione barras laterais, itens recentes, preenchimento automático, notificações e avatares antes da captura.

Exclua o chrome do navegador a menos que uma URL, permissão ou controle do navegador seja o ponto. Oculte abas, favoritos, extensões, downloads, perfis e notificações. Capture após o carregamento; feche dicas de ferramenta irrelevantes e mostre um cursor apenas quando essencial.

Armazene as capturas fonte em cdn-assets/seo-playbook/elements/annotated-screenshot/. Use nomes em kebab case minúsculo baseados na tela e estado, como freshness-audit-needs-review.webp; nunca use final, new, v2, o nome de uma pessoa ou uma data como nome de arquivo. O nome estável permite que o ativo seja substituído sem reescrever toda página. Use WebP para entrega normal, de preferência uma configuração sem perdas quando texto pequeno de interface precisar permanecer nítido. Use PNG apenas quando o pipeline de produção demonstrar que WebP prejudica o texto ou a transparência. Não use JPEG para capturas de UI com texto fino e bordas nítidas.

Renderize a no máximo 1600 CSS pixels de largura; uma fonte 2x de 1440 pixels pode ter 2880 pixels físicos. Preserve a proporção e as dimensões intrínsecas. A otimização suporta SEO de imagens , mas a compressão não deve desfocar texto ou marcadores.

Toda pasta de ativos contém alt.yaml com uma entrada por nome de arquivo:

freshness-audit-needs-review.webp: >-
  Auditoria de atualização de conteúdo AmICited filtrada para uma URL monitorada, com marcadores numerados no status de revisão e data da última atualização.

A chave corresponde exatamente ao nome do arquivo; o valor é texto alternativo, não uma legenda ou lista de marcadores. Placeholders, painéis de estoque e referências de imagem inexistentes são proibidos. Capturas pendentes usam apenas um comentário SCREENSHOT e screenshotsPending = true.

Política de atualização e recaptura

Capturas de tela envelhecem silenciosamente quando um controle representado se move ou muda de nome. Trate cada captura como uma visão de uma tela registrada: screenId une mudanças de produto a ativos, enquanto a data de captura identifica o estado registrado.

Uma mudança na UI aciona uma recaptura quando move ou renomeia um alvo marcado, altera o estado que a legenda explica, modifica o caminho de navegação necessário para alcançá-lo, remove um ponto de referência de orientação preservado, ou torna a imagem antiga propensa a enviar o leitor ao controle errado. Recapture o conjunto completo de figuras para aquela tela, incluindo variantes focadas e móveis. Uma mudança de token de cor, ajuste de espaçamento ou adição de barra lateral não relacionada não exige substituição automática, a menos que a captura de tela agora entre em conflito visivelmente com a experiência real ou padrão de acessibilidade.

Quando uma tela muda, pesquise por seu screenId, depois sua pasta e nome de arquivo para capturar usos legados. Substitua arquivos estáveis, revise alt.yaml e inspecione toda legenda afetada. Não renomeie arquivos de substituição e não deixe referências mais antigas órfãs.

O proprietário da tela de produto sinaliza mudanças; o proprietário do conteúdo aceita substituições. Recapture com a mesma fixture de demonstração, viewport, densidade e tema. Revise as capturas de tela durante toda atualização substantiva de página.

Tipos de post que usam este elemento

O postTypes no frontmatter é a junção registrada. Cada tipo usa o mesmo contrato de elemento, mas aplica um limite de exigência diferente.

Estudos de caso exigem um limite extra: obtenha permissão explícita para mostrar informações reais de cliente ou reconstrua a interface com dados de demonstração claramente divulgados e trate como uma ilustração de fluxo de trabalho, não evidência de resultado. Redação não substitui consentimento ou uma fixture controlada.

Lista de verificação de QA

Um revisor verifica a comunicação e o risco de manutenção antes do polimento visual.

• Propósito: A figura resolve uma ambiguidade espacial ou prova uma afirmação visível de interface.
• Necessidade: Etapas rotineiras permanecem em texto; a página não atribui uma captura de tela a cada etapa por padrão.
• Estado real: A captura mostra o menu aberto exato, filtro selecionado, resultado ou erro discutido no texto.
• Dados de demonstração: Nenhum cliente, funcionário, conta, navegador, token, prompt ou informação de faturamento está visível.
• Consistência da captura: Viewport, densidade 2x, tema, estado da interface e regra de chrome do navegador correspondem ao padrão.
• Corte focado: Contexto suficiente permanece para orientação, mas áreas de interface não relacionadas não competem com o alvo.
• Marcadores: Há de um a seis números contínuos, cada um com alto contraste, legível e sem sobrepor rótulos e valores.
• Legenda externa: Cada marcador tem uma entrada correspondente em lista ordenada no texto da página; nenhum texto de legenda está embutido nos pixels.
• Legenda da imagem: A figura tem uma legenda visível concisa nomeando sua tela, estado e cenário.
• Texto alternativo: O arquivo alt.yaml da pasta contém uma chave de nome de arquivo exata e uma descrição contextual dentro da faixa de comprimento alvo.
• Comportamento móvel: O alvo e os marcadores permanecem legíveis sem rolagem horizontal no nível da página ou zoom exigido; caso contrário, existe um corte focado.
• Contrato do arquivo: Caminho, nome em kebab case minúsculo, formato, dimensões e tamanho intrínseco seguem o padrão de entrega.
• Atualização: screenId e data de captura estão registrados, a UI real ainda corresponde, e todas as referências podem ser encontradas por busca textual.
• Paridade portátil: Representações em Markdown, Hugo e WordPress preservam o mesmo ativo, legenda, ordem dos marcadores e texto da lista.
• Nenhum ativo quebrado: Um caminho de imagem real aparece apenas após o arquivo existir; capturas pendentes permanecem como comentários e mantêm screenshotsPending = true.

FAQ

O template academy renderiza as cinco perguntas revisadas armazenadas no frontmatter [[faq]] desta página. Elas cobrem frequência de capturas de tela, legendas externas, tamanho do texto alternativo, gatilhos de recaptura e a exceção do chrome do navegador.