Margem Viva

Acessibilidade

Como penso e aplico acessibilidade neste site.

Preferências de exibição

As preferências são salvas no navegador e aplicadas em todas as páginas do site.

Tema

Alternar entre tema claro e escuro.

Tamanho do texto

Ajuste o tamanho da fonte em todo o site.

Contraste

Aumenta o contraste entre texto e fundo.

Movimento

Desativa animações e transições do site.

Varredura atual

Esta página descreve o estado real do site em abril de 2026. A revisão foi feita sobre a estrutura atual da Margem Viva, olhando landmarks, navegação por teclado, foco visível, contraste, personalização de leitura e marcações semânticas voltadas à IndieWeb.

O que já está implementado

  • Link “Pular para o conteúdo” no início da página, apontando para o conteúdo principal.
  • Landmarks semânticos com aside, main, nav, article e footer.
  • Estados de foco visíveis nos controles e navegação utilizável por teclado.
  • Controles de leitura para tema claro/escuro, tamanho do texto, contraste e redução de movimento.
  • Layout responsivo com reflow em telas menores, sem depender de gesto ou hover para navegação principal.
  • Ícones decorativos marcados com aria-hidden="true" quando não carregam significado próprio.

Pontos observados nesta revisão

  • O destino do skip link foi corrigido para um main real com id="main-content".
  • Links de identidade com rel="me" foram normalizados para evitar atributos duplicados.
  • Breadcrumbs e alguns textos utilitários foram saneados para evitar caracteres quebrados na interface.
  • Os posts já expõem uma base consistente de metadados e categorias com microformatos.

IndieWeb e microformatos

O site publica uma base consistente de tags e endpoints IndieWeb:

  • rel="webmention" e rel="pingback" no <head>.
  • h-card na identidade do autor, com p-name, u-photo, u-url, u-email e p-note.
  • rel="me" nos links de identidade pública, como GitHub, Bluesky e Linktree.
  • h-entry nos posts, com p-name, p-author, dt-published, u-photo e p-category.
  • Feeds em quatro formatos: Atom (/feed.xml), RSS 2.0 (/rss.xml), JSON Feed (/feed.json) e alias Atom (/atom.xml).
  • Auto-descoberta de feeds via <link rel="alternate"> no <head> de todas as páginas.
  • sitemap.xml publicado em /sitemap.xml para indexação por mecanismos de busca.

Privacidade e analytics

O site usa GoatCounter para análise de tráfego — sem cookies, sem rastreamento de dados pessoais, sem fingerprinting. Os dados são agregados, anônimos e publicamente acessíveis. Nenhuma informação pessoal do visitante é coletada ou compartilhada.

O que ainda merece atenção

  • Falta uma auditoria automatizada complementar com Axe ou Lighthouse para fechar contraste e ordem de foco em todas as páginas.
  • Ainda vale revisar conteúdo antigo importado para garantir acentuação, alt text e consistência de headings em todos os posts.
  • Imagens editoriais dependem do preenchimento correto de alt no conteúdo de cada entrada.

Compromisso

O objetivo do site continua sendo manter uma experiência legível, simples e utilizável com teclado, zoom, leitor de tela e preferências pessoais de leitura. Acessibilidade aqui não é acabamento: é parte da estrutura editorial.

Problemas e sugestões

Encontrou alguma barreira de acessibilidade? Entre em contato ou fale comigo no Bluesky em @wagnerbeethoven.com.br.

Última atualização: