◦ Conjunto de recomendações a ser considerado para que o processo de acessibilidade dos sítios e portais do governo brasileiro seja conduzido de forma padronizada e de fácil implementação.
◦ Tornar o conteúdo web acessível a todas as pessoas, inclusive às com deficiência

◦ Assegurar as todos os interessados o acesso a informação.
◦ Independente de suas capacidades físico-motoras.

◦ Seguir os padrões Web
◦ Seguir as diretrizes ou recomendações de acessibilidade
◦ Realizar a avaliação de acessibilidade

◦ Código deve estar dentro dos padrões Web internacionais definidos pelo W3C.
◦ Em conformidade com as normas HTML, XML, XHTML e CSS.
◦ Seguindo as regras de formatação sintática.
◦ Semântica também é muito importante cada elemento deve ser utilizado de acordo com um significado apropriado, valor e propósito.
◦ Permite interpretação uniforme seja por meio de navegadores, leitores de tela,
dispositivos móveis ou agentes de software.

◦ Destinadas aos criadores de conteúdo Web (autores de páginas e criadores de sítios) e aos programadores de ferramentas para criação de conteúdo.
◦ WCAG é um dos principais documentos na área de acessibilidade, no âmbito mundial.
◦ WCAG é uma iniciativa do WAI / W3C
◦ No âmbito nacional, o e-MAG é que norteia o desenvolvimento de sítios acessíveis.

◦ Após a construção é necessário testar para garantir a acessibilidade do site.
◦ Teste de padrões Web.
◦ Validador automático do próprio W3C.
◦ Teste das diretrizes de acessibilidade.
◦ Validação automática através de softwares ou serviços online.
◦ Ajudam a verificar se um sítio respeitou ou não as recomendações de acessibilidade.
◦ Gerando um relatório de erros.
◦ Um dos validadores é o ASES

◦ Respeitar os padrões de desenvolvimento web.
◦ Padrões Web do W3C
◦ maximizar a compatibilidade com os agentes de usuário.
◦ Declarar o DOCTYPE
◦ define qual versão do (X)HTML o documento está usando.
◦ Permite que ferramentas de validação analisem o código da página e indiquem correções.
◦ Não é permitido usar o DOCTYPE Frameset.
◦ Separar as camadas lógicas, Conteúdo (HTML), apresentação (CSS) e comportamento (Javascript e DOM)

◦ elementos em uma ordem compreensível
◦ correspondendo ao conteúdo desejado
◦ Designar os cabeçalhos (h1, h2, h3), as listas (ul, ol, dl), texto enfatizado (strong), marcação de código (code), marcação de abreviaturas (abbr), marcação de citações longas (blockquote), etc.
◦ Permite compreensão das páginas mesmo sem folhas de estilo
◦ Leitores de telas descrevem primeiro o tipo de elemento
 e depois realizam a leitura do conteúdo que está dentro desse elemento

◦ Facilitar a leitura e compreensão
◦ Leitores de tela podem navegar através dos cabeçalhos
◦ Existem seis níveis de títulos
 h1 é o mais alto: título principal da página
 cada página deve ter apenas um h1
 h1 pode ser substituído por uma imagem, mas deverá permanecer com seu conteúdo, mesmo que não visualmente, permitindo a leitura pelo leitor de tela
 Do h2 ao h6: podem ser utilizados várias vezes, mas sem excesso e com lógica textual.

Sequência lógica de leitura: para percorrer links, controles de formulários e objetos
◦ Determinada pela ordem que se encontra no código HTML.
◦ Disponibilizar o bloco de conteúdo no HTML antes do bloco de menu
 usuários navegando pelo teclado não vão precisar navegar por todos os itens de menu antes de chegar ao conteúdo.
◦ Utilizar <tabindex> somente quando necessário. Verificar manualmente se o fluxo está correto

◦ Funções javascript deverão estar disponíveis pelo teclado também
◦ Foco não deve ficar bloqueado ou fixado em um elemento da página. Possibilitar mover-se pelo teclado entre os elementos

◦ Âncoras na barra de acessibilidade: apontando para links relevantes (da mesma página)
◦ Links em lugares estratégicos. Ex: início e final do menu, do conteúdo, etc.
◦ <accesskey> nos links relevantes: permite atalhos por teclado

◦ Tabelas: apenas para dados tabulares
◦ para efeitos de disposição dos elementos, utilizar folhas de estilo

 Linksadjacentesnãousarapenasespaços para separar
◦ Usuários com leitores de tela podem ficar confusos . Recomendado o uso de listas
◦ cada elemento dentro da lista é um link, Linksdentrodotexto: utilizarvírgulas, parênteses, colchetes, etc., para fazer a separação.

 Instâncias: novas abas ou janelas
 Usuário é que deve solicitar novas instâncias
 Não devem ser utilizados:
◦ Pop-ups
◦ Abertura de novas abas ou janelas
◦ Uso do atributo target="_blank"
◦ Mudanças no controle do foco do teclado
◦ Entre outras, que não tenham sido solicitadas pelo usuário

Objetos programáveisScripts, Flash, conteúdos dinâmicos e outros
◦ Se não for possível que o elemento programável seja diretamente acessível
 Fornecer uma alternativa em HTML para o conteúdo.
◦ Garantir acesso aos recursos de tecnologia assistiva
e navegação por teclado
◦ <noscript>: alternativa para script da Web
 mostrar conteúdos em navegadores que não suportam scripts ou que tenham o script desabilitado.

Não utilizar a meta tag refresh
 nem outra forma de atualização automática.
◦ Podem confundir e desorientar os usuários
 especialmente usuários que utilizam leitores de tela
◦ Se limite de tempo absolutamente for necessário, informar ao usuário sobre atualização automática
◦ Exemplo: Num Webmail, pode-se fornecer um botão ou link para buscar novos e-mails recebidos
 Ao invés de atualizar automaticamente

◦ Não utilizar marcações para redirecionar para uma nova página, como a meta tag refresh
◦ Redirecionamento deve ficar claro para o usuário

◦ Em uma página onde há limite de tempo para realizar uma tarefa deve haver a opção de desligar, ajustar ou prolongar esse limite
◦ Essa recomendação não se aplica a eventos em que o limite de tempo é absolutamente necessário
◦ Exemplo: Inserção de dados em um formulário. O cidadão deve ter tanto tempo quanto for necessário
para o preenchimento de seus dados

◦ Não utilizar efeitos visuais piscantes, intermitentes ou cintilantes
◦ Em pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ataque epilético
◦ Aplica-se também para propaganda de terceiros inserida na página.

◦ Não devem ser disparadas automaticamente:
 Conteúdos que “se movem”, rolagens, movimentações
em geral ou animações
◦ Usuário deve ter o controle dessas movimentações
 mesmo em propagandas na página.
◦ Formas de controle:
 escolha de preferência de visualização da página
 parar e reiniciar conteúdos que se movem (TODOS)
 Controle da velocidade dos movimentos
 outros métodos acessíveis a usuários com deficiência

◦ HTML: atributo lang
◦ XHTML: xml:lang.

Oferecer um título descritivo e informativo à página
◦ Leitor de tela lerá primeiro o título
◦ Utilizar tag <title>

◦ Exemplo:
 Você está em: Página inicial > Ensino > Editais
◦ Permite ao usuário orientar-se dentro de um conjunto de páginas
 permitindo que ele saiba onde está no momento.
◦ Recurso “migalha de pão” (breadcrumbs)
 links navegáveis em forma de lista hierárquica
 permitem que o usuário saiba qual o caminho percorrido até chegar à página em que se encontra no momento.

◦ identificar claramente o destino de cada link
◦ Informar se o link remete a outro sítio.
◦ Texto do link deve fazer sentido mesmo quando
isolado do contexto da página.
◦ Evitar links do tipo “clique aqui” ou “Veja mais”
 expressão não faz sentido fora do contexto
 Pior para usuários de leitores de tela, que navegam por
links
◦ fornecer informações adicionais sobre um link no próprio texto do link

◦ Fornecer uma descrição para as imagens da página
 atributo alt
◦ Imagens decorativas (que não transmitem conteúdo) devem ser inseridas por CSS
◦ Descrição deve ser adaptada ao contexto em que a imagem se encontra
◦ alt é utilizado para descrições sintéticas
◦ Para imagens mais complexas (ex: gráficos)
 descrição no próprio contexto
 ou um link para a descrição longa após a imagem

◦ Mapas de imagem do lado do cliente: descrições para cada uma das zonas ativas
 ou seja, para cada um dos links que receberá o foco  através do atributo alt

◦ Documentos preferencialmente em HTML
◦ Arquivos para download , em formato ODF
◦ Se um arquivo for disponibilizado em PDF
 Fornecer alternativa em HTML ou ODF
 Necessário também informar a extensão e o tamanho
do arquivo no próprio texto do link

◦ Definir título com o elemento <caption>
◦ Deve ser o primeiro elemento após a declaração do
elemento <table>
◦ Em casos de tabelas extensas
 Fornecer resumo de seus dados através do atributo summary

◦ Tabelas de dados simples: <th> para os cabeçalhos e <td> para as células de dados
◦ Agrupar as linhas de cabeçalhos, do corpo e do final.  <thead> <tbody> <tfoot>
◦ W3C sugere utilizar o tfoot antes do tbody: para que o agente de usuário possa renderizar o rodapé
antes de receber todas linha de dados.

◦ Texto de um sítio deve ser de fácil leitura e compreensão
◦ Não deve exigir do usuário um nível de instrução mais avançado do que o ensino fundamental completo.
◦ Quando o texto exigir uma capacidade de leitura mais avançada, deve ser disponibilizado informações suplementares que expliquem ou ilustrem conteúdo principal
 Outra alternativa é versão simplificada do texto

◦ Evitar o uso de jargão, expressões regionais ou termos especializados que possam não ser claros para todos;
◦ Desenvolver apenas um tópico por parágrafo;
◦ Dividir sentenças longas em sentenças mais curtas;
◦ Utilizar palavras comuns no lugar de outras pouco familiares;
◦ Utilizar listas de itens ao invés de uma longa série de palavras ou frases separadas por vírgulas;
◦ Utilizar, preferencialmente, a voz ativa.

Disponibilizar uma explicação para siglas, abreviaturas e palavras incomuns
◦ Utilizar a tag <abbr

Informar mudança de idioma no conteúdo
◦ Identificar com o atributo lang
◦ Não se aplica para nomes próprios ou termos técnicos que sejam compreendidos no contexto

◦ Possibilitar visualização por pessoas com baixa visão, com cromodeficiências ou que utilizam monitores de vídeo monocromático.
◦ Não utilizar imagens atrás do texto (background), dificultam a leitura e desviam a atenção do usuário
◦ Relação de contraste mínima: 4,5 : 1
◦ Existem ferramentas gratuitas que verificam
contraste
 Capítulo 4 do documento e-MAG

Não utilizar apenas cor ou outras características sensoriais para diferenciar elementos
◦ Características sensoriais  cor, forma, tamanho, localização visual, orientação ou som

 não devem ser utilizadas como o único meio para transmitir informações, indicar uma ação, pedir uma resposta ao usuário ou distinguir um elemento visual.

- O texto não pode perder a funcionalidade
- A página deve continuar legível e funcional quando redimensionada para até 200%
 Garantir que não ocorram sobreposições de texto, nem o aparecimento de uma barra horizontal

◦ Dividir em grupos fáceis de gerenciar
◦ Exemplo comum: “topo”, “conteúdo”, “menu” e “rodapé”
◦ Manter mesma divisão nas páginas internas, Para que usuário se familiarize mais rapidamente
 Página inicial pode ter uma divisão diferente das páginas internas
 contém mais elementos

Possibilitar que o elemento com foco seja visualmente evidente
◦ A área que recebe o foco pelo teclado deve ser claramente marcada, devendo a área de seleção ser passível de ser clicada.
◦ Por padrão, links e elementos de formulário já apresentam a borda destacada ao receberem o foco do teclado.

◦ Fornecer alternativa sonora, ou textual para vídeos que não incluem áudio
◦ Fornecer legendas para vídeos com áudio falado e no idioma natural da página
◦ Desejável que os vídeos com áudio apresentem alternativa na Língua Brasileira de Sinais (Libras)

◦ Vídeos que transmitem conteúdo visual que não está disponível na faixa de áudio devem possuir uma audiodescrição.
◦ Audiodescrição: descrição clara e objetiva de todas as informações apresentadas de forma visual e que não fazem parte dos diálogos
◦ Exemplo:
Vídeo de um malabarista: narrador da audiodescrição descreve o número e o tipo de instrumentos que o malabarista utiliza, bem como as reações do público

◦ Mecanismo para parar, pausar, silenciar ou ajustar o volume de qualquer som que se reproduza na página

◦ Mecanismos para que o usuário possa pausar, parar ou ocultar tal animação, para qualquer animação que inicie automaticamente

Fornecer alternativa em texto para os botões de imagem de formulários
◦ Botões do tipo imagem (input type=”image”), que servem para o mesmo propósito do botão do tipo submit
◦ Fornecer descrição textual para o botão , atributo alt

As etiquetas de texto (label) devem estar associadas aos seus campos (input) correspondentes no formulário
Atributos
 for do label
 id do input
 Devem ter o mesmo valor

◦ Distribuir corretamente os elementos do formulário através do código HTML, Para criar uma sequência lógica de navegação
◦ Formulários devem primeiro ser codificados considerando a ordem lógica de navegação para depois serem organizados visualmente via CSS.
◦ Utilizar atributo tabindex somente quando existir real necessidade.

Não provocar automaticamente alteração no contexto
◦ Quando um elemento de formulário receber o foco, não deve ser iniciada uma mudança automática na página que confunda ou desoriente o usuário.
◦ Mudanças devem ocorrer somente quando for acionado um botão

◦ Fornecer instruções de preenchimento juntamente com as etiquetas (label)
◦ A utilização de caracteres pré-definidos em áreas
 O texto for incluído após a entrada de dados pelo usuário
de entrada de texto só deve ocorrer se:
 Ex: sugerir um outro login, caso o escolhido já exista
 A semântica do documento justifique a inclusão de texto pré-definido
 Ex: loja virtual que só vende para determinado país
 Caracteres fornecidos previamente pelo usuário. Ex: refinamento de busca

Quando um erro de entrada de dados for automaticamente detectado, o item que apresenta erro deve ser identificado e descrito ao usuário por texto

◦ Agrupar os controles de formulário relacionados
 utilizando-se o elemento <fieldset>
 Para cada <fieldset>, fornecer uma legenda <legend>

◦ CAPTCHAteste interativo humano, completamente automatizado, para distinguir computadores de seres humanos
◦ Deve ser feito em forma de pergunta de interpretação (quando utilizado)
◦ MAS a pergunta não deve ser de difícil resolução
 Perguntas de senso comum ou testes matemáticos
 “qual é a cor do céu?” ou “o fogo é quente ou frio?”
 Cuidado para os testes matemáticos não serem facilmente quebráveis por programas de computador

Apresenta os recursos de acessibilidade presentes no sítio
◦ Ex: teclas de atalho, opções de redimensionamento de texto e alto contraste, detalhes sobre testes de acessibilidade realizados no sítio
◦ Link deve estar na barra de acessibilidade

◦ permitir que usuário vá diretamente a esses pontos
◦ Os atalhos deverão funcionar através de números
precedidos da tecla padrão de cada navegador
◦ Atalhos obrigatórios:
 para ir ao conteúdo
 para ir ao menu principal
 para ir à caixa de pesquisa
◦ Dicas dos atalhos: na barra de acessibilidade e na página sobre a acessibilidade do sítio

- No topo de cada página
 Contendo os seguintes itens:
◦ Aumentar fonte
◦ Diminuir fonte
◦ Fonte normal
◦ Alto contraste
◦ Atalhos (para Menu, Conteúdo e Busca)
◦ Acessibilidade (link para a página contendo os recursos de acessibilidade do sítio)

◦ Para sítios que contenham páginas internas que não estão presentes no menu
◦ em forma de lista
 podendo conter quantos
níveis forem necessários

 Sempre utilizar a tag <form>
 Elementos do formulário na ordem correta sem utilizar o <tabindex>
 Associar as etiquetas (label) aos seus campos
 Identificar e descrever os erros de entrada de dados do usuário
 Agrupar conjuntos de informações para entrada de dados, <fieldset> e <legend>
 fornecer uma maneira de o usuário poder
verificar as informações antes que elas sejam enviadas (input) correspondentes
 Não deve ocorrer mudança no contexto quando um elemento receber o foco
 Fornecer botão de envio (submit) para enviar os dados

 Fornecer alternativa textual: atributo alt
◦ para imagens, fotos, gráficos, banners, botões de imagem, áreas ativas de mapa de imagem, CAPTCHA, etc
 Para imagens mais complexas
◦ descrição mais detalhada
◦ fornecer também uma descrição longa no próprio contexto ou em um link (claramente identificado como descrição da imagem) logo após a imagem

◦ Preferencialmente em HTML
◦ Podem ser disponibilizados para download em ODF, tomando-se os cuidados para que sejam acessíveis.
◦ Se houver necessidade de disponibilizar arquivos em PDF, fornecer alternativa em HTML ou ODF
◦ Informar a extensão e o tamanho do arquivo no
próprio texto do link

 Tabelas para fins de diagramação (Rec. 7)
 Atualizações automáticas periódicas (Rec. 11)
 Situações com intermitência de tela (Rec. 14)
 Elementos considerados depreciados
◦ frame, applet, blink, marquee, basefont, center, dir,
align, font, isindex, menu, strike, u, etc.

◦ Departamento de Governo Eletrônico, Faz parte da SLTI / MPOG

◦ órgãos integrantes do SISP
◦ Isto é, órgãos/entidades do poder executivo federal, pertencentes à administração direta, autárquica e fundacional

Baseadas em HTML 4.0 e XHTML 1.1

1. Seguir os padrões web (W3C)
2. Seguir as diretrizes/recomendações de acessibilidade
3. Avaliar acessibilidade

◦ Marcação
◦ Comportamento (DOM)
◦ Conteúdo/Informação
◦ Apresentação/Design
◦ Multimídia
◦ Formulário