Comportamento

<!-- ❌ Widget não acessível por teclado -->
<div class="abas">
  <div class="aba" onclick="mudarAba(0)">Dados</div>
  <div class="aba" onclick="mudarAba(1)">Documentos</div>
</div>
<div class="painel" id="painel-0">...</div>

<!-- ✓ Tabs com suporte ARIA e teclado -->
<div role="tablist" aria-label="Seções do portal">
  <button role="tab"
    aria-selected="true"
    aria-controls="painel-dados"
    id="tab-dados">
    Dados
  </button>
  <button role="tab"
    aria-selected="false"
    aria-controls="painel-documentos"
    id="tab-docs">
    Documentos
  </button>
</div>
<div role="tabpanel" id="painel-dados"
  aria-labelledby="tab-dados">
  ...
</div>

<!-- ❌ Canvas sem alternativa -->
<canvas id="grafico-receitas"
  width="800" height="400">
</canvas>

<!-- ✓ Canvas com alternativa semântica -->
<figure>
  <canvas id="grafico-receitas"
    role="img"
    aria-label="Gráfico de receitas 2024"
    aria-describedby="desc-grafico">
  </canvas>
  <figcaption id="desc-grafico">
    Receita total em 2024: R$ 28,4 bilhões.
    Crescimento de 12,3% em relação a 2023 (R$ 25,3 bi).
    <a href="receitas-2024.csv">
      Baixar dados em CSV
    </a>
  </figcaption>
</figure>

<!-- ❌ Foco movido automaticamente -->
<input type="text" id="digito-1" maxlength="1"
  oninput="if(this.value.length==1)
    document.getElementById('digito-2').focus()">
<input type="text" id="digito-2" maxlength="1">

<!-- ✓ Usuário controla a navegação -->
<label for="codigo-verificacao">
  Código de verificação (6 dígitos)
</label>
<input type="text" id="codigo-verificacao"
  inputmode="numeric"
  pattern="[0-9]{6}"
  maxlength="6"
  autocomplete="one-time-code"
  aria-describedby="codigo-instrucao">
<p id="codigo-instrucao">
  Digite os 6 dígitos seguidos, sem espaços.
</p>

<!-- ❌ Modal sem gerenciamento de foco -->
<div class="modal" id="modal">
  <h2>Confirmar exclusão</h2>
  <p>Deseja excluir este registro?</p>
  <button onclick="excluir()">Excluir</button>
  <!-- Tab pode sair do modal para o fundo -->
</div>

<!-- ✓ Modal com foco gerenciado -->
<dialog id="modal-exclusao"
  aria-modal="true"
  aria-labelledby="modal-titulo">
  <h2 id="modal-titulo">Confirmar exclusão</h2>
  <p>Deseja excluir este registro? Esta ação não pode ser desfeita.</p>
  <div class="acoes-modal">
    <button type="button" onclick="fecharModal()">
      Cancelar
    </button>
    <button type="button" onclick="confirmarExclusao()">
      Excluir
    </button>
  </div>
</dialog>
<!-- Usar dialog nativo ou implementar focus trap via JS -->

<!-- ❌ Sem atalhos de navegação -->
<nav>
  <a href="#conteudo">Conteúdo</a>
  <a href="#menu">Menu</a>
  <a href="#busca">Busca</a>
</nav>

<!-- ✓ Atalhos declarados e documentados -->
<div class="barra-acessibilidade">
  <a href="#conteudo-principal" accesskey="1"
    title="Atalho: Alt+1">
    Ir ao conteúdo [1]
  </a>
  <a href="#menu-principal" accesskey="2"
    title="Atalho: Alt+2">
    Ir ao menu [2]
  </a>
  <a href="#campo-busca" accesskey="3"
    title="Atalho: Alt+3">
    Ir à busca [3]
  </a>
</div>

<!-- ❌ GIF animado piscante -->
<img src="alerta-piscando.gif"
  alt="URGENTE — Prazo se encerra hoje!">

<!-- ❌ CSS com flash -->
.alerta { animation: piscar 0.2s infinite; }

<!-- ✓ Destaque sem intermitência -->
<div class="alerta-urgente" role="alert">
  <strong>Atenção:</strong>
  Prazo para inscrições se encerra hoje às 23h59.
</div>

/* CSS: transição suave, sem flash */
.alerta-urgente {
  background: #fef3cd;
  border-left: 4px solid #f59e0b;
  padding: 1rem;
  animation: fadeIn 0.3s ease;
}

<!-- ❌ Carrossel sem controles -->
<div class="carrossel" id="banner">
  <div class="slide">Destaque 1</div>
  <div class="slide">Destaque 2</div>
  <!-- Troca automática a cada 5s, sem controle -->
</div>

<!-- ✓ Carrossel com controles acessíveis -->
<section aria-label="Destaques do Portal"
  aria-roledescription="carrossel">
  <div aria-live="polite" aria-atomic="false">
    <div role="group" aria-label="Slide 1 de 3"
      aria-roledescription="slide">
      Destaque 1
    </div>
  </div>
  <div class="controles-carrossel">
    <button type="button"
      aria-label="Slide anterior">‹</button>
    <button type="button"
      id="btn-pausa"
      aria-label="Pausar rotação automática"
      aria-pressed="false">⏸</button>
    <button type="button"
      aria-label="Próximo slide">›</button>
  </div>
</section>

/* ❌ Outline removido sem alternativa */
* { outline: none; }
a:focus { outline: 0; }
button:focus { box-shadow: none; }

/* ✓ Foco visível e consistente */
:focus-visible {
  outline: 3px solid #0048B6;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Para componentes com background escuro */
.sobre-escuro:focus-visible {
  outline-color: #BFDBFE;
}

/* Nunca remova o outline sem substituição */
button:focus-visible {
  outline: 3px solid #0048B6;
  box-shadow: 0 0 0 6px rgba(0,72,182,0.2);
}

<!-- ❌ Sem barra de acessibilidade -->
<body>
  <header>
    <img src="logo.png" alt="Portal MT">
    <nav>...</nav>
  </header>

<!-- ✓ Barra de acessibilidade completa -->
<div id="barra-acessibilidade"
  role="navigation"
  aria-label="Barra de acessibilidade">
  <a href="#conteudo-principal" accesskey="1">
    Ir ao conteúdo [1]
  </a>
  <a href="#menu-principal" accesskey="2">
    Ir ao menu [2]
  </a>
  <a href="/mapa-do-site" accesskey="4">
    Mapa do site [4]
  </a>
  <button onclick="altoContraste()"
    aria-pressed="false"
    aria-label="Ativar alto contraste">
    Alto contraste
  </button>
  <button onclick="aumentarFonte()"
    aria-label="Aumentar tamanho da fonte">
    A+
  </button>
  <button onclick="diminuirFonte()"
    aria-label="Diminuir tamanho da fonte">
    A-
  </button>
</div>