e-MAG

Question	Answer
◦ 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	Característica Geral do e-MAG
◦ Assegurar as todos os interessados o acesso a informação. ◦ Independente de suas capacidades físico-motoras.	Objetivo MAIOR do e-MAG
◦ Seguir os padrões Web ◦ Seguir as diretrizes ou recomendações de acessibilidade ◦ Realizar a avaliação de acessibilidade	3 passos para o Desenvolvimento de um sítio Acessível
◦ 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.	Passo 1 - Padrões WEB
◦ 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.	Passo 2 - Diretrizes ou recomendações de acessibilidade
◦ 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	Passo 3 - Avaliação de Acessibilidade
◦ 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)	Recomendação 01 - Padrões WEB
◦ 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	Recomendação 02 - Organização Lógica e Semântica
◦ 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.	Recomendação 03 - Níveis de Cabeçalho
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	Recomendação 04 - Leitura e Tabulação
◦ 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	Recomendação 05 - Funções da página via teclado
◦ Â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	Recomendações 06 - Âncoras para blocos de conteúdo
◦ Tabelas: apenas para dados tabulares ◦ para efeitos de disposição dos elementos, utilizar folhas de estilo	Recomendação 07 - Tabelas não são para diagramação
 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.	Recomendação 08 - Seperar links adjacentes
 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	Recomendação 09 - Não abrir novas Instâncias
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.	Recomendação 10 - Objetos programáveis acessíveis
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	Recomendação 11 - Atualização Periódica Automática
◦ 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	Recomendação 12 - Redirecionamento Automático
◦ 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	Recomendação 13 - Permitir Modificar Limite de Tempo
◦ 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.	Recomendação 14 - Intermintência de Tela
◦ 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	Recomendação 15 - Alterações Temporais do Conteúdo
◦ HTML: atributo lang ◦ XHTML: xml:lang.	Recomendação 16 - Idioma Principal da página
Oferecer um título descritivo e informativo à página ◦ Leitor de tela lerá primeiro o título ◦ Utilizar tag <title>	Recomendação 17 - Título de Página
◦ 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.	Recomendação 18 - Localização do usuário na página
◦ 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	Recomendação 19 - Descrever links
◦ 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	Recomendação 20 - Alternativa em texto para imagens para imagens
◦ 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	Recomendação 21 - Zonas Ativas de Mapa de Imagem
◦ 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	Recomendação 22 - Formatos Acessíveis
◦ 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	Recomendação 23 - Títulos e Resumos de Tabela
◦ 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.	Recomendação 24 - Associação de Células nas tabelas
◦ 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	Recomendação 25 - Leitura e Compreensão
◦ 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.	Exemplos de uma boa Leitura e Compreensão.
Disponibilizar uma explicação para siglas, abreviaturas e palavras incomuns ◦ Utilizar a tag <abbr	Recomendações 26 - Siglas e Abreviaturas
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	Recomendação 27 - Informar mudança de idioma
◦ 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	Recomendação 28 - Contraste Mínimo
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.	Recomendação 29 - Diferenciar Elementos
- 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	Recomendação 30 - Redimensionamento
◦ 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	Recomendação 31 - Dividir as áreas de informação
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.	Recomendação 32 - Elemento com foco em evidência
◦ 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)	Recomendação 33 - Alternativa para vídeo
◦ 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	Recomendação 35 - Audiodescrição para Vídeo
◦ Mecanismo para parar, pausar, silenciar ou ajustar o volume de qualquer som que se reproduza na página	Recomendação 36 - Fornecer Controle de Áudio para Som
◦ Mecanismos para que o usuário possa pausar, parar ou ocultar tal animação, para qualquer animação que inicie automaticamente	Recomendação 37 - Fornecer Controle de Animação
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	Recomendação 38 - Alternativa em texto para botões
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	Recomendação 39 - Associar Etiquetas
◦ 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.	Recomendação 40 - Ordem de Navegação
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	Recomendação 41 - Alteração no contexto automática
◦ 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	Recomendação 42 - Instruções para entrada de dados
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	Recomendação 43 - Identificar erros de entrada
◦ Agrupar os controles de formulário relacionados  utilizando-se o elemento <fieldset>  Para cada <fieldset>, fornecer uma legenda <legend>	Recomendação 44 - Agrupar campos de formulário
◦ 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	Recomendação 45 - Captcha Humano
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	Página de descrição com os recursos 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	Atalhos de Teclado
- 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)	Barra de Acessibilidade
◦ 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	Apresentação do mapa do sítio
 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	Apresentação de Formulário
 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	Conteúdo Alternativo para Imagens
◦ 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	Apresentação de Documentos
 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.	Elementos que não devem ser utilizados
◦ Departamento de Governo Eletrônico, Faz parte da SLTI / MPOG	Criador do e-MAG 3.0
◦ órgãos integrantes do SISP ◦ Isto é, órgãos/entidades do poder executivo federal, pertencentes à administração direta, autárquica e fundacional	Obrigado a adotar esse padrão e-Mag 3.0
Baseadas em HTML 4.0 e XHTML 1.1	Recomendações de uso:
1. Seguir os padrões web (W3C) 2. Seguir as diretrizes/recomendações de acessibilidade 3. Avaliar acessibilidade	Processo para desenvolver um sítio acessível
◦ Marcação ◦ Comportamento (DOM) ◦ Conteúdo/Informação ◦ Apresentação/Design ◦ Multimídia ◦ Formulário	Classificação das recomendações

Next up

Description

Resource summary

Similar

	Created by Raphael Luiz Fonseca over 10 years ago