📊 Cap 11: Acessibilidade & Redação Técnica

Docs-as-Code • Inclusão, WCAG e Experiência do Desenvolvedor

🗺️ Princípios WCAG Aplicados a Arquivos Markdown

flowchart TD
    WCAG["WCAG 2.1 / 2.2"]
    --> P1["Perceptível: Alt text descritivo para imagens e diagramas"]
    WCAG --> P2["Operável: Navegação linear por cabeçalhos e links autoexplicativos"]
    WCAG --> P3["Compreensível: Clareza instrucional, glossários e tabelas semânticas"]
    WCAG --> P4["Robusto: HTML semântico limpo interpretado por qualquer tecnologia assistiva ⚡"]

    style WCAG fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style P1 fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style P2 fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style P3 fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style P4 fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff

🎯 Slide 1: Como um Leitor de Tela Navega no Markdown?

• Pessoas cegas não leem o texto palavra por palavra do topo até o fim.

• Elas utilizam atalhos:
  • Pressionar ‘H’: Pula de cabeçalho em cabeçalho.
  • Pressionar ‘K’: Abre um menu suspenso com todos os links da página!

🎯 Slide 2: O Pecado do “Clique Aqui”

• Imagine o leitor de tela anunciando em sequência:
  • “Link: clique aqui”
  • “Link: clique aqui”

  • “Link: saiba mais”

• Regra Mandatória: O texto âncora deve descrever exatamente para onde o link aponta sem depender do parágrafo ao redor!

🎯 Slide 3: Hierarquia de Cabeçalhos não é Escolha de Design!

• Não use ### só porque achou o tamanho da fonte bonito.

• Cabeçalhos definem a árvore de tópicos:
  • H1: Título único do documento.
  • H2: Seções principais.
  • H3: Subseções de um H2.
  • Nunca salte de H1 para H3 ou de H2 para H4!