Seção 3

Conteúdo/Informação

Idioma declarado, alternativas textuais, links descritivos, alternativas para multimídia, informação não dependente de cor, unidades relativas e instruções claras.

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

3.1

Identificar o idioma principal da página e as mudanças de idioma

WCAG A3.1.1, 3.1.2

Complementa as recomendações 1.4 e 1.5. O idioma deve ser identificado no nível da página e em cada trecho em idioma diferente.

WCAG 3.1.1WCAG 3.1.2

Incorreto

<html>
  <p>Our portal provides servicos públicos.</p>
</html>

Correto

<html lang="pt-BR">
  <p>Nosso portal disponibiliza serviços públicos.</p>
  <!-- Trechos em outro idioma -->
  <p>Acesse a versão em
    <a href="/en" lang="en">English</a>.
  </p>
  <blockquote lang="en">
    "Accessibility is not a feature."
    <cite>— Ethan Marcotte</cite>
  </blockquote>
</html>

Dica

Use o atributo lang em qualquer elemento que contenha texto em idioma diferente do idioma da página. Inclui: palavras estrangeiras comuns, citações, nomes de interfaces em outros idiomas, seções bilíngues.

3.2

Fornecer alternativa em texto para imagens

WCAG A1.1.1

Ver recomendação 1.11. O texto alternativo deve descrever a informação transmitida pela imagem, não sua aparência visual.

WCAG 1.1.1

Incorreto

<img src="organograma.png" alt="organograma">
<img src="foto-governador.jpg">
<img src="seta-direita.svg">

Correto

<!-- Imagem de dados -->
<img src="organograma.png"
  alt="Organograma da Secretaria: Secretário no topo,
  seguido por 3 subsecretários e 12 coordenações"
  aria-describedby="desc-organograma">
<div id="desc-organograma" class="sr-only">
  [Descrição detalhada disponível como texto]
</div>

<!-- Foto de pessoa -->
<img src="foto-governador.jpg"
  alt="Governador Mauro Mendes durante coletiva de imprensa">

<!-- Ícone funcional -->
<img src="seta-direita.svg" alt="Próxima página">

Dica

Para imagens que funcionam como links ou botões, o alt deve descrever o destino ou ação — não a imagem. Ex.: alt="Página inicial" (não "logotipo").

3.3

Descrever os links de forma clara e sucinta

WCAG A2.4.4

O texto de um link deve indicar seu destino ou função mesmo fora do contexto. Links genéricos como "clique aqui", "saiba mais" ou "leia mais" são inacessíveis para usuários de leitores de tela.

WCAG 2.4.4

Incorreto

<!-- ❌ Links genéricos e sem contexto -->
<p>Para ver os serviços disponíveis,
  <a href="/servicos">clique aqui</a>.
</p>
<p>Decreto de regulamentação.
  <a href="/decreto.pdf">Leia mais</a>
</p>

Correto

<!-- ✓ Links descritivos e autossuficientes -->
<p>
  <a href="/servicos">
    Ver todos os serviços disponíveis
  </a>
</p>
<p>
  <a href="/decreto.pdf">
    Decreto nº 5.296/2004 — Regulamentação da acessibilidade
    <span class="meta-arquivo">(PDF, 180 KB)</span>
  </a>
</p>

Dica

Leitores de tela permitem navegar pela lista de links da página. Cada link deve fazer sentido sozinho. Se precisar de contexto adicional sem alterar o texto visível, use aria-label ou aria-describedby.

3.4

Fornecer alternativa em texto e/ou sonora para vídeo e áudio

WCAG A1.2.1, 1.2.2, 1.2.3

Vídeos devem ter legendas para usuários surdos; audiodescrição para usuários cegos. Áudios devem ter transcrição em texto.

WCAG 1.2.1WCAG 1.2.2WCAG 1.2.3

Incorreto

<!-- ❌ Vídeo sem legenda ou alternativa -->
<video src="discurso-governador.mp4"
  autoplay></video>

Correto

<!-- ✓ Vídeo com legenda e transcrição -->
<figure>
  <video controls>
    <source src="discurso.mp4" type="video/mp4">
    <track kind="captions"
      src="discurso-legendas.vtt"
      srclang="pt-BR"
      label="Português"
      default>
    <track kind="descriptions"
      src="discurso-audiodesc.vtt"
      srclang="pt-BR"
      label="Audiodescrição">
  </video>
  <figcaption>
    Discurso do Governador — 15/03/2024
    <br>
    <a href="discurso-transcricao.html">
      Transcrição completa do discurso
    </a>
  </figcaption>
</figure>

Dica

Use o formato WebVTT (.vtt) para legendas — é o padrão HTML5. Legendas automáticas (YouTube, etc.) precisam ser revisadas. A audiodescrição descreve ações visuais relevantes não transmitidas pelo áudio.

3.5

Fornecer controle de áudio para conteúdo em movimento ou multimídia

WCAG A1.4.2

Áudio que inicia automaticamente por mais de 3 segundos deve ter mecanismo de controle visível (pausar, parar ou ajustar volume) que seja o primeiro elemento focável da página.

WCAG 1.4.2

Incorreto

<!-- ❌ Áudio automático sem controle -->
<audio src="fundo-musical.mp3"
  autoplay loop>
</audio>

Correto

<!-- ✓ Áudio com controles visíveis -->
<audio controls>
  <source src="pronunciamento.mp3" type="audio/mpeg">
  <p>Seu navegador não suporta áudio HTML5.
    <a href="pronunciamento.mp3">
      Baixar áudio (MP3, 4,2 MB)
    </a>
  </p>
</audio>

<!-- Se precisar de autoplay (ex: alertas sonoros) -->
<audio id="audio-aviso" src="aviso.mp3" autoplay>
</audio>
<button onclick="document.getElementById('audio-aviso').pause()">
  Parar aviso sonoro
</button>

Dica

Evite autoplay — interfere com leitores de tela que também usam áudio. Se o autoplay for necessário, o controle de parada deve ser o primeiro item do foco na página.

3.6

Assegurar que toda informação em cor também esteja disponível sem cor

WCAG A1.4.1

Ver recomendação 1.12. Informação transmitida por cor deve ter alternativa para pessoas com daltonismo.

WCAG 1.4.1

Incorreto

<!-- ❌ Gráfico com legenda apenas em cor -->
<img src="grafico-pizza.png"
  alt="Gráfico pizza: azul=aprovados, vermelho=reprovados">

Correto

<!-- ✓ Gráfico com padrões além de cor -->
<figure>
  <img src="grafico-pizza.png"
    alt="Gráfico pizza de resultados">
  <figcaption>
    <table>
      <tr>
        <td>
          <span style="background:#0048B6;
            outline: 2px solid #000"
            aria-hidden="true">■</span>
          Aprovados: 72%
        </td>
        <td>
          <span style="background:#DC2626"
            aria-hidden="true">▲</span>
          Reprovados: 28%
        </td>
      </tr>
    </table>
  </figcaption>
</figure>

Dica

Use padrões texturais, formas e ícones em adição a cores em gráficos. Ferramentas como Coblis (coblis.com/en/coblis) simulam como diferentes tipos de daltonismo enxergam seu conteúdo.

3.7

Usar unidades relativas de medida no CSS

WCAG AA1.4.4

Tamanhos de fonte e dimensões de layout devem usar unidades relativas (rem, em, %) para respeitar as preferências de tamanho de texto do usuário.

WCAG 1.4.4

Incorreto

/* ❌ Unidades fixas em pixels */
body { font-size: 12px; }
h1 { font-size: 24px; }
.container { width: 960px; }
.sidebar { width: 200px; }

Correto

/* ✓ Unidades relativas */
:root { font-size: 100%; } /* respeita config do navegador */
body { font-size: 1rem; line-height: 1.5; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }

.container {
  max-width: 80rem;
  width: 100%;
  padding-inline: 1rem;
}

/* Media queries em em para respeitar zoom */
@media (min-width: 48em) {
  .layout { display: grid; grid-template-columns: 1fr 3fr; }
}

Dica

Usuários com baixa visão frequentemente configuram o navegador para texto maior. Unidades em pixels bloqueiam essa preferência. Use rem para fontes (relativo ao root) e em para espaçamentos locais.

3.8

Apresentar o conteúdo de modo legível sem folha de estilos

WCAG A1.3.1, 1.3.2

O conteúdo e a ordem de leitura devem fazer sentido sem CSS. Informação transmitida apenas por CSS (background-image, ::before, ::after) pode ser invisível para tecnologias assistivas.

WCAG 1.3.1WCAG 1.3.2

Incorreto

<!-- ❌ Informação apenas via CSS -->
<div class="mapa-estado"></div>
/* CSS */
.mapa-estado {
  background-image: url(mapa-mt.png);
  width: 400px; height: 300px;
}

Correto

<!-- ✓ Informação no HTML, CSS apenas visual -->
<figure>
  <img src="mapa-mt.png"
    alt="Mapa do Estado de Mato Grosso
    destacando as 5 mesorregiões">
</figure>

/* CSS aprimora, mas não é essencial */
figure img {
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

Dica

Desabilite o CSS no navegador e verifique se o conteúdo ainda é compreensível e na ordem correta. Ícones decorativos em CSS (::before com content) são invisíveis para leitores de tela — o que é desejado para decoração, mas problemático para informação.

3.9

Oferecer alternativas para expressões matemáticas e científicas

WCAG A1.1.1

Fórmulas matemáticas, equações e notação científica devem ter representação acessível em MathML ou LaTeX com leitores de tela suportados.

WCAG 1.1.1

Incorreto

<!-- ❌ Fórmula como imagem sem alternativa -->
<img src="equacao-baskara.png" alt="fórmula">

Correto

<!-- ✓ MathML nativo -->
<math xmlns="http://www.w3.org/1998/Math/MathML"
  aria-label="x = fração: menos b mais ou menos
  raiz de b ao quadrado menos 4ac,
  dividido por 2a">
  <mfrac>
    <mrow>
      <mo>-</mo><mi>b</mi>
      <mo>±</mo>
      <msqrt>
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>-</mo><mn>4</mn><mi>ac</mi>
      </msqrt>
    </mrow>
    <mrow><mn>2</mn><mi>a</mi></mrow>
  </mfrac>
</math>

<!-- Ou com MathJax + LaTeX como fallback -->
<span class="formula"
  aria-label="Fórmula de Bháskara">
  (x = rac{-b pm sqrt{b^2-4ac}}{2a})
</span>

Dica

Use MathJax (mathjax.org) para renderizar LaTeX acessível na web. Alguns leitores de tela como NVDA com MathPlayer leem MathML nativamente.

3.10

Não usar apenas atributos sensoriais para dar instruções

WCAG A1.3.3

Instruções que dependem de localização visual, cor, forma ou tamanho não funcionam para usuários de leitores de tela ou com deficiência visual.

WCAG 1.3.3

Incorreto

<!-- ❌ Instrução dependente de localização/cor -->
<p>Clique no botão <strong>verde à direita</strong>
   para confirmar.</p>
<p>Preencha os campos <em>sublinhados</em>
   da coluna da esquerda.</p>

Correto

<!-- ✓ Instrução por nome e função -->
<p>Clique em
  <strong>"Confirmar pedido"</strong>
  para finalizar sua solicitação.
</p>
<p>Preencha os campos
  marcados como <abbr title="obrigatório">*</abbr>
  obrigatórios.
</p>
<button type="submit">Confirmar pedido</button>

Dica

Referencie elementos pelo nome (texto visível), não pela posição ou aparência. "Clique no botão Enviar" é acessível. "Clique no botão azul no canto inferior direito" não é.

3.11

Fornecer mecanismo de navegação consistente

WCAG AA3.2.3

Elementos de navegação que se repetem em múltiplas páginas devem aparecer na mesma ordem e estrutura em todas as páginas. Isso facilita a orientação de usuários com deficiência cognitiva.

WCAG 3.2.3

Incorreto

<!-- ❌ Navegação em ordem diferente por página -->
<!-- Página A: -->
<nav>Início | Serviços | Notícias | Contato</nav>

<!-- Página B (mesma seção, ordem diferente): -->
<nav>Serviços | Início | Contato | Notícias</nav>

Correto

<!-- ✓ Navegação consistente em todas as páginas -->
<nav aria-label="Navegação principal">
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/servicos">Serviços</a></li>
    <li><a href="/noticias">Notícias</a></li>
    <li><a href="/contato">Contato</a></li>
  </ul>
</nav>
<!-- Mesma ordem em todas as páginas do portal -->

Dica

Use um componente de navegação compartilhado que garante consistência automaticamente. Pequenas variações são aceitáveis (ex.: destacar a página atual), mas a ordem e estrutura devem permanecer iguais.

3.12

Utilizar mapa de imagem do lado do cliente

WCAG A1.1.1, 2.4.4

Ao usar mapas de imagem com áreas clicáveis, cada área (area) deve ter texto alternativo descritivo indicando seu destino ou função.

WCAG 1.1.1WCAG 2.4.4

Incorreto

<!-- ❌ Mapa de imagem sem alternativas -->
<img src="mapa-brasil.png" usemap="#mapa-br">
<map name="mapa-br">
  <area shape="poly" coords="..." href="/sp">
  <area shape="poly" coords="..." href="/rj">
</map>

Correto

<!-- ✓ Mapa com textos alternativos e alternativa textual -->
<img src="mapa-brasil.png"
  usemap="#mapa-br"
  alt="Mapa do Brasil — selecione um estado para ver serviços">
<map name="mapa-br">
  <area shape="poly" coords="..." href="/sp"
    alt="São Paulo">
  <area shape="poly" coords="..." href="/rj"
    alt="Rio de Janeiro">
</map>
<!-- Alternativa textual para quem não vê o mapa -->
<nav aria-label="Estados brasileiros">
  <ul>
    <li><a href="/sp">São Paulo</a></li>
    <li><a href="/rj">Rio de Janeiro</a></li>
    <!-- ... -->
  </ul>
</nav>

Dica

Mapas de imagem do lado do servidor (sem usemap) são inacessíveis — o servidor recebe coordenadas x,y e não há forma de navegar por teclado. Prefira sempre mapas do lado do cliente com elements <area> ou uma alternativa em lista.

Seção anterior

2. Comportamento

Próxima seção

4. Apresentação/Design

Ver todas as seções do eMAG 3.1