O GoConqr está de visual novo! Conte para nós o que você achou.

Registre-se grátis

Flashcards

e-MAG

Raphael Luiz Fonseca Específica HARD Português 64 flashcards

Flashcards do conjunto (64)

  1. 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. 2◦ Assegurar as todos os interessados o acesso a informação. ◦ Independente de suas capacidades físico-motoras.Objetivo MAIOR do e-MAG
  3. 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. 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. 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. 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. 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. 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. 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
  10. 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. 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. 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. 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. 14 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
  15. 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
  16. 16Objetos 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 ◦ : 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
  17. 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. 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. 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. 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. 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. 22◦ HTML: atributo lang ◦ XHTML: xml:lang.Recomendação 16 - Idioma Principal da página
  23. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  33. 33Disponibilizar uma explicação para siglas, abreviaturas e palavras incomuns ◦ Utilizar a tagRecomendações 26 - Siglas e Abreviaturas
  34. 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. 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
  36. 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. 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. 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
  39. 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. 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. 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. 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. 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
  44. 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
  45. 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. 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
  47. 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. 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
  49. 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. 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. 51◦ 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 computadorRecomendação 45 - Captcha Humano
  52. 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. 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. 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. 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. 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. 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. 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. 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. 60◦ Departamento de Governo Eletrônico, Faz parte da SLTI / MPOGCriador do e-MAG 3.0
  61. 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
  62. 62Baseadas em HTML 4.0 e XHTML 1.1Recomendações de uso:
  63. 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. 64◦ Marcação ◦ Comportamento (DOM) ◦ Conteúdo/Informação ◦ Apresentação/Design ◦ Multimídia ◦ FormulárioClassificação das recomendações

Informações

Descrição
HARD Específica (e-MAG / e-PING / W3C Brasil) FlashCards sobre e-MAG, criado por Raphael Luiz Fonseca em 10-05-2014.
Visualizações
27
Avaliação

Fale Conosco

Sobre o que é sua mensagem?

O que você acha do novo visual?

Você gostou?