Pular para o conteúdo principal

Front-end Acessível

Introdução: acessibilidade primeiro

Este mini curso coloca acessibilidade no centro do front-end development. Aqui, acessibilidade não é etapa final: ela orienta decisões de HTML, CSS, JavaScript, conteúdo e testes.

Objetivo: construir interfaces utilizáveis por pessoas com diferentes capacidades, dispositivos, contextos e preferências de navegação.

  • Perceptível: informação visível, legível e com contraste adequado.
  • Operável: tudo funciona com teclado, foco e controles claros.
  • Compreensível: estrutura lógica, rótulos e feedback de estado.
  • Robusto: compatível com tecnologias assistivas e navegadores.

Trilha de estudo com foco em acessibilidade

Sequência sugerida para estudar em blocos de 30 a 60 minutos:

  1. Entenda os princípios da WCAG e os níveis A, AA e AAA.
  2. Pratique HTML semântico com landmarks, títulos e formulários acessíveis.
  3. Aplique CSS inclusivo com foco visível, contraste e redução de movimento.
  4. Implemente JavaScript acessível com ARIA, eventos de teclado e anúncios de estado.
  5. Faça auditoria manual e automatizada do projeto final.

Dica: ao codar cada componente, pergunte: "isso funciona com teclado? está claro para leitor de tela?"

Base A11y: padrões e parâmetros

Para front-end acessível, use WCAG 2.2 como referência principal. Em projetos reais, o alvo mais comum é nível AA.

Princípios POUR

  • Perceptível: conteúdo precisa ser percebido por diferentes sentidos.
  • Operável: navegação por teclado e foco consistente.
  • Compreensível: linguagem clara, previsibilidade e mensagens de erro úteis.
  • Robusto: HTML válido, semântica adequada e suporte a tecnologias assistivas.

Parâmetros práticos para aplicar no dia a dia

  1. Contraste de cor adequado para texto e elementos interativos.
  2. Estrutura semântica com ordem de títulos e landmarks.
  3. Todos os controles alcançáveis por teclado.
  4. Estados claros: foco, hover, erro, sucesso e carregamento.
  5. Preferências de usuário respeitadas, como redução de movimento.
Meta recomendada: WCAG 2.2 AA
Checklist mínimo: teclado + foco + contraste + semântica + feedback

Módulo 1: HTML Acessível

Use HTML semântico antes de pensar em ARIA. A regra é: elemento nativo correto primeiro, ARIA como complemento quando necessário.

Estrutura semântica essencial

  • <header>, <nav>, <main>, <footer> para landmarks de navegação.
  • <h1>...<h6> em ordem lógica, sem pular níveis sem necessidade.
  • <button> para ações e <a> para navegação.
  • <label> associado a cada campo de formulário.

Exemplo correto de botão e link

<button type="button">Salvar</button>
<a href="/perfil">Ir para perfil</a>

Exemplo acessível de formulário

<form>
    <label for="email">E-mail</label>
    <input id="email" type="email" required>
    <p id="ajuda-email">Use seu e-mail principal.</p>
    <input aria-describedby="ajuda-email" id="email2" type="email">
    <button type="submit">Enviar</button>
</form>

Checklist HTML: idioma da página definido, skip link, landmarks, rótulos, textos alternativos e nomes acessíveis para botões.

Módulo 2: CSS Inclusivo

CSS acessível garante legibilidade e previsibilidade visual para mais pessoas, incluindo baixa visão, daltonismo e sensibilidade a movimento.

Boas práticas essenciais

  • Contraste adequado entre texto e fundo.
  • Indicador de foco sempre visível com :focus-visible.
  • Evitar depender apenas de cor para transmitir informação.
  • Suporte a prefers-reduced-motion para reduzir animações.

Exemplo com foco visível e contraste

a:focus-visible,
button:focus-visible {
    outline: 3px solid #0ea5e9;
    outline-offset: 3px;
}

body {
    color: #1f2937;
    background: #ffffff;
}

Exemplo de redução de movimento

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

Módulo 3: JavaScript Acessível

No JavaScript, o foco é manter estados acessíveis: abrir e fechar componentes com semântica correta, anunciar mudanças e garantir suporte total a teclado.

Padrões recomendados

  • Atualizar aria-expanded em menus e painéis colapsáveis.
  • Mover foco para o próximo elemento relevante após uma ação.
  • Anunciar mudanças importantes em região com aria-live.
  • Fechar painéis com tecla Escape.

Exemplo: botão com estado ARIA

const botao = document.getElementById('menuBtn');
const menu = document.getElementById('menu');

botao.addEventListener('click', () => {
    const aberto = menu.classList.toggle('aberto');
    botao.setAttribute('aria-expanded', String(aberto));
});

Exemplo: anúncio de atualização

const status = document.getElementById('status');
status.textContent = 'Preferências atualizadas com sucesso.';

Lembrete: interatividade acessível depende de semântica, teclado e estado anunciado.

Seção detalhada: acessibilidade aplicada neste site

A própria página do curso implementa recursos de acessibilidade em HTML, CSS e JavaScript. Abaixo está o que foi aplicado e por que cada item importa.

1. Estrutura semântica e navegação

  • Idioma definido com lang="pt-BR" para pronúncia correta em leitores de tela.
  • Landmarks com header, nav, main e footer.
  • Skip link no topo para pular direto ao conteúdo principal.
  • Hierarquia de títulos para navegação por headings.

2. Operação por teclado

  • Menu e painel usam botões nativos e podem ser acionados por teclado.
  • Escape fecha menu e painel de acessibilidade.
  • Atalho Alt + A alterna o painel de acessibilidade.
  • Ao abrir o painel, o foco é movido para a primeira opção.

3. Estados ARIA e feedback

  • aria-expanded indica se menu e painel estão abertos.
  • aria-controls conecta o botão ao painel correspondente.
  • aria-live="polite" anuncia mudanças de tema e preferências.
  • Links externos informam "abre em nova aba" para leitores de tela.

4. Preferências visuais e sensoriais

  • Alternância de tema claro e escuro.
  • Modo de alto contraste.
  • Opção de texto maior.
  • Foco reforçado com contorno mais espesso.
  • Links sublinhados para reforço visual.
  • Redução de movimento via sistema e configuração manual.

5. Persistência e consistência

  • Preferências são salvas no navegador para manter a experiência entre visitas.
  • Existe botão para restaurar padrões de acessibilidade.

6. Checklist de conformidade prática (nível AA)

  1. Navegável por teclado sem bloqueios.
  2. Foco sempre visível e com contraste.
  3. Informações de estado disponíveis visualmente e por tecnologia assistiva.
  4. Estrutura semântica consistente em todas as seções.
  5. Respeito a preferências de movimento e contraste.

Projeto guiado: landing page acessível

Construa uma página simples aplicando acessibilidade desde o início:

  1. Estruture landmarks semânticos e títulos em ordem.
  2. Adicione skip link e menu operável por teclado.
  3. Garanta contraste e foco visível em todos os elementos interativos.
  4. Implemente painel de preferências com ARIA e anúncio de status.
  5. Audite com teste manual e ferramenta automatizada.

Meta: publicar uma página útil, inclusiva e validada com checklist de acessibilidade.

Exercícios de acessibilidade

Pratique com desafios focados em inclusão real:

  1. Transforme um menu feito com div em navegação semântica acessível.
  2. Adicione labels e mensagens de erro claras a um formulário.
  3. Implemente foco visível em botões e links usando :focus-visible.
  4. Crie um botão de abrir e fechar com aria-expanded.
  5. Adicione uma região aria-live para feedback de sucesso.
  6. Faça teste completo de teclado: Tab, Shift+Tab, Enter, Espaço e Escape.

Autoavaliação: se qualquer pessoa consegue navegar sem mouse e entender os estados da interface, você está no caminho certo.

Recursos essenciais de acessibilidade

Materiais de referência para desenvolvimento front-end acessível: