Ir para o conteúdo
Mera News

Guia para editoras, capítulo 6

Dados para leitores de tela e máquinas

Última revisão em novembro de 2026

Um leitor de tela, um mecanismo de busca e um leitor de feeds dependem de como o seu site é estruturado. HTML claro, dados estruturados e um feed limpo dão a cada um deles o que precisa.

Comece pelo HTML

Estes elementos dão à página os seus marcos de navegação, para que quem usa leitor de tela possa ir direto ao artigo.

<html lang="en">
<body>
  <a href="#main">Skip to the article</a>
  <header>
    <nav aria-label="Main">...</nav>
  </header>
  <main id="main">
    <article>
      <h1>Article headline</h1>
      <p>By <a href="/authors/jane-doe">Jane Doe</a></p>
      <p><time datetime="2026-11-05T08:00:00+01:00">Published 5 November 2026</time></p>
      <h2>First section</h2>
      <p>Article text.</p>
    </article>
    <aside aria-label="Related articles">...</aside>
  </main>
  <footer>...</footer>
</body>
</html>
  • Marcos de navegação: Use header, nav, main, aside e footer como foram pensados. Quando uma página tem mais de um nav, identifique cada um com um rótulo.
  • Link para pular: Ele permite que quem usa o teclado passe pela navegação repetida, o que ajuda a atender o critério de sucesso 2.4.1 do WCAG. Deixe-o visível ao receber o foco.
  • Títulos: Use um único h1 para a manchete e mantenha os níveis em ordem. Um h4 logo depois de um h2 é o tipo de salto a evitar. Escolha um título pelo lugar dele na estrutura, nunca pelo tamanho.
  • Listas e tabelas: Use elementos ul, ol e table de verdade, para que a estrutura deles possa ser lida por software (critério de sucesso 1.3.1).

Idioma

Defina lang no elemento html em todos os idiomas (critério de sucesso 3.1.1). Sem isso, um leitor de tela pode ler o seu artigo com a voz errada. Marque também os trechos em outro idioma (critério de sucesso 3.1.2).

<p>The minister called it <span lang="fr">une erreur historique</span>.</p>

Imagens

  • Escreva um texto alt que dê ao leitor o que a imagem acrescenta à notícia.
  • Use alt="" em imagens puramente decorativas. Não omita o atributo, porque alguns leitores de tela leem o nome do arquivo em voz alta.
  • Use fundos em CSS para a decoração pura, sempre que possível.
  • Use figure e figcaption para legendas e créditos de fotos.

Em cada tela

Os requisitos do WCAG 2.2 AA que mais importam para um modelo de notícias:

RequisitoMetaCritério
Contraste do texto4,5:1, ou 3:1 para texto grande1.4.3
Redimensionamento do textoAté 200% sem perder nada1.4.4
Reflow320 pixels CSS de largura sem rolagem lateral1.4.10
Foco visívelUm indicador de foco de teclado visível2.4.7
Foco não obscurecidoO foco nunca fica totalmente escondido2.4.11
Tamanho do alvoPelo menos 24 por 24 pixels CSS2.5.8

No celular, teste com o VoiceOver ou o TalkBack e com a configuração de texto maior. No computador, percorra a página usando apenas as teclas Tab, Enter e Escape.

Publique uma declaração de acessibilidade que diga o que você atende, o que ainda não atende e como relatar um problema.

A Lei Europeia de Acessibilidade

A Diretiva (UE) 2019/882 se aplica a serviços listados prestados a consumidores depois de 28 de junho de 2025. A lista inclui serviços de comércio eletrônico, livros digitais e serviços que dão acesso a mídia audiovisual. Os serviços de comércio eletrônico são definidos como serviços prestados à distância, por meio de sites e de serviços baseados em dispositivos móveis, a pedido de um consumidor, para celebrar um contrato. As microempresas que prestam serviços estão isentas.

A Lei não lista sites de notícias como tais. Um site que vende assinaturas online, ou vende livros digitais ou acesso a vídeo, ainda pode estar incluído, e as leis nacionais acrescentam detalhes. Confira a sua situação com um advogado.

Dados estruturados para artigos

A marcação NewsArticle ajuda o Google a entender a página. O guia do Google diz que não há propriedades obrigatórias, então adicione as que se aplicam.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "Article headline",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ],
  "datePublished": "2026-11-05T08:00:00+01:00",
  "dateModified": "2026-11-05T09:20:00+01:00",
  "author": [{
    "@type": "Person",
    "name": "Jane Doe",
    "url": "https://example.com/authors/jane-doe"
  }]
}
</script>
  • Use datas ISO 8601 com fuso horário.
  • Mantenha as datas na marcação iguais às da página e mostre-as com um rótulo como “Publicado” ou “Última atualização”.
  • Forneça imagens em 16x9, 4x3 e 1x1, cada uma com pelo menos 50.000 pixels quando a largura é multiplicada pela altura.
  • Use imagens editoriais, nunca o seu logotipo.
  • Mantenha a marcação igual no celular e no computador.

Um feed RSS limpo

O seu feed é a versão legível por máquina mais simples do seu site, e você decide exatamente o que ele carrega.

<item>
  <title>Article headline</title>
  <link>https://example.com/news/article-headline</link>
  <guid isPermaLink="true">https://example.com/news/article-headline</guid>
  <pubDate>Thu, 05 Nov 2026 07:00:00 GMT</pubDate>
  <description>One or two sentences that describe the article.</description>
  <category>Politics</category>
</item>
  • Todo canal precisa de title, link e description.
  • Dê a cada item um guid estável e use o link permanente sempre que puder.
  • Escreva pubDate no formato RFC 822 mostrado aqui.
  • Use URLs canônicas dos artigos.
  • Mantenha description curta e deixe o texto pago de fora.
  • Adicione um link de descoberta ao head de todas as páginas.
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

Envie os cabeçalhos ETag ou Last-Modified e responda 304 Not Modified quando o If-None-Match ou o If-Modified-Since de um leitor de feeds mostrar que nada mudou. Isso mantém baratas, para o seu servidor, as consultas frequentes.

Lista de verificação

  • Adicione lang ao elemento html em todos os idiomas.
  • Adicione um link para pular e um único marco main a cada modelo.
  • Identifique cada nav e aside com um rótulo.
  • Faça uma verificação da estrutura de títulos no seu modelo de artigo.
  • Audite o texto alt no seu CMS e torne-o um campo obrigatório para imagens editoriais.
  • Confira o contraste de links, legendas e assinaturas de autor.
  • Teste com o teclado e com o VoiceOver ou o TalkBack.
  • Publique uma declaração de acessibilidade com um endereço de contato.
  • Pergunte a um advogado se a Lei Europeia de Acessibilidade se aplica aos seus serviços.
  • Adicione JSON-LD de NewsArticle com datas que coincidam com as da página.
  • Valide o seu feed e confirme que ele envia ETag ou Last-Modified.

Fontes