Voltar ao Blog
    Frontend
    Acessibilidade

    WCAG 2.2 na prática: acessibilidade para interfaces reais

    Teste foco, arrastar, tamanho de alvos e autenticação acessível com critérios concretos da WCAG 2.2.

    Publicado em ·5 min de leitura·por Bernardo Gomes

    Uma interface pode passar num teste automático e continuar impossível de usar com teclado, zoom ou tecnologia assistiva. A WCAG 2.2 acrescenta critérios para problemas comuns de interação. O objetivo deste guia é ajudar a identificar falhas; conformidade depende da avaliação dos critérios aplicáveis, suas exceções e níveis, não de uma lista curta.

    Foco visível e não encoberto

    Navegue com Tab e Shift+Tab por cabeçalho, menus, formulários e diálogos. É possível saber onde está o foco? Uma barra fixa ou diálogo não deve esconder completamente o componente focado: esse é o critério Focus Not Obscured (Minimum), nível AA. A aparência do indicador também importa; o critério específico Focus Appearance é AAA. Não confunda esses níveis com a obrigação geral de foco visível.

    Toque, arraste e autenticação

    O critério Target Size (Minimum), nível AA, prevê alvos de pelo menos 24 por 24 pixels CSS ou o atendimento de uma das exceções, como espaçamento suficiente. Em telas pequenas, verifique também controles próximos e zoom. Para operações que exigem arrastar, ofereça alternativa de ponteiro simples, salvo as exceções da norma: por exemplo, botões para mover um item em uma lista.

    Na autenticação acessível, evite exigir uma tarefa de memória ou transcrição sem alternativa adequada. Permitir gerenciadores de senhas e colar códigos pode ajudar, mas confira o critério Accessible Authentication e suas exceções para cada fluxo. Não suponha que um CAPTCHA visual seja utilizável por todos.

    Um roteiro de revisão que cabe no time

    • Percorra os principais fluxos somente com teclado, incluindo abrir, fechar e retornar o foco de diálogos.
    • Teste zoom e conteúdo ampliado; procure texto cortado, controles sobrepostos e rolagem que impeça a tarefa.
    • Confira nome acessível, estado e mensagens de erro com um leitor de tela nas combinações que o público usa.
    • Teste alternativas ao arraste e estados de carregamento, erro e sucesso, não apenas a tela inicial.
    • Combine ferramentas automáticas com revisão humana e participação de pessoas com deficiência; registre passos de reprodução e correção.
    ℹ️

    WCAG é uma norma técnica. Requisitos legais variam por jurisdição e serviço; use a versão oficial e orientação adequada para determinar suas obrigações.

    Fontes