Boas práticas
18. Acessibilidade fora da tela — social, vídeo, documento e apresentação
seed-praticas.md v1.13 · §18seção 19 de 2518-acessibilidade-fora-da-tela-social-video.md · MD5 7e07b9feOrigem: base NOVA, escrita em 2026-09-08 na F9.8 onda 5, por veredito V-B2 dele (MANIFESTO §186). O buraco medido no levantamento de abertura (MANIFESTO §185.2): acessibilidade está resolvida na web — os critérios WCAG que o canon cita, os sete testes de componente, a página
/acessibilidade/da vitrine — e ausente em tudo que a casa produz fora do navegador: post, carrossel, vídeo, PDF de proposta, apresentação.Revisão: conteúdo revisado em 2026-09-08 · ciclo de 6 meses (V-B3 = A) · vence em 2027-03-08
Estado: ✅ auditada na origem — nasceu sob a régua de etiquetas da §1.0.
18.0 Como ler esta seção — e o que ela não consegue provar#
Valem as etiquetas da §1.0.
⚠ O que esta seção NÃO consegue provar: que uma peça é acessível na prática. Conformidade se mede com leitor de tela real e, idealmente, com pessoa com deficiência usando. O que está aqui é o que se pode exigir de quem produz, e o que dá para conferir olhando. Onde a checagem é automatizável na web, o acervo já tem instrumento (os sete testes e as guardas); fora da tela não existe guarda automática hoje — a conferência é humana.
18.1 O que virou lei e norma no Brasil — e onde a norma acaba#
[norma]Lei Brasileira de Inclusão — Lei nº 13.146, de 6 de julho de 2015, art. 63, texto oficial lido em 2026-09-08: "É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País (…) conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente." E o § 1º: "Os sítios devem conter símbolo de acessibilidade em destaque." Não é recomendação — é obrigação legal de empresa privada.- ⭐
[norma]ABNT NBR 17225:2025 — "Acessibilidade em conteúdo e aplicações web — Requisitos", primeira edição de 11/03/2025, 69 páginas, texto lido em 2026-09-08. É a primeira norma brasileira de acessibilidade digital, e ela fecha a lacuna que o art. 63 deixava ao dizer "melhores práticas internacionais": agora há um documento nacional dizendo quais são. Três coisas que importam para produzir:- o escopo é website, e a norma declara que adota as WCAG 2.2 do W3C como diretriz internacional;
- a norma divide tudo em requisitos (níveis A e AA) e recomendações (nível AAA);
- ela define conformidade regular (cumprir todos os requisitos, alinhada ao nível AA da WCAG 2.2) e conformidade plena. Em uma frase: o piso continua sendo AA, que é exatamente o que este design system já pratica.
- Normas que ela cita como referência normativa e que valem fora do navegador: ABNT NBR 16452 (audiodescrição), ABNT NBR 15610-3 (Libras), ABNT NBR 17060 (aplicativos móveis) e ABNT NBR ISO 24495-1 (linguagem simples).
- ⚠ E aqui a norma acaba. Post de Instagram, carrossel, Reels, PDF de proposta e slide não são website. Nenhuma norma brasileira os alcança. O que segue nesta seção é
[SEED]: a casa aplica o mesmo piso fora da tela, porque o olho e o leitor de tela são os mesmos.
18.2 Contraste: o número não muda porque a peça saiu do navegador#
[norma] Os patamares da NBR 17225:2025, que são os da WCAG 2.2 (lidos em 2026-09-08):
| o que | relação mínima |
|---|---|
| texto normal sobre o fundo | 4,5:1 |
| texto grande sobre o fundo | 3:1 |
| componente de interface e indicador de foco | 3:1 |
[SEED] A casa aplica os mesmos números a toda superfície com texto — arte de post, slide, capa de carrossel, placa, etiqueta, PDF. E não se calcula à mão: a cor vem da camada semântica do seed-tokens.json, cujos pares já são medidos pelas guardas de contraste do acervo. Escolher cor "que parece dar" é como escolher tamanho de cabo no olho.
⛔ Cor sozinha nunca carrega informação. É a mesma lei que o seed-dataviz.md já fixou no DG17 e na errata E3 — posição categórica nunca serve de neutro. Num gráfico de proposta, numa legenda de post, num status de checklist: além da cor, forma, rótulo ou padrão.
18.3 Texto alternativo — o que cada plataforma de fato oferece#
[plataforma]Instagram — artigo "Como editar o texto alternativo de um post no Instagram" (Central de Ajuda do Instagram, artigo 503708446705527), lido em 2026-09-08. O caminho oficial: ao publicar, Avançar → Acessibilidade → escrever o texto alternativo; depois de publicado, Opções → Editar → Acessibilidade. E o alerta que a própria Meta dá: "O texto alternativo automático usa uma tecnologia de reconhecimento de objetos a fim de criar descrições de fotos para pessoas com deficiências visuais. Você pode substituir o texto para fornecer uma descrição melhor de uma foto." Ou seja: se você não escrever, a máquina escreve — e ela descreve objetos genéricos, não a informação da peça.[plataforma]LinkedIn — página de ajuda "Add alternative text to images for accessibility", lida em 2026-09-08: o campo aparece como Alt.text abaixo da imagem no computador e ALT no celular; e "LinkedIn may automatically add alt-text to images that don't have it", com o aviso de que no envio pelo celular você não é avisado de que o texto automático entrou.- ⚠ Limite de caracteres: nem o Instagram nem o LinkedIn publicam um número nas páginas oficiais lidas. Os valores que circulam (1.000 e 300 caracteres) vêm de blogs, não da fonte —
[não conferido].
[SEED] Como a casa escreve um texto alternativo:
- Uma frase, começando pelo que a imagem é, seguida do que nela importa. Alvo de ~150 caracteres — não por limite de plataforma, mas porque leitor de tela lê tudo em sequência e ninguém aguenta um parágrafo.
- Sem "imagem de", "foto de" — o leitor de tela já anuncia que é imagem.
- Se há texto na arte, o texto alternativo o repete. Capa de carrossel com uma frase grande e sem alternativo é uma peça muda.
- Foto técnica descreve o que se vê, não o que se conclui: "quadro elétrico aberto com disjuntores identificados por etiqueta", não "instalação em conformidade".
- Imagem puramente decorativa (grafismo, textura) recebe alternativo vazio na web; em social, onde não existe alternativo vazio, recebe uma descrição curta do grafismo.
18.4 Vídeo: legenda é obrigatória em toda peça da casa#
[SEED] Nenhum vídeo da SEED sai sem legenda. Motivo prático antes do motivo legal: o som já nasce desligado no feed (medido e registrado na §4), então legenda serve a todo mundo, não só a quem não ouve.
[plataforma]Stories não tem legenda automática — o texto tem de estar queimado no arquivo de vídeo (regra oficial já registrada na §1.1, lida em 2026-09-07).[SEED]Legenda automática de plataforma se revisa sempre. Ela erra exatamente onde dói neste ramo: sigla (SPDA, GMG, ART, CREA), unidade (kWp, kVA, kWh) e nome técnico. Uma legenda que escreve "quilowatt pico" como "quilo de vato pico" destrói a credibilidade da peça em um segundo.[SEED]Audiodescrição — a referência brasileira é a ABNT NBR 16452 (citada pela NBR 17225; conteúdo[não conferido], norma paga). Para o vídeo curto da casa, a saída prática é mais simples: narrar o que aparece. Se a informação está só na imagem (um número na tela, um gráfico), a locução diz o número.[SEED]Libras entra quando a peça é institucional e permanente (vídeo do site, treinamento), não em toda publicação — e a referência é a ABNT NBR 15610-3 ([não conferido]).
O detalhe de formato, duração e legenda por plataforma está na §19.
18.5 A arte: tamanho, ruído e informação presa na imagem#
Tudo [SEED].
- Tamanho mínimo de texto na arte: a medida que importa não é o pixel do arquivo, é quanto ele ocupa na tela do celular. Numa arte 1080 × 1350 exibida em ~390 px de largura, o texto encolhe para cerca de um terço. Regra da casa: nada abaixo do equivalente a 16 px na tela — e o texto de apoio menor que isso simplesmente não entra na peça.
- Informação essencial nunca fica só na imagem. O que a peça afirma precisa estar também na legenda do post: quem não vê a imagem, quem está com dado limitado e o agente de IA que indexa a publicação leem o texto, não a arte. É a mesma regra IA-primeiro da casa, chegando ao social.
- Contraste em cima de foto é o defeito clássico: texto branco sobre céu claro. A saída é a mesma da web — camada de escurecimento controlada ou tarja sólida, e a medição do par depois de aplicada.
- Animação e piscada: nada que pisque mais de três vezes por segundo — é o critério da WCAG que existe por causa de convulsão fotossensível, e vale igual em Reels e em GIF.
18.6 A escrita também é acessibilidade#
Tudo [SEED], com o mecanismo declarado — onde é [inferência] sobre o comportamento do leitor de tela, está dito.
| prática | por quê |
|---|---|
Hashtag em CamelCase: #EnergiaSolar, não #energiasolar |
o leitor de tela lê a hashtag como uma palavra só; a maiúscula é o que o faz separar as palavras [inferência] — o mecanismo não foi medido com leitor de tela nesta rodada |
| Emoji com moderação e no fim da frase | cada emoji é lido em voz alta pelo nome completo; um emoji entre cada palavra transforma a frase em ruído [inferência] |
| Nunca usar fontes decorativas de Unicode (as letras "estilizadas" que se colam em bio e legenda) | não são letras: são símbolos matemáticos. Leitor de tela pode ler caractere a caractere ou pular tudo, e a busca não acha o texto [inferência] |
| CAIXA ALTA só em palavra curta | leitor de tela pode soletrar palavra toda em maiúscula, e a leitura visual também piora |
| Link com texto que diz o destino ("ver a proposta"), nunca "clique aqui" | quem navega por lista de links ouve só o texto do link |
| Linguagem simples — frase curta, uma ideia por frase, sigla explicada na primeira aparição | é a ABNT NBR ISO 24495-1, citada como referência normativa pela NBR 17225. E é a regra de escrita desta casa desde sempre |
18.7 PDF e apresentação — o ponto cego mais caro da casa#
[SEED] A proposta comercial e o laudo saem em PDF, e é aí que a acessibilidade some sem ninguém notar.
- PDF de imagem escaneada é o pior caso: leitor de tela não lê nada, busca não acha nada e agente de IA não lê nada. Isso não é só acessibilidade — colide de frente com a regra canônica da casa ("um agente consegue achar, ler e citar isto?"). Documento da SEED sai com texto real, sempre.
- Ordem de leitura e título do documento: o PDF carrega título próprio nas propriedades (não
documento1.pdf), e a ordem dos blocos na página é a ordem em que se lê. - Tabela de proposta e de laudo: cabeçalho de tabela marcado como cabeçalho, não como linha em negrito.
- Contraste igual ao da tela — a proposta impressa em preto e branco é o teste mais barato que existe: se a informação sumiu, ela estava só na cor.
- ⚠ A conformidade formal de PDF acessível tem norma própria (PDF/UA) e não foi lida nesta rodada:
[não conferido]. O que está acima é o piso prático.
18.8 Anti-padrões#
| ⛔ | por quê |
|---|---|
| Publicar imagem sem texto alternativo | a plataforma escreve um automático genérico no seu lugar |
| Vídeo sem legenda | o som nasce desligado; a peça vira imagem muda |
| Aceitar a legenda automática sem revisar | ela erra justamente nas siglas e unidades do ramo |
| Informação essencial só dentro da arte | some para quem não vê, para quem não carrega imagem e para o agente de IA |
| Texto sobre foto sem medir contraste | o defeito mais comum, e o mais fácil de conferir |
| Cor como único código de status | DG17 e errata E3 do seed-dataviz.md |
| Fonte "estilizada" de Unicode em bio ou legenda | quebra leitor de tela e busca |
| PDF escaneado | ilegível para leitor de tela, para busca e para IA |
| Achar que acessibilidade é assunto do site | a LBI obriga no site; o resto a casa faz porque é certo, e porque é a mesma pessoa do outro lado |
18.9 O que ficou de fora, e as duas pendências que nascem aqui#
- Medição com leitor de tela real (NVDA, VoiceOver, TalkBack) nas peças da casa — não foi feita. Enquanto não for, as três linhas de 18.6 marcadas
[inferência]continuam inferência. - Conteúdo das normas pagas — NBR 16452 (audiodescrição), NBR 15610-3 (Libras), NBR 17060 (apps), NBR ISO 24495-1 (linguagem simples): citadas por número,
[não conferido]. - ✅
PB-P8FECHADA em 2026-09-10, por aplicação exposta a veto (regra dele: melhoria com que ele só concordaria não é pergunta de gate). Oseed-componentes.mdv1.47 e a página/acessibilidade/da vitrine passam a citar a ABNT NBR 17225:2025 ao lado da WCAG 2.2 — ao lado, não no lugar: a WCAG é a referência técnica internacional, e quem cobra no Brasil cobra pela norma brasileira e pelo art. 63 da LBI. E a pendência destapou uma contradição entre dois canônicos: oseed-componentes.mddizia, no §0 e no §1, que o alvo de toque de 44×44 px era exigência da "WCAG 2.2 / mobile" — esta base já registrava, no §12 e aqui, que o piso de nível AA (SC 2.5.8) é 24×24 e que os 44 são o SC 2.5.5 (AAA). O número 44 continua obrigatório na casa, agora rotulado como regra SEED, mais rígida que a norma. Mesmo número, rótulo certo. - ⚠
PB-P9MEDIDA em 2026-09-10 — e a obrigação está descumprida nos dois sites. Texto lido no Planalto (Lei nº 13.146/2015, art. 63, § 1º, verbatim): "Os sítios devem conter símbolo de acessibilidade em destaque." Medição:https://ds.seed.eng.br/tem página/acessibilidade/(HTTP 200) e link no menu, mas nenhum símbolo — zero<svg>e nenhuma imagem de acessibilidade na home nem na página;https://seed.eng.br/(que desde hoje serve o site novo) não tem símbolo, não tem página (/acessibilidade→ 404) e a palavra "acessibilidade" aparece zero vez na home. O que segue: (a) o site do DS é nosso e gerado — ganha o símbolo assim que a arte for decidida, e isso é pergunta de gate, porque "símbolo de acessibilidade" não se desenha à mão: o Decreto 5.296/2004 remete ao Símbolo Internacional de Acesso da NBR 9050, e a casa não tem esse arquivo no acervo — ERRATA de 2026-09-15 (PB-P9, MANIFESTO §225.7), lida no Planalto: o Decreto 5.296/2004 NÃO remete ao SIA para sítios; o art. 47 § 2º fala em "símbolo que represente a acessibilidade na internet", sem nomear (a remissão ao SIA é para edificação e transporte); a Lei 15.459/2026 alterou a Lei 7.405/1985 e o anexo com um símbolo novo foi VETADO — o desenho vigente segue o SIA de 1968. O asset com procedência está em03-assets/acessibilidade/(fonte Wikimedia Commons, domínio público; azul #0A94D5 medido na figura da NBR 9050:2020); onde e como ele entra nos sites é gate (V-PB9.1–9.3) (03-assets/tem logos, símbolos da marca, mascote, grafismos e fontes — nada de acessibilidade); (b) o site institucional é do projeto do site — a pendência vai para a fila de lá. Um site sem o símbolo não é só inconformidade de norma: é descumprimento de lei federal em vigor desde 2016.