Karteikarten
e-MAG
Karten in diesem Stapel (64)
- 1◦ 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ênciaCaracterística Geral do e-MAG
- 2◦ Assegurar as todos os interessados o acesso a informação. ◦ Independente de suas capacidades físico-motoras.Objetivo MAIOR do e-MAG
- 3◦ Seguir os padrões Web ◦ Seguir as diretrizes ou recomendações de acessibilidade ◦ Realizar a avaliação de acessibilidade3 passos para o Desenvolvimento de um sítio Acessível
- 4◦ 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
- 5◦ 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
- 6◦ 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 ASESPasso 3 - Avaliação de Acessibilidade
- 7◦ 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
- 8◦ 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 elementoRecomendação 02 - Organização Lógica e Semântica
- 9◦ 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
- 10Sequê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 somente quando necessário. Verificar manualmente se o fluxo está corretoRecomendação 04 - Leitura e Tabulação
- 11◦ 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 elementosRecomendação 05 - Funções da página via teclado
- 12◦ Â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. ◦ nos links relevantes: permite atalhos por tecladoRecomendações 06 - Âncoras para blocos de conteúdo
- 13◦ Tabelas: apenas para dados tabulares ◦ para efeitos de disposição dos elementos, utilizar folhas de estiloRecomendação 07 - Tabelas não são para diagramação
- 14 Linksadjacentesnã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
- 15 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árioRecomendação 09 - Não abrir novas Instâncias
- 16Objetos programáveisScripts, 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 ◦ : 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
- 17Nã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 automaticamenteRecomendação 11 - Atualização Periódica Automática
- 18◦ Não utilizar marcações para redirecionar para uma nova página, como a meta tag refresh ◦ Redirecionamento deve ficar claro para o usuárioRecomendação 12 - Redirecionamento Automático
- 19◦ 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 dadosRecomendação 13 - Permitir Modificar Limite de Tempo
- 20◦ 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
- 21◦ 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ênciaRecomendação 15 - Alterações Temporais do Conteúdo
- 22◦ HTML: atributo lang ◦ XHTML: xml:lang.Recomendação 16 - Idioma Principal da página
- 23Oferecer um título descritivo e informativo à página ◦ Leitor de tela lerá primeiro o título ◦ Utilizar tagRecomendação 17 - Título de Página
- 24◦ 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
- 25◦ 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 linkRecomendação 19 - Descrever links
- 26◦ 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 imagemRecomendação 20 - Alternativa em texto para imagens para imagens
- 27◦ 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 altRecomendação 21 - Zonas Ativas de Mapa de Imagem
- 28◦ 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 linkRecomendação 22 - Formatos Acessíveis
- 29◦ Definir título com o elemento ◦ Deve ser o primeiro elemento após a declaração do elemento ◦ Em casos de tabelas extensas Fornecer resumo de seus dados através do atributo summaryRecomendação 23 - Títulos e Resumos de Tabela
- 30◦ Tabelas de dados simples: para os cabeçalhos e para as células de dados ◦ Agrupar as linhas de cabeçalhos, do corpo e do final. ◦ 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
- 31◦ 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 textoRecomendação 25 - Leitura e Compreensão
- 32◦ 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.
- 33Disponibilizar uma explicação para siglas, abreviaturas e palavras incomuns ◦ Utilizar a tagRecomendações 26 - Siglas e Abreviaturas
- 34Informar 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 contextoRecomendação 27 - Informar mudança de idioma
- 35◦ 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-MAGRecomendação 28 - Contraste Mínimo
- 36Nã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
- 37- 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 horizontalRecomendação 30 - Redimensionamento
- 38◦ 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 elementosRecomendação 31 - Dividir as áreas de informação
- 39Possibilitar 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
- 40◦ 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
- 41◦ 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úblicoRecomendação 35 - Audiodescrição para Vídeo
- 42◦ Mecanismo para parar, pausar, silenciar ou ajustar o volume de qualquer som que se reproduza na páginaRecomendação 36 - Fornecer Controle de Áudio para Som
- 43◦ Mecanismos para que o usuário possa pausar, parar ou ocultar tal animação, para qualquer animação que inicie automaticamenteRecomendação 37 - Fornecer Controle de Animação
- 44Fornecer 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 altRecomendação 38 - Alternativa em texto para botões
- 45As 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 valorRecomendação 39 - Associar Etiquetas
- 46◦ 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
- 47Nã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ãoRecomendação 41 - Alteração no contexto automática
- 48◦ 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 buscaRecomendação 42 - Instruções para entrada de dados
- 49Quando um erro de entrada de dados for automaticamente detectado, o item que apresenta erro deve ser identificado e descrito ao usuário por textoRecomendação 43 - Identificar erros de entrada
- 50◦ Agrupar os controles de formulário relacionados utilizando-se o elemento Para cada , fornecer uma legendaRecomendação 44 - Agrupar campos de formulário
- 51◦ CAPTCHAteste 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 computadorRecomendação 45 - Captcha Humano
- 52Apresenta 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 acessibilidadePágina de descrição com os recursos de acessibilidade
- 53◦ 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ítioAtalhos de Teclado
- 54- 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
- 55◦ 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áriosApresentação do mapa do sítio
- 56 Sempre utilizar a tag Elementos do formulário na ordem correta sem utilizar o 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, e 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 dadosApresentação de Formulário
- 57 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 imagemConteúdo Alternativo para Imagens
- 58◦ 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 linkApresentação de Documentos
- 59 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
- 60◦ Departamento de Governo Eletrônico, Faz parte da SLTI / MPOGCriador do e-MAG 3.0
- 61◦ órgãos integrantes do SISP ◦ Isto é, órgãos/entidades do poder executivo federal, pertencentes à administração direta, autárquica e fundacionalObrigado a adotar esse padrão e-Mag 3.0
- 62Baseadas em HTML 4.0 e XHTML 1.1Recomendações de uso:
- 631. Seguir os padrões web (W3C) 2. Seguir as diretrizes/recomendações de acessibilidade 3. Avaliar acessibilidadeProcesso para desenvolver um sítio acessível
- 64◦ Marcação ◦ Comportamento (DOM) ◦ Conteúdo/Informação ◦ Apresentação/Design ◦ Multimídia ◦ FormulárioClassificação das recomendações
Informationen
- Beschreibung
- HARD Específica (e-MAG / e-PING / W3C Brasil) Karteikarten am e-MAG, erstellt von Raphael Luiz Fonseca am 10/05/2014.
- Erstellt von
- Raphael Luiz Fonseca
- Aufrufe
- 27
- Bewertung