Módulo 04: HTML5 e CSS3 Moderno • Bloco 1: Fundamentos da Web & HTML5 Semântico

🗺️ Mapa Conceitual do Capítulo

flowchart TD
    subgraph WCAG_POUR["Os 4 Princípios Fundamentais da WCAG 2.2"]
        P["1. Perceptível (Perceivable)\n(Contraste 4.5:1 · Alt text em imagens · Legendas WebVTT)"]
        O["2. Operável (Operable)\n(100% Navegação por Teclado · Skip Links · Foco Visível · Sem Trap)"]
        U["3. Compreensível (Understandable)\n(lang='pt-BR' · Mensagens de Erro Transparentes · Previsibilidade)"]
        R["4. Robusto (Robust)\n(HTML5 Válido · Compatibilidade com Leitores de Tela NVDA/JAWS)"]
        P & O & U & R --> ACCESSIBILITY_GOLD["Conformidade WCAG Nível AA"]
    end

    subgraph ARIA_ROLES["WAI-ARIA & Componentes Nativos"]
        FIRST_RULE["1ª Regra de ARIA: Use Tags Nativas (<dialog>, <button>, <nav>)"]
        ARIA_STATES["Estados Dinâmicos: aria-expanded · aria-hidden · aria-live='polite'"]
        SKIP_LINK["Skip to Content: Atalho de Teclado no Topo da Página"]
    end

    subgraph STRUCTURED_DATA["SEO Técnico & Dados Estruturados"]
        JSON_LD["JSON-LD (Schema.org)\n(Rich Snippets para Cursos, Artigos e FAQ no Google)"]
    end

♿ 1. Os Quatro Princípios Fundamentais da WCAG 2.2 (POUR)

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.2) do W3C orientam a engenharia de software inclusiva através de 4 pilares inegociáveis:

  1. Perceptível (Perceivable): A informação e os componentes da interface não podem ser invisíveis a todos os sentidos do usuário:
    • Contraste mínimo de cor de $4.5:1$ para texto padrão e $3:1$ para texto grande ($> 18\text{pt}$ ou $14\text{pt}$ em negrito).
    • Todo conteúdo visual informativo deve possuir alternativa textual equivalente (alt).
  2. Operável (Operable): Os componentes de interface e navegação devem ser operáveis por qualquer método de entrada:
    • Navegabilidade Total por Teclado: Toda ação acessível por mouse deve ser realizável exclusivamente com as teclas Tab, Shift+Tab, Enter, Espaço e setas direcionais.
    • Sem Armadilha de Teclado (No Keyboard Trap): O foco nunca deve ficar preso em um elemento sem permitir que o usuário saia usando o teclado.
  3. Compreensível (Understandable): As informações e a operação da interface devem ser claras e previsíveis:
    • Identificação mandatória do idioma no HTML (<html lang="pt-BR">).
  4. Robusto (Robust): O conteúdo deve ser interpretado de forma confiável por uma ampla variedade de agentes de usuário e tecnologias assistivas.

Usuários que navegam exclusivamente via teclado ou leitor de tela enfrentam uma experiência exaustiva se precisarem pressionar a tecla Tab 40 vezes em links de cabeçalho e menus antes de alcançar o texto de cada nova página.

O Skip Link (Salto para o Conteúdo Principal) é o primeiro elemento focável do documento:

<!-- O primeiro elemento imediatamente após a abertura da tag <body>: -->
<a href="#conteudo-principal" class="pular-navegacao">
  Pular para o conteúdo principal
</a>

<header> ... </header>
<nav> ... menus extensos com dezenas de links ... </nav>

<!-- O destino recebe id correspondente e tabindex="-1" para aceitar foco: -->
<main id="conteudo-principal" tabindex="-1">
  <h1>Arquitetura Web Moderna</h1>
  ...
</main>

/* Fica oculto visualmente fora da tela, mas aparece assim que recebe foco via Tab: */
.pular-navegacao {
  position: absolute;
  top: -999px;
  left: 0;
  background: #000000;
  color: #ffffff;
  padding: 12px 24px;
  z-index: 10000;
  font-weight: bold;
  text-decoration: none;
}

.pular-navegacao:focus {
  top: 10px;
  left: 10px;
  outline: 3px solid #38bdf8;
}

🛡️ 3. As Cinco Regras de Ouro do WAI-ARIA

WAI-ARIA (Accessible Rich Internet Applications) é uma especificação que introduz papéis (role) e atributos (aria-*) para estender a acessibilidade:

[!IMPORTANT] A Primeira Regra de ARIA do W3C: Se puder usar um elemento ou atributo HTML nativo com a semântica necessária, use-o. NÃO reescreva um elemento HTML nativo adicionando papéis ARIA redundantes ou usando divs.

  • ✅ <button type="button">Salvar</button>
  • ❌ <div role="button" tabindex="0">Salvar</div> (Exige implementar suporte manual a cliques, tecla Enter, tecla Espaço e desativação!).

Estados Dinâmicos Cruciais:

  • aria-expanded="true/false": Informa a sintetizadores se um menu dropdown ou sanfona (accordion) está aberto ou fechado.
  • aria-hidden="true": Oculta ícones puramente decorativos (SVG / FontAwesome) para não poluir a leitura do leitor de tela com códigos sem sentido.
  • aria-live="polite": Região que anuncia atualizações assíncronas em segundo plano (ex.: contador de carrinho de compras atualizado) sem interromper a fala em andamento.

O Elemento Nativo <dialog> (Substitui Modais Complexos):

O HTML5 moderno possui a tag <dialog>, que gerencia acessibilidade nativamente:

<dialog id="modal-confirmacao">
  <h2>Confirmar Pagamento</h2>
  <p>Deseja processar a transação agora?</p>
  <button id="btn-fechar">Cancelar</button>
</dialog>

const modal = document.querySelector("#modal-confirmacao");
// Abre o modal com foco automático preso dentro dele e fundo escurecido nativo:
modal.showModal(); 
// Pressionar a tecla Esc fecha o modal nativamente sem nenhum código extra!

🔍 4. SEO Técnico e Dados Estruturados com Schema.org (JSON-LD)

Para que motores de busca exibam cartões ricos nos resultados (Rich Snippets de cursos com estrelas de avaliação, carga horária e módulos), utilizamos a marcação estruturada em formato JSON-LD:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Formação HTML5 e CSS3 Moderno",
  "description": "Curso completo de arquitetura semântica, acessibilidade WCAG e engenharia de estilos.",
  "provider": {
    "@type": "Organization",
    "name": "Portal Jekyll",
    "sameAs": "https://meudominio.com"
  },
  "educationalLevel": "Iniciante a Avançado",
  "inLanguage": "pt-BR"
}
</script>