Lição 4 de 30

Novidades da WCAG 2.2: Os Novos Critérios W3C — Web Academy

Em 5 de outubro de 2023, o W3C publicou oficialmente a Recomendação da WCAG 2.2, marcando a maior atualização das diretrizes de acessibilidade digital dos últimos anos. Enquanto as versões anteriores focavam predominantemente em deficiências sensoriais e auditivas, a WCAG 2.2 estabelece novos padrões imperativos para três grupos frequentemente negligenciados: pessoas com deficiências cognitivas e intelectuais (déficit de atenção, perda de memória, discalculia), usuários com limitações motoras finas em smartphones e pessoas com baixa visão. Conheça agora os 9 novos critérios de sucesso e a remoção definitiva do critério obsoleto de Parsing.

📑 Índice do Conteúdo

1. Visão Geral das Mudanças: O que Há de Novo?

A WCAG 2.2 mantém a compatibilidade retroativa total com a WCAG 2.1 e 2.0 (ou seja, um site que cumpre a 2.2 atende automaticamente às versões anteriores). O documento introduziu:

9 Novos Critérios de Sucesso: Distribuídos em Nível A (2 critérios), Nível AA (4 critérios) e Nível AAA (3 critérios).
Foco em Autenticação Sem Bloqueios Cognitivos: Fim dos testes de captcha que exigem resolver quebra-cabeças ou lembrar senhas complexas sem gerenciadores.
Foco Não Oculto (Focus Not Obscured): Garantia de que barras de navegação fixas ou pop-ups de cookies não cubram o botão ou campo focado via teclado.
Área Mínima de Toque (Target Size): Proteção contra toques acidentais em botões minúsculos no mobile.
Aposentadoria Oficial do Critério 4.1.1 (Parsing): O antigo critério que exigia código HTML sem nenhum erro de validação sintática foi oficialmente removido da WCAG 2.2, pois os navegadores modernos já tratam falhas de sintaxe automaticamente de forma padronizada.

2. Os 9 Novos Critérios de Sucesso da WCAG 2.2

Nível AA
2.4.11

Focus Not Obscured (Minimum)

Quando um elemento recebe foco do teclado, ele não pode ficar 100% encoberto por conteúdos fixos (como sticky headers, banners de cookies ou botões de chat flutuantes). Pelo menos uma parte do elemento deve permanecer visível.

Nível AAA
2.4.12

Focus Not Obscured (Enhanced)

Nenhuma parte do elemento com foco pode ficar oculta por nenhum conteúdo fixo ou flutuante. O elemento deve estar 100% visível na janela do navegador.

Nível AAA
2.4.13

Focus Appearance

O anel de foco do teclado deve ter área de contorno mensurável (mínimo de 2px de espessura) e contraste de pelo menos 3:1 entre o estado focado e o estado não-focado ao redor.

Nível AA
2.5.7

Dragging Movements

Qualquer funcionalidade que exija arrastar e soltar (drag-and-drop, sliders ou quadros Kanban) deve fornecer uma alternativa com clique simples (ex: botões de “Mover para cima” / “Mover para baixo”).

Nível AA
2.5.8

Target Size (Minimum)

O tamanho do alvo interativo deve ser de no mínimo 24x24px (ou ter espaçamento circundante suficiente para que alvos vizinhos não fiquem a menos de 24px de distância), prevenindo toques errôneos em telas touch.

Nível A
3.2.6

Consistent Help

Se o site disponibilizar mecanismos de ajuda (chat de suporte, link do FAQ, telefone de contato), eles devem aparecer na mesma ordem relativa e posição em todas as páginas do portal.

Nível A
3.3.7

Redundant Entry

O usuário não pode ser forçado a digitar a mesma informação duas vezes no mesmo processo (ex: endereço de cobrança vs. endereço de entrega). O sistema deve fornecer opção de auto-preenchimento ou checkbox “Usar o mesmo endereço”.

Nível AA
3.3.8

Accessible Authentication (Minimum)

O processo de login não pode depender exclusivamente de testes cognitivos de memória ou cálculo. É obrigatório permitir colar senhas de gerenciadores (1Password, Bitwarden), usar biometria (WebAuthn/Passkeys) ou links mágicos.

Nível AAA
3.3.9

Accessible Authentication (Enhanced)

Versão aprimorada do 3.3.8: proíbe absolutamente qualquer teste de reconhecimento de objetos, imagens ou quebra-cabeças mentais durante o processo de autenticação.

3. Aplicação Prática dos Novos Critérios da WCAG 2.2

O exemplo a seguir implementa em código real as três exigências mais cobradas da WCAG 2.2: prevenção de foco encoberto com scroll-padding-top, login sem bloqueio de colar senha e eliminação de entrada redundante:

HTML5 158 linhas

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração dos Novos Critérios da WCAG 2.2</title>
  <style>
    /* 1. CRITÉRIO 2.4.11 (Focus Not Obscured):
       O scroll-padding-top garante que o topo da seção não fique
       oculto embaixo da barra fixa de 70px quando o usuário der Tab */
    html {
      scroll-padding-top: 80px;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      margin: 0;
      padding-top: 80px; /* espaço para o header fixo */
      background: #f8fafc;
      color: #0f172a;
    }
    /* Header Fixo */
    .sticky-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 70px;
      background: #ffffff;
      border-bottom: 2px solid #e2e8f0;
      display: flex;
      align-items: center;
      padding: 0 24px;
      z-index: 1000;
    }
    .container {
      max-width: 600px;
      margin: 24px auto;
      background: #ffffff;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06);
    }
    /* 2. CRITÉRIO 2.5.8 (Target Size Minimum 24x24px / 44px) */
    .btn-action {
      min-width: 36px;
      min-height: 36px; /* Supera a exigência mínima de 24x24px da WCAG 2.2 */
      padding: 8px 16px;
      background: #0284c7;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
    }
    .btn-action:focus-visible {
      outline: 3px solid #0f172a;
      outline-offset: 2px;
    }
    .form-group {
      margin-bottom: 16px;
    }
    label {
      display: block;
      font-weight: 600;
      margin-bottom: 4px;
    }
    input[type="text"], input[type="password"] {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 1rem;
    }
    /* Estilo de lista com botões para evitar arrastar e soltar (2.5.7) */
    .task-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: #f1f5f9;
      border-radius: 6px;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
 
  <!-- HEADER FIXO -->
  <header class="sticky-header">
    <span style="font-weight: bold; color: #0284c7;">App WCAG 2.2 Compliant</span>
  </header>
 
  <main class="container">
 
    <!-- SEÇÃO 1: AUTENTICAÇÃO ACESSÍVEL (CRITÉRIO 3.3.8) -->
    <h1 style="font-size: 20px; margin-top: 0;">1. Login Acessível (WCAG 2.2)</h1>
    <p style="font-size: 14px; color: #64748b;">
      Permite colar senhas sem restrições de JavaScript e suporta autocompletar do navegador.
    </p>
    <form>
      <div class="form-group">
        <label for="loginUser">E-mail ou Usuário</label>
        <input type="text" id="loginUser" autocomplete="username" required>
      </div>
      <div class="form-group">
        <label for="loginPass">Senha</label>
        <!-- IMPORTANTE: NUNCA adicionar onpaste="return false;" -->
        <input type="password" id="loginPass" autocomplete="current-password" required>
      </div>
      <button type="submit" class="btn-action">Entrar no Sistema</button>
    </form>
 
    <hr style="margin: 28px 0; border: 0; border-top: 1px solid #e2e8f0;">
 
    <!-- SEÇÃO 2: ENTRADA NÃO-REDUNDANTE (CRITÉRIO 3.3.7) -->
    <h2 style="font-size: 18px;">2. Prevenção de Entrada Redundante</h2>
    <div class="form-group">
      <label for="shippingAddress">Endereço de Entrega</label>
      <input type="text" id="shippingAddress" value="Av. Paulista, 1000 - São Paulo/SP">
    </div>
    <div class="form-group">
      <label style="font-weight: normal; cursor: pointer;">
        <input type="checkbox" id="sameAddressCheck" checked onchange="toggleBillingAddress()">
        O endereço de cobrança é o mesmo da entrega
      </label>
    </div>
    <div class="form-group" id="billingGroup" style="display: none;">
      <label for="billingAddress">Endereço de Cobrança</label>
      <input type="text" id="billingAddress">
    </div>
 
    <hr style="margin: 28px 0; border: 0; border-top: 1px solid #e2e8f0;">
 
    <!-- SEÇÃO 3: MOVIMENTO DE ARRASTAR COM ALTERNATIVA (CRITÉRIO 2.5.7) -->
    <h2 style="font-size: 18px;">3. Reordenação com Clique Simples</h2>
    <p style="font-size: 13px; color: #64748b;">
      Em vez de forçar o usuário a arrastar o item com o mouse, botões simples de clique realizam a reordenação.
    </p>
    <div class="task-item">
      <span>📁 Relatório Financeiro Q3</span>
      <div>
        <button type="button" class="btn-action" style="padding: 4px 10px; font-size: 12px;" aria-label="Mover relatório para cima">↑</button>
        <button type="button" class="btn-action" style="padding: 4px 10px; font-size: 12px;" aria-label="Mover relatório para baixo">↓</button>
      </div>
    </div>
 
  </main>
 
  <script>
    function toggleBillingAddress() {
      const check = document.getElementById('sameAddressCheck');
      const group = document.getElementById('billingGroup');
      group.style.display = check.checked ? 'none' : 'block';
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demonstração dos Novos Critérios da WCAG 2.2</title>
<style>
/* 1. CRITÉRIO 2.4.11 (Focus Not Obscured):
O scroll-padding-top garante que o topo da seção não fique
oculto embaixo da barra fixa de 70px quando o usuário der Tab */
html {
scroll-padding-top: 80px;
}
body {
font-family: system-ui, -apple-system, sans-serif;
margin: 0;
padding-top: 80px; /* espaço para o header fixo */
background: #f8fafc;
color: #0f172a;
}
/* Header Fixo */
.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: #ffffff;
border-bottom: 2px solid #e2e8f0;
display: flex;
align-items: center;
padding: 0 24px;
z-index: 1000;
}
.container {
max-width: 600px;
margin: 24px auto;
background: #ffffff;
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06);
}
/* 2. CRITÉRIO 2.5.8 (Target Size Minimum 24x24px / 44px) */
.btn-action {
min-width: 36px;
min-height: 36px; /* Supera a exigência mínima de 24x24px da WCAG 2.2 */
padding: 8px 16px;
background: #0284c7;
color: #ffffff;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
}
.btn-action:focus-visible {
outline: 3px solid #0f172a;
outline-offset: 2px;
}
.form-group {
margin-bottom: 16px;
}
label {
display: block;
font-weight: 600;
margin-bottom: 4px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 1rem;
}
/* Estilo de lista com botões para evitar arrastar e soltar (2.5.7) */
.task-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: #f1f5f9;
border-radius: 6px;
margin-bottom: 8px;
}
</style>
</head>
<body>
<!-- HEADER FIXO -->
<header class="sticky-header">
<span style="font-weight: bold; color: #0284c7;">App WCAG 2.2 Compliant</span>
</header>
<main class="container">
<!-- SEÇÃO 1: AUTENTICAÇÃO ACESSÍVEL (CRITÉRIO 3.3.8) -->
<h1 style="font-size: 20px; margin-top: 0;">1. Login Acessível (WCAG 2.2)</h1>
<p style="font-size: 14px; color: #64748b;">
Permite colar senhas sem restrições de JavaScript e suporta autocompletar do navegador.
</p>
<form>
<div class="form-group">
<label for="loginUser">E-mail ou Usuário</label>
<input type="text" id="loginUser" autocomplete="username" required>
</div>
<div class="form-group">
<label for="loginPass">Senha</label>
<!-- IMPORTANTE: NUNCA adicionar onpaste="return false;" -->
<input type="password" id="loginPass" autocomplete="current-password" required>
</div>
<button type="submit" class="btn-action">Entrar no Sistema</button>
</form>
<hr style="margin: 28px 0; border: 0; border-top: 1px solid #e2e8f0;">
<!-- SEÇÃO 2: ENTRADA NÃO-REDUNDANTE (CRITÉRIO 3.3.7) -->
<h2 style="font-size: 18px;">2. Prevenção de Entrada Redundante</h2>
<div class="form-group">
<label for="shippingAddress">Endereço de Entrega</label>
<input type="text" id="shippingAddress" value="Av. Paulista, 1000 - São Paulo/SP">
</div>
<div class="form-group">
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" id="sameAddressCheck" checked onchange="toggleBillingAddress()">
O endereço de cobrança é o mesmo da entrega
</label>
</div>
<div class="form-group" id="billingGroup" style="display: none;">
<label for="billingAddress">Endereço de Cobrança</label>
<input type="text" id="billingAddress">
</div>
<hr style="margin: 28px 0; border: 0; border-top: 1px solid #e2e8f0;">
<!-- SEÇÃO 3: MOVIMENTO DE ARRASTAR COM ALTERNATIVA (CRITÉRIO 2.5.7) -->
<h2 style="font-size: 18px;">3. Reordenação com Clique Simples</h2>
<p style="font-size: 13px; color: #64748b;">
Em vez de forçar o usuário a arrastar o item com o mouse, botões simples de clique realizam a reordenação.
</p>
<div class="task-item">
<span>📁 Relatório Financeiro Q3</span>
<div>
<button type="button" class="btn-action" style="padding: 4px 10px; font-size: 12px;" aria-label="Mover relatório para cima">↑</button>
<button type="button" class="btn-action" style="padding: 4px 10px; font-size: 12px;" aria-label="Mover relatório para baixo">↓</button>
</div>
</div>
</main>
<script>
function toggleBillingAddress() {
const check = document.getElementById('sameAddressCheck');
const group = document.getElementById('billingGroup');
group.style.display = check.checked ? 'none' : 'block';
}
</script>
</body>
</html>

Experimente as novidades da WCAG 2.2 ao vivo no editor: teste o foco sem obstrução e a reordenação por botões:

⚡ Abrir Demonstração da WCAG 2.2 no Playground Web IDE

4. Tabela Resumo dos 9 Novos Critérios da WCAG 2.2

Critério & Código	Nível	Princípio POUR	Problema Solucionado	Solução de Frontend
2.4.11 Focus Not Obscured	AA	Operável	Sticky headers ou banners cobrem o botão focado por Tab.	Declarar `scroll-padding-top` e `scroll-margin` no CSS.
2.4.12 Focus Not Obscured	AAA	Operável	Qualquer fração do foco fica escondida sob pop-ups.	Fechamento automático de modais ou redimensionamento inteligente.
2.4.13 Focus Appearance	AAA	Operável	Anéis de foco finos e indistinguíveis do fundo.	Foco com ≥ 2px de espessura e contraste ≥ 3:1.
2.5.7 Dragging Movements	AA	Operável	Usuários de teclado ou switches não conseguem arrastar elementos.	Botões de mover para cima/baixo ou menus de ordenação.
2.5.8 Target Size (Minimum)	AA	Operável	Toques acidentais em botões minúsculos no smartphone.	Área de clique de no mínimo 24x24px.
3.2.6 Consistent Help	A	Compreensível	Canais de suporte mudam de lugar entre as páginas.	Manter chat, FAQ e telefone no mesmo local do cabeçalho/rodapé.
3.3.7 Redundant Entry	A	Compreensível	Obrigar a digitação repetida da mesma informação.	Checkbox “Mesmo endereço” e reaproveitamento de dados da sessão.
3.3.8 Accessible Auth (Min)	AA	Compreensível	CAPTCHAs e bloqueio de copiar/colar senhas.	Permitir gerenciadores de senha, WebAuthn e biometria.
3.3.9 Accessible Auth (Enh)	AAA	Compreensível	Exigência de identificar imagens ou símbolos no login.	Autenticação exclusivamente transparente ou biométrica sem enigmas.

💡 Crime Contra a Usabilidade: Bloqueio de Copiar e Colar

Por que `onpaste="return false;"` Agora Reprova Seu Site na WCAG 2.2

Durante anos, programadores desavisados inseriram onpaste="return false;" em campos de senha sob o falso pretexto de “segurança”.

Na prática, essa atitude força usuários com deficiência cognitiva ou perda de memória a digitar senhas fracas como “123456”, além de bloquear cegos que utilizam gerenciadores de senhas por voz. Com o Critério 3.3.8 da WCAG 2.2, qualquer script que bloqueie a colagem de texto em campos de login é considerado uma falha grave de conformidade legal. Permita sempre o colar e confie no hashing blindado do seu backend!

🛠️ Laboratório Prático & Prática Imediata

Aplique o que você aprendeu nesta lição

Utilize nossas ferramentas online gratuitas para experimentar os conceitos ou teste o código ao vivo no Playground IDE.

💻 Desenvolvedor & Código

Editor de Códigos Web Online

Ambiente com destaque de sintaxe para você testar tags, tabelas e scripts na hora.

Abrir Ferramenta Online

⚡ Live Code Studio

Playground Web Online

Escreva seu código HTML, CSS ou JavaScript e veja o resultado renderizado ao vivo no navegador com zero configuração.

⚡ Codificar no Playground IDE