Norma brasileira

eMAG 3.1

Modelo de Acessibilidade em Governo Eletrônico — padrão obrigatório para portais da administração pública federal brasileira. Conteúdo normativo preservado com exemplos de código atualizados para HTML5/ARIA.

Versão 3.1 — Abril 2014

6 seções — 54 recomendações

Exemplos HTML5/ARIA atualizados

Sobre esta versão: O conteúdo normativo é idêntico ao eMAG 3.1 oficial publicado pelo Governo Federal. Os exemplos de código foram atualizados de HTML4/XHTML para HTML5 com atributos ARIA modernos, mantendo a conformidade com a norma e a referência aos critérios WCAG correspondentes.

Conteúdo

6 Seções de Recomendações

Selecione uma seção para ver todas as recomendações com exemplos de código.

Marcação

14 recomendações

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.11.21.3+11

Comportamento

9 recomendações

Scripts acessíveis, gerenciamento de foco, ausência de armadilhas de teclado, controle sobre conteúdo dinâmico e visibilidade do foco.

2.12.22.3+6

Conteúdo/Informação

12 recomendações

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

3.13.23.3+9

Apresentação/Design

6 recomendações

Contraste de cores, não dependência de cor, redimensionamento de texto, adaptação de espaçamento, foco visível e ausência de imagens de texto.

4.14.24.3+3

Multimídia

4 recomendações

Alternativas textuais para imagens, alternativas para áudio e vídeo, audiodescrição e controles de reprodução.

5.15.25.3+1

Formulário

9 recomendações

Labels associados, ordem de navegação, sem mudanças automáticas, identificação de erros, agrupamento com fieldset/legend, formatos de campos e confirmação de envio.

6.16.26.3+6

Estrutura

Visão Geral das Recomendações

Todas as recomendações — índice rápido

Marcação14 itens

1.1Respeitar os padrões WebA 1.2Organizar o código HTML de forma lógica e independente da aparênciaA 1.3Utilizar os elementos HTML de acordo com a especificaçãoA 1.4Identificar o idioma principal da páginaA 1.5Identificar alterações no idiomaAA 1.6Utilizar títulos e subtítulos de forma hierárquica nas páginasA 1.7Fornecer âncora para ir ao conteúdo principalA 1.8Disponibilizar todas as funções da página via tecladoA 1.9Não criar páginas com atualização automática periódicaA 1.10Não utilizar redirecionamento automático de páginasAAA 1.11Fornecer alternativa em texto para as imagens do sítioA 1.12Não utilizar apenas cor ou outros atributos sensoriais para diferenciar elementosA 1.13Assegurar que as páginas sejam usáveis sem scripts e pluginsA 1.14Disponibilizar documentos em formatos acessíveisA

Comportamento9 itens

2.1Tornar todo o conteúdo e as funcionalidades disponíveis por meio do tecladoA 2.2Garantir que os objetos programáveis sejam acessíveisA 2.3Não causar mudança de foco automática não solicitadaA 2.4Não criar armadilhas para o foco do tecladoA 2.5Fornecer atalhos de teclado para links, campos e controles importantesA 2.6Não incluir situações com intermitência de telaA 2.7Assegurar o controle do usuário sobre mudanças de conteúdoA 2.8Assegurar a visibilidade do foco do tecladoAA 2.9Disponibilizar barra de acessibilidadeA

Conteúdo/Informação12 itens

3.1Identificar o idioma principal da página e as mudanças de idiomaA 3.2Fornecer alternativa em texto para imagensA 3.3Descrever os links de forma clara e sucintaA 3.4Fornecer alternativa em texto e/ou sonora para vídeo e áudioA 3.5Fornecer controle de áudio para conteúdo em movimento ou multimídiaA 3.6Assegurar que toda informação em cor também esteja disponível sem corA 3.7Usar unidades relativas de medida no CSSAA 3.8Apresentar o conteúdo de modo legível sem folha de estilosA 3.9Oferecer alternativas para expressões matemáticas e científicasA 3.10Não usar apenas atributos sensoriais para dar instruçõesA 3.11Fornecer mecanismo de navegação consistenteAA 3.12Utilizar mapa de imagem do lado do clienteA

Apresentação/Design6 itens

4.1Oferecer contraste mínimo entre plano de fundo e primeiro planoAA 4.2Não utilizar apenas cor ou outra característica sensorial para diferenciar elementosA 4.3Permitir redimensionamento do texto sem perda de funcionalidadeAA 4.4Possibilitar adaptação de espaçamento e layoutAA 4.5Assegurar que os elementos com foco sejam sempre visíveisAA 4.6Não usar imagens de textoAA

Multimídia4 itens

5.1Fornecer alternativa em texto para toda imagemA 5.2Fornecer alternativa em texto e/ou sonora para vídeos e áudiosA 5.3Oferecer audiodescrição para vídeosA 5.4Fornecer controle de reprodução de mídiaA

Formulário9 itens

6.1Fornecer alternativa em texto para botões de imagem de formuláriosA 6.2Associar etiquetas aos seus campos correspondentesA 6.3Estabelecer uma ordem lógica de navegaçãoA 6.4Não provocar alteração automática de contexto ao focar em um elementoA 6.5Identificar e descrever erros e sugerir correçãoA 6.6Agrupar campos de formulário com fieldset e legendA 6.7Identificar o formato correto dos campos de entradaA 6.8Possibilitar que o usuário revise e confirme dados antes do envioAA 6.9Identificar claramente o botão de envio do formulárioAA

Legislação

Obrigatoriedade Legal

Portaria SLTI nº 3/2007 — Institucionaliza o eMAG como padrão obrigatório nos portais e sítios da administração pública federal brasileira.

Lei nº 13.146/2015 — LBI — Lei Brasileira de Inclusão da Pessoa com Deficiência. Capítulo II, Seção II trata de tecnologia assistiva e acessibilidade digital.

Decreto nº 5.296/2004 — Regulamenta normas para acessibilidade. Art. 47 obriga que portais e sítios da APF respeitem requisitos de acessibilidade.

ABNT NBR 17060:2022 — Norma técnica brasileira para acessibilidade em conteúdo Web, alinhada com WCAG 2.1. Complementar ao eMAG para setor privado.

Fazer auditoria com checklist Ver guia de implementação