Seção 1

Marcação

Uso correto de HTML semântico — padrões Web, estrutura lógica, elementos conforme especificação, idioma, hierarquia de títulos, âncoras de navegação e alternativas textuais.

1. Marcação 2. Comportamento 3. Conteúdo/Informação 4. Apresentação/Design 5. Multimídia 6. Formulário

1.1

Respeitar os padrões Web

WCAG A4.1.1

Utilizar HTML e CSS válidos segundo as especificações do W3C. Código inválido causa comportamento imprevisível em tecnologias assistivas e navegadores.

WCAG 4.1.1

Incorreto

<!-- ❌ HTML inválido e obsoleto -->
<B>Texto importante</B>
<FONT SIZE="5" COLOR="red">Destaque</FONT>
<BR><BR><BR>
<CENTER>Centralizado</CENTER>

Correto

<!-- ✓ HTML5 semântico e válido -->
<strong>Texto importante</strong>
<p class="destaque">Destaque</p>
<p>Novo parágrafo</p>
<p style="text-align:center">Centralizado via CSS</p>

Dica

Use o validador W3C (validator.w3.org) como parte do processo de desenvolvimento. Elementos obsoletos como <font>, <center>, <b>, <i> devem ser substituídos por CSS ou equivalentes semânticos.

1.2

Organizar o código HTML de forma lógica e independente da aparência

WCAG A1.3.1

A estrutura do documento deve refletir sua organização semântica, não sua aparência visual. CSS é responsável pela apresentação; HTML pela estrutura.

WCAG 1.3.1

Incorreto

<!-- ❌ Tabela usada para diagramação -->
<table width="100%" cellpadding="10">
  <tr>
    <td width="200"><img src="menu.png"></td>
    <td><font size="5"><b>Título</b></font></td>
  </tr>
</table>

Correto

<!-- ✓ Estrutura semântica com CSS para layout -->
<header>
  <nav aria-label="Menu principal">...</nav>
  <h1>Título da Página</h1>
</header>
<main id="conteudo-principal">
  ...
</main>

Dica

A ordem de leitura no código-fonte deve fazer sentido sem CSS. Use elementos de layout (header, main, nav, aside, footer) ao invés de tabelas para estruturar a página.

1.3

Utilizar os elementos HTML de acordo com a especificação

WCAG A1.3.1, 4.1.2

Cada elemento HTML tem um propósito semântico. Usar <button> para ações, <a> para navegação, <input> para campos de formulário — não divs genéricos com eventos JavaScript.

WCAG 1.3.1WCAG 4.1.2

Incorreto

<!-- ❌ Div e span para elementos interativos -->
<div class="botao" onclick="enviar()">Enviar</div>
<span class="link" onclick="navegar()">Ir para serviços</span>
<div class="campo">Nome</div>

Correto

<!-- ✓ Elementos semânticos corretos -->
<button type="submit">Enviar</button>
<a href="/servicos">Ir para serviços</a>
<label for="nome">Nome completo</label>
<input type="text" id="nome" name="nome">

Dica

Divs e spans clicáveis com JavaScript são invisíveis para tecnologias assistivas. Use os elementos HTML nativos que já possuem semântica, foco e acessibilidade incorporados.

1.4

Identificar o idioma principal da página

WCAG A3.1.1

O atributo lang no elemento <html> permite que leitores de tela utilizem a pronúncia correta do idioma, e que tradutores automáticos identifiquem o idioma original.

WCAG 3.1.1

Incorreto

<!-- ❌ Sem idioma declarado -->
<!DOCTYPE html>
<html>
  <head>
    <title>Portal do Estado</title>
  </head>
</html>

Correto

<!-- ✓ Idioma declarado -->
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <title>Portal do Estado de Mato Grosso</title>
  </head>
</html>

Dica

Use "pt-BR" para português do Brasil, "pt" para português genérico. O atributo lang é essencial para leitores de tela como NVDA e JAWS utilizarem a síntese de voz correta.

1.5

Identificar alterações no idioma

WCAG AA3.1.2

Palavras, frases ou passagens em idioma diferente do idioma principal da página devem ser marcadas com o atributo lang no elemento que as contém.

WCAG 3.1.2

Incorreto

<!-- ❌ Mudança de idioma não marcada -->
<p>Este portal usa <em>responsive design</em>
   e segue o padrão <em>mobile-first</em>.</p>

Correto

<!-- ✓ Mudanças de idioma explícitas -->
<p>Este portal usa
  <em lang="en">responsive design</em>
  e segue o padrão
  <em lang="en">mobile-first</em>.
</p>

Dica

Afeta principalmente usuários de leitores de tela — a síntese de voz pronuncia incorretamente palavras estrangeiras sem o atributo lang. Aplica também a siglas, citações e nomes próprios estrangeiros.

1.6

Utilizar títulos e subtítulos de forma hierárquica nas páginas

WCAG A1.3.1, 2.4.6

Os títulos (h1-h6) devem seguir hierarquia sequencial sem pular níveis. Títulos são usados por leitores de tela para navegar pelo documento e devem refletir a estrutura real do conteúdo.

WCAG 1.3.1WCAG 2.4.6

Incorreto

<!-- ❌ Hierarquia com saltos -->
<h1>Portal do Estado</h1>
<h3>Notícias</h3>       <!-- pulou h2 -->
<h5>Destaque do dia</h5> <!-- pulou h4 -->

Correto

<!-- ✓ Hierarquia sequencial -->
<h1>Portal do Estado de Mato Grosso</h1>
  <h2>Notícias</h2>
    <h3>Destaque do dia</h3>
    <h3>Outras notícias</h3>
  <h2>Serviços</h2>
    <h3>Serviços mais acessados</h3>

Dica

Cada página deve ter exatamente um <h1>. Não use títulos para fins estéticos — se quiser texto grande, use CSS. Usuários de leitores de tela navegam pelo documento usando atalhos de títulos.

1.7

Fornecer âncora para ir ao conteúdo principal

WCAG A2.4.1

Um link "Ir para o conteúdo" no início da página permite que usuários de teclado e leitores de tela pulem os menus de navegação repetidos e cheguem diretamente ao conteúdo principal.

WCAG 2.4.1

Incorreto

<!-- ❌ Sem âncora de pulo -->
<header>
  <nav><!-- menu com 20 links --></nav>
</header>
<main>
  <!-- conteúdo principal -->
</main>

Correto

<!-- ✓ Link de pulo para conteúdo -->
<a href="#conteudo-principal"
   class="pular-navegacao">
  Ir para o conteúdo principal
</a>
<header>
  <nav><!-- menu de navegação --></nav>
</header>
<main id="conteudo-principal" tabindex="-1">
  <!-- conteúdo principal -->
</main>

/* CSS — visível apenas no foco */
.pular-navegacao {
  position: absolute;
  left: -9999px;
}
.pular-navegacao:focus {
  left: 0; top: 0;
  padding: 0.5rem 1rem;
  background: #0048B6;
  color: white;
}

Dica

Adicione também âncoras para o menu de navegação, campo de busca e rodapé. O link deve ser o primeiro elemento focável da página. O atributo tabindex="-1" no destino garante que o foco seja movido corretamente.

1.8

Disponibilizar todas as funções da página via teclado

WCAG A2.1.1

Toda funcionalidade interativa deve ser operável apenas com o teclado. Usuários com deficiência motora frequentemente não utilizam mouse.

WCAG 2.1.1

Incorreto

<!-- ❌ Interação apenas por mouse -->
<div class="menu"
  onmouseover="mostrarSubmenu()"
  onmouseout="ocultarSubmenu()">
  Serviços
  <div class="submenu">...</div>
</div>

Correto

<!-- ✓ Operável por teclado e mouse -->
<nav>
  <button type="button"
    aria-expanded="false"
    aria-controls="submenu-servicos"
    aria-haspopup="true">
    Serviços
  </button>
  <ul id="submenu-servicos" hidden>
    <li><a href="/servico-a">Serviço A</a></li>
    <li><a href="/servico-b">Serviço B</a></li>
  </ul>
</nav>

Dica

Use elementos HTML nativos (button, a, input) que já são focáveis por teclado. Para componentes customizados, implemente os padrões ARIA Authoring Practices. Teste sempre navegando apenas com Tab, Shift+Tab, Enter e teclas de seta.

1.9

Não criar páginas com atualização automática periódica

WCAG A2.2.1, 2.2.2

Atualizações automáticas de página interrompem a leitura de usuários de leitores de tela e desorientam usuários com deficiências cognitivas. Se necessário, oferecer controle ao usuário.

WCAG 2.2.1WCAG 2.2.2

Incorreto

<!-- ❌ Atualização automática sem controle -->
<meta http-equiv="refresh" content="30">

Correto

<!-- ✓ Atualização controlada pelo usuário -->
<div role="status" aria-live="polite" id="placar">
  <p>Resultado: 2 × 1</p>
</div>
<button type="button"
  onclick="atualizarPlacar()"
  aria-controls="placar">
  Atualizar placar
</button>

<!-- Ou: oferecer controle sobre atualização automática -->
<button type="button" onclick="pausarAtualizacao()">
  Pausar atualização automática
</button>

Dica

O meta http-equiv="refresh" é proibido pelo eMAG. Use JavaScript com ARIA live regions para conteúdo dinâmico. Sempre ofereça ao usuário opção de pausar, parar ou estender tempos.

1.10

Não utilizar redirecionamento automático de páginas

WCAG AAA3.2.5

Redirecionar o usuário automaticamente para outra URL desorinta leitores de tela e usuários com deficiências cognitivas. Redirecionamentos devem ser explicitamente comunicados.

WCAG 3.2.5

Incorreto

<!-- ❌ Redirecionamento silencioso -->
<meta http-equiv="refresh"
  content="5;url=https://novo.portal.mt.gov.br">

Correto

<!-- ✓ Comunicar e permitir ação do usuário -->
<main>
  <h1>Página movida</h1>
  <p>Esta página mudou de endereço permanentemente.</p>
  <p>
    <a href="https://novo.portal.mt.gov.br">
      Acesse o novo endereço do Portal MT
    </a>
  </p>
  <p class="instrucao">
    Você será redirecionado automaticamente em
    <span id="contador">10</span> segundos.
  </p>
  <button type="button" onclick="cancelarRedirecionamento()">
    Permanecer nesta página
  </button>
</main>

Dica

Prefira redirecionamentos via configuração de servidor (301/302 HTTP). Se o redirecionamento for inevitável no cliente, avise o usuário com antecedência e forneça controle para cancelar.

1.11

Fornecer alternativa em texto para as imagens do sítio

WCAG A1.1.1

Toda imagem que transmite informação deve ter texto alternativo (alt) que descreva seu conteúdo ou função. Imagens decorativas devem ter alt vazio.

WCAG 1.1.1

Incorreto

<!-- ❌ Imagens sem alt adequado -->
<img src="brasao.png">
<img src="grafico-receitas.png" alt="imagem">
<img src="btn-buscar.png" alt="btn">

Correto

<!-- ✓ Alt descritivo e funcional -->
<!-- Imagem informativa -->
<img src="brasao.png"
  alt="Brasão do Estado de Mato Grosso">

<!-- Imagem com dados -->
<img src="grafico-receitas.png"
  alt="Gráfico de barras: Receita do estado cresceu
  12% em 2024, totalizando R$ 28 bilhões">

<!-- Imagem de botão -->
<img src="btn-buscar.png" alt="Buscar">

<!-- Imagem decorativa -->
<img src="divisor.png" alt="" role="presentation">

Dica

O alt deve descrever o PROPÓSITO da imagem, não sua aparência. Para imagens complexas (gráficos, diagramas), forneça também uma descrição longa via aria-describedby ou link para versão textual.

1.12

Não utilizar apenas cor ou outros atributos sensoriais para diferenciar elementos

WCAG A1.3.3, 1.4.1

Informações transmitidas por cor, forma, tamanho ou localização visual devem ter uma alternativa textual. Pessoas com daltonismo ou baixa visão podem não perceber essas distinções.

WCAG 1.3.3WCAG 1.4.1

Incorreto

<!-- ❌ Erro indicado apenas por cor -->
<p>Campos em <span style="color:red">vermelho</span>
   são obrigatórios.</p>

<table>
  <tr>
    <td style="background:green">Aprovado</td>
    <td style="background:red">Reprovado</td>
  </tr>
</table>

Correto

<!-- ✓ Indicadores não dependem apenas de cor -->
<p>Campos marcados com
  <abbr title="obrigatório"
    aria-label="asterisco — campo obrigatório">*</abbr>
  são obrigatórios.
</p>

<table>
  <tr>
    <td class="status-aprovado">
      <span aria-hidden="true">✓</span> Aprovado
    </td>
    <td class="status-reprovado">
      <span aria-hidden="true">✗</span> Reprovado
    </td>
  </tr>
</table>

Dica

Além de cor, use ícones, texto, padrões ou bordas para diferenciar estados. Em formulários, combine cor vermelha com ícone de erro e mensagem de texto. Teste removendo o CSS para verificar se a informação ainda é compreensível.

1.13

Assegurar que as páginas sejam usáveis sem scripts e plugins

WCAG A1.1.1

Conteúdo e funcionalidades essenciais devem estar disponíveis quando JavaScript estiver desabilitado ou quando plugins como Flash não estiverem instalados.

WCAG 1.1.1

Incorreto

<!-- ❌ Conteúdo só acessível via script -->
<noscript>
  <p>Ative o JavaScript para ver esta página.</p>
</noscript>
<object data="apresentacao.swf" type="application/x-shockwave-flash">
</object>

Correto

<!-- ✓ Conteúdo acessível com alternativa -->
<object data="apresentacao.pdf" type="application/pdf"
  title="Apresentação do Portal">
  <p>Seu navegador não exibe PDFs.
    <a href="apresentacao.pdf">Baixar apresentação (PDF, 2MB)</a>
  </p>
</object>

<!-- Para conteúdo dinâmico via JS: usar progressive enhancement -->
<div id="mapa-interativo">
  <img src="mapa-estatico.png"
    alt="Mapa dos municípios de Mato Grosso">
  <!-- JS aprimora para versão interativa se disponível -->
</div>

Dica

Adote progressive enhancement: comece com HTML funcional e aprimore com JavaScript. Conteúdo crítico não deve depender de plugins obsoletos como Flash, Silverlight ou Java applets.

1.14

Disponibilizar documentos em formatos acessíveis

WCAG A1.1.1

Documentos para download (PDF, DOC) devem ser acessíveis ou ter alternativa em formato acessível (HTML, TXT). PDFs devem ser criados com tags de acessibilidade.

WCAG 1.1.1

Incorreto

<!-- ❌ Documento sem informações de acessibilidade -->
<a href="relatorio.pdf">Relatório</a>
<a href="lei.pdf">Ver lei</a>

Correto

<!-- ✓ Documentos com metadados e alternativas -->
<a href="relatorio-2024.pdf">
  Relatório Anual 2024
  <span class="meta-arquivo">
    (PDF acessível, 3,2 MB)
  </span>
</a>

<!-- Quando o PDF não é acessível -->
<a href="lei-13146.pdf">
  Lei nº 13.146/2015 (PDF, 280 KB)
</a>
<a href="lei-13146.html" class="alt-acessivel">
  Versão HTML acessível da mesma lei
</a>

Dica

Use ferramentas como Adobe Acrobat Pro ou LibreOffice para criar PDFs com tags, ordem de leitura e texto alternativo para imagens. Prefira HTML como formato principal — é nativamente acessível.

Próxima seção

2. Comportamento

Ver todas as seções do eMAG 3.1