Destinatários

Content designers, UX writers, designers de produto e developers front-end que criam ou implementam conteúdo digital, e equipas que precisam de tratar a acessibilidade de conteúdo como parte do processo de design e não como revisão de última hora antes do lançamento.

Objectivos

Esta formação tem como objetivo capacitar os participantes a estruturar conteúdo semanticamente correto, a construir hierarquias de cabeçalhos coerentes, a escrever alternativas textuais e audiovisuais eficazes, e a anotar conteúdo para handoff de forma que developers consigam implementar sem ambiguidade.

Programa

A formação “Acessibilidade para UX Writers” tem o formato online live-training e a duração de 6 horas, distribuídas em 2 módulos de 3 horas cada, no formato teórico-prático e com exercícios aplicados diretamente à realidade organizacional dos formandos.

Conteúdos

• 1. Fundamentos e Estrutura Semântica

• 1.1. Enquadramento e Semântica:

  1. Conteúdo como Camada Invisível de Acessibilidade
     Por que a maioria das auditorias falha por problemas de conteúdo, não de código (alt em falta, heading escolhido por estética, link “clica aqui”).
  2. Quem Depende do Conteúdo Bem Estruturado
     Cegos e utilizadores de baixa visão, utilizadores de leitor de ecrã, dislexia e dificuldades cognitivas, navegação por voz, SEO e assistentes de voz.
  3. O que o WCAG Diz sobre Conteúdo
     Os princípios Percetível e Compreensível, e os critérios centrais desta formação.
  4. Semântica: Dar Significado ao que o Olho não Vê
     HTML semântico vs. div genérica, button vs. div estilizada, e landmarks para navegação por regiões.
  5. Listas, Tabelas e Links
     Quando usar ul, ol e dl; Tabelas de dados com th, scope e caption; O problema do “clica aqui”; a distinção entre botões e links.
  6. Exercício “Auditar e Corrigir Estrutura”
     Extrair a hierarquia de headings de uma página real como lista indentada, identificar 3 problemas de semântica e propor a correção com justificação.

• 1.2. Hierarquia de Cabeçalhos:

  1. Planeamento de Página com Page Description Diagram
     Como usar em sessões colaborativas com designers para listar o conteúdo de uma página por ordem de prioridade e nível de heading, antes do wireframe, fazendo a ponte entre estratégia de conteúdo e estrutura semântica.
  2. Como os Leitores de Ecrã Usam Headings
     Navegação por tecla H e por nível específico, e a lista de headings como índice invisível da página.
  3. A Hierarquia Correta e os Erros Mais Comuns
     H1 único por página, a regra de nunca saltar níveis, e o erro de escolher o heading pelo tamanho visual em vez da semântica.
  4. Headings em Componentes e Páginas sem H1
     Hierarquia própria em modais, cards e accordions; gestão do H1 em SPAs; o problema de páginas sem H1 ou com H1 duplicado.
  5. Exercício “Revisão de Hierarquia em Equipa”
     Criação de um Page Description Diagram para uma página real.

• 2. Alternativas, Boas Práticas e Processo

• 2.1. Alternativas Audiovisuais:

  1. Alt Text: Princípios e Casos Especiais
     Descrever o que a imagem comunica e não o que representa literalmente, quando o alt deve ficar vazio, e como tratar gráficos e diagramas complexos.
  2. Vídeo e Áudio Acessíveis
     Legendas fechadas vs. abertas, transcrições completas de conteúdo áudio, e audiodescrição para conteúdo visual relevante.
  3. Ícones e SVG Acessíveis
     Aria-label em ícones funcionais sem texto visível, title e desc em SVG inline, e aria-hidden em elementos puramente decorativos.
  4. Exercício “Criar Conteúdo Alternativo”
     Escrever o alt text de uma imagem hero, propor uma alternativa para um gráfico de dados, e reescrever 3 links genéricos com texto descritivo

• 2.2. Boas Práticas de Conteúdo e Handoff:

  1. O Papel do Content Design em Acessibilidade
     Decisões de conteúdo com impacto direto — texto de links, labels, mensagens de erro, e o content designer como primeira linha de defesa.
  2. Linguagem Clara e Microcopy
     Frases curtas e voz ativa, nível de leitura recomendado, e texto de links descritivo fora do contexto visual.
  3. Estados Dinâmicos e Conteúdo Gerado: empty states e loading states com texto explícito, e a diferença entre aria-live polite e assertive.
  4. Anotações para Handoff
     O modelo O QUÊ / PORQUÊ / COMO, e o que anotar além do design visual, com alt text, labels, mensagens de erro e idioma de elementos estrangeiros.
  5. Exercício “Anotar para Handoff”
     Anotar 4 elementos de um ecrã real (alt text, alternativa de gráfico, links, ícones) com o modelo O QUÊ/PORQUÊ/COMO e definir a prioridade de aria-live do conteúdo dinâmico.