Treinamento - Acessibilidade web

1.732 visualizações

Publicada em

Treinamento ministrado aos membros da Visão Tecnologia e Sistemas Jr nos dias 14 e 15 de junho na Universidade Federal de Ouro Preto - João Monlevade

Publicada em: Educação
1 comentário
3 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
1.732
No SlideShare
0
A partir de incorporações
0
Número de incorporações
23
Ações
Compartilhamentos
0
Downloads
30
Comentários
1
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Treinamento - Acessibilidade web

  1. 1. TREINAMENTOACESSIBILIDADE WEB
  2. 2. CONTATOSAline Luiza aline_gcruz@yahoo.com.br luiza.guerra@gmail.com
  3. 3. Agenda1 - Conceituação e Sensibilização 1.1 - Definição do que é acessibilidade Web 1.2 - Quem precisa de acessibilidade? 1.3 - Desafios encontrados por pessoas com deficiência 1.4 - Recursos de tecnologia assistiva 1.5 - Custos e benefícios de se implantar acessibilidade2 - Legislação 2.1 - Principais documentos 2.2 - e-Mag3 – Avaliação 3.1 - Avaliação automática 3.2 - Avaliação com especialista 3.3 - Avaliação com usuário4 - Considerações finais
  4. 4. O QUE É ACESSIBILIDADE WEB?
  5. 5. DESIGN UNIVERSAL Design total Design inclusivo Design para todos Design de produtos, serviços e ambientes que possibilitem o seu uso pelo maior número de pessoas possível, independente de idade, habilidade ou situação. Sociedade inclusiva
  6. 6. ACESSIBILIDADE WEB Desenvolver websites que possam ser utilizados por todas as pessoas, portadoras de deficiência ou não. Prover informações e serviços independente da hora, ambiente, local ou dispositivo de acesso. Todos os usuários terão igualdade de acesso a informação e funcionalidades, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.
  7. 7. ACESSIBILIDADE PARA QUEM?
  8. 8. DESAFIOS ENCONTRADOS NA NAVEGAÇÃO
  9. 9. IMAGENS SEM DESCRITIVO TEXTUAL
  10. 10. QUANTIDADE EXCESSIVA DE LINKS ANTES DOCONTEÚDO
  11. 11. IMAGENS ILUSTRATIVAS SEM DESCRIÇÃO
  12. 12. TECLADO VIRTUAL
  13. 13. CAPTCHA
  14. 14. FLASH
  15. 15. EXCESSO DE INFORMAÇÃO DESNECESSÁRIA104 PALAVRAS: 47 PALAVRAS:O questionário a seguir é destinado a colher Por favor, ajude-nos ainformações que nos ajudarão a melhorar o site e melhorar este site,adequá-lo às suas necessidades. respondendo a estasPor favor, selecione suas respostas nos menus questões. Levará apenassuspensos e nos botões de rádio abaixo. 2 ou 3 minutos paraVocê levará dois ou três minutos para preencher o completar estaquestionário. avaliação.No fim deste formulário, você pode optar por deixar Nota: Se você tiverseu nome, endereço, e número de telefone. Se você comentários oudeixar seu nome e número, poderá ser contatado interesses quepara participar de um estudo destinado a nos ajudar necessitem de umaa melhorar este site. resposta, não use esteSe você tiver comentários ou interesses que formulário. Em vezprecisem de resposta, por favor, contate o Serviço disso, contate ode Atendimento ao Cliente. Atendimento ao Cliente.
  16. 16. RECURSOS DE TECNOLOGIA ASSISTIVA Tecnologia Assistiva “É um termo ainda novo, utilizado para identificar todo o arsenal de Recursos e Serviços que contribuem para proporcionar ou ampliar habilidades funcionais de pessoas com deficiência e conseqüentemente promover Vida Independente e Inclusão” (Bersch, 2008)
  17. 17.  Leitor de tela: é um software que lê o texto que está na tela e a saída desta informação é através de um sintetizador de voz ou um display Braille. NVDA Window-Eyes VoiceOver ZoomText ChromeVox
  18. 18.  Ampliador de tela: é um software que faz ampliação de textos e imagens na tela do computador. Lente de aumento do Windows Zoomit MAGic Orca Zoomtext Magical Glass
  19. 19.  Teclado Alternativo: é um dispositivo de hardware ou software que pode ser usado por pessoas com deficiência física, que fornece um modo alternativo de dispor as teclas.
  20. 20.  Navegador com Voz: é um sistema que permite a navegação orientada pela voz. Motrix, por exemplo
  21. 21.  Player Rybená: Software que converte páginas da internet e textos em português para a Língua Brasileira de Sinais – LIBRAS.
  22. 22.  HeadMouse: software que reconhece o rosto do usuário por meio de uma webcam e usa os movimentos da face, olhos e boca para controlar o cursor do mouse na tela.
  23. 23. CUSTOS X BENEFÍCIOS DE IMPLEMENTARACESSIBILIDADE WEB CUSTO é o gasto para a realização de algo. Junto dele, temos o BENEFÍCIO que é a vantagem, o proveito disso.
  24. 24. Vídeo:Acessibilidade Web:Custo ou Benefício?
  25. 25. LEGISLAÇÃO – PRINCIPAIS DOCUMENTOS O Decreto-lei 5296 de 2 de dezembro de 2004, regulamentando as Leis n°s 10.048, que dá prioridade de atendimento às pessoas que especifica, e 10.098, que estabelece normas gerais e critérios básicos para a promoção da acessibilidade, estabelece um prazo de doze meses para a acessibilização de todos os sites da administração pública, de interesse público ou financiado pelo governo.
  26. 26.  Comitê CB-40 da ABNT, que se dedica à normatização no campo de acessibilidade, atendendo aos preceitos de desenho universal. Portaria nº 3, de 7 de maio de 2007, que institucionalizou o e-MAG no âmbito do Sistema de Administração dos Recursos de Informação e Informática - SISP, tornando sua observância obrigatória nos sítios e portais do governo brasileiro.
  27. 27.  O Decreto n° 6949, de 25 de agosto de 2009, que promulga a Convenção Internacional sobre os Direitos das Pessoas com Deficiência elaborada pelas Nações Unidas em 30 de março de 2007, definindo, em seu artigo 9°, a obrigatoriedade de promoção do acesso de pessoas com deficiência a novos sistemas e tecnologias da informação e comunicação, inclusive à Internet.
  28. 28. MARCAÇÃO
  29. 29. RECOMENDAÇÃO 1 – RESPEITAR OSPADRÕES DE DESENVOLVIMENTO WEB É essencial que, no desenvolvimento Web, sejam seguidos os padrões estabelecidos pelo W3C de forma a maximizar a compatibilidade com os atuais e futuros agentes de usuário. Declarar o DOCTYPE para HTML e XHTML. É por meio do DOCTYPE que as ferramentas de validação analisam o código e sugerem correções.
  30. 30.  As camadas lógicas devem estar separadas de acordo com suas funções. Camada de conteúdo: Linguagens de marcação Camada de apresentação visual: Folhas de estilo Camada de modificação de comportamento: Javascript e DOM
  31. 31.  Cartilha de Codificação Padrões Web e-GOV, disponível em: http://www.governoeletronico.gov.br/acoes-e- projetos/padroes-brasil-e-gov
  32. 32. RECOMENDAÇÃO 2 – ORGANIZAR O CÓDIGOHTML DE FORMA LÓGICA E SEMÂNTICA É necessário que os elementos sejam apresentados em uma ordem compreensível e que corresponda ao conteúdo desejado. As páginas que respeitam esse princípio podem ser apresentadas sem perda de significado com recursos de estilização desativados.
  33. 33.  Os leitores de tela descrevem primeiro o tipo do elemento em seguida seu conteúdo. Cabeçalhos: h1, h2, h3. Listas: ul, ol, dl. Citações: blockquote. Ênfase: strong.
  34. 34. RECOMENDAÇÃO 3 – UTILIZARCORRETAMENTE OS NÍVEIS DE CABEÇALHO Cabeçalhos utilizados de forma lógica e semântica auxiliam a leitura e compreensão do código. Existem 6 níveis de cabeçalhos, sendo o h1 o nível mais alto, correspondente ao título principal da página.
  35. 35.  É recomendado que o cabeçalho h1 seja utilizado somente uma vez por página. Os níveis h2 a h6 podem ser utilizados mais de uma vez, desde que seja respeitada a lógica textual da página.
  36. 36. RECOMENDAÇÃO 4 – ORDENAR DE FORMA LÓGICAE INTUITIVA A LEITURA E TABULAÇÃO O código HTML deve ser criado seguindo uma sequencia lógica de leitura para percorrer links, controles de formulários e objetos. É recomendável disponibilizar o bloco de conteúdo no HTML antes do bloco do menu. O atributo tabindex deve ser utilizado somente em caso de real necessidade, evitando a tabulação inconsistente.
  37. 37. Exemplo correto:Exemplo incorreto:
  38. 38. RECOMENDAÇÃO 5 – DISPONIBILIZAR TODAS ASFUNÇÕES DA PÁGINA VIA TECLADO Todas as funções da página, inclusive as funções controladas por scripts, devem estar disponíveis através do teclado. Algumas funções específicas do mouse possuem uma função correspondente via teclado.
  39. 39.  Ao utilizar múltiplos manipuladores de eventos para uma ação específica, é importante testar o resultado final em diferentes navegadores e utilizando diferentes tecnologias assistivas. Dê preferência por utilizar onclick/onkeypress ao invés de onmousedown/onkeydown.
  40. 40.  Existem funções do mouse que não possuem correspondência via teclado. Nesse caso, deve ser implementada a função de maneira alternativa, incluindo botões que executem via teclado a função equivalente. O evento onclick já funciona pelo teclado na maioria dos navegadores, através do ENTER.
  41. 41. RECOMENDAÇÃO 6 – FORNECER ÂNCORAS PARAIR DIRETO A UM BLOCO DE CONTEÚDO Devem ser fornecidas âncoras, disponíveis na barra de acessibilidade que apontem para links relevantes presentes na mesma página. Links estratégicos: Início e fim do menu, início e fim do conteúdo. Podem ser disponibilizados atalhos por teclado, utilizando o atributo accesskey nos links relevantes
  42. 42.  Atalhos estratégicos: Menu principal, conteúdo e caixa de pesquisa. Não é permitida a repetição do mesmo accesskey na mesma página.
  43. 43.  Em todos os elementos foram utilizados os atributos name e id para que as âncoras funcionassem em todos os navegadores.
  44. 44. RECOMENDAÇÃO 7 – NÃO UTILIZAR TABELASPARA DIAGRAMAÇÃO Para fins de diagramação, devem ser utilizadas as folhas de estilo. O uso das tabelas deve ser restrito à tabulação de dados.
  45. 45. RECOMENDAÇÃO 8 – SEPARAR LINKSADJACENTES Links adjacentes devem ser separados por mais do que simples espaços. É recomendado o uso de listas, onde cada elemento dentro da lista é um link.
  46. 46.  As listas podem ser estilizadas visualmente com CSS para que os itens sejam mostrados da maneira desejada. Caso os links estejam dentro de um parágrafo, pode-se utilizar virgulas, parênteses, colchetes ou outros caracteres para fazer a separação.
  47. 47. RECOMENDAÇÃO 9 – NÃO ABRIR NOVASINSTÂNCIAS SEM A SOLICITAÇÃO DO USUÁRIO A decisão de utilizar o recurso de novas instâncias (abas ou janelas) para acesso a páginas e serviços é do cidadão. Não é recomendada a utilização de:  Pop-ups  A abertura de novas abas e janelas  O uso do atributo target=“_blank”  Mudanças no controle do foco do teclado  Quaisquer outras não solicitadas pelo usuário
  48. 48. COMPORTAMENTO (DOM)
  49. 49. RECOMENDAÇÃO 10 – GARANTIR QUE OS OBJETOSPROGRAMÁVEIS SEJAM ACESSÍVEIS Deve-se garantir que scripts, Flash, conteúdos dinâmicos e outros elementos programáveis sejam acessíveis. Caso não seja possível, deve ser oferecida uma alternativa em HTML para o conteúdo. Uma forma de fornecer uma alternativa é através do elemento <noscript>.
  50. 50.  O elemento <noscript> pode ser utilizado em navegadores que não suportam scripts ou que tenham scripts desabilitados. A utilização do elemento <noscript> para um script inacessível não garante que o objeto seja acessível.
  51. 51. RECOMENDAÇÃO 11 – NÃO CRIAR PÁGINAS COMATUALIZAÇÃO AUTOMÁTICA PERIÓDICA É desaconselhada a utilização da meta tag refresh e outras formas de atualização automática. Em páginas onde o limite de tempo é absolutamente necessário, o usuário deverá ser informado que a página é atualizada automaticamente.
  52. 52. RECOMENDAÇÃO 12 – NÃO UTILIZAR OREDIRECIONAMENTO AUTOMÁTICO DE PÁGINAS Não devem ser utilizadas marcações para redirecionar o usuário a uma nova página, como a meta tag refresh. O redirecionamento sempre deve ser transparente ao usuário.
  53. 53. RECOMENDAÇÃO 13 – FORNECER ALTERNATIVAPARA MODIFICAR LIMITE DE TEMPO 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 onde o limite de tempo é absolutamente necessário
  54. 54. RECOMENDAÇÃO 14 – NÃO INCLUIRSITUAÇÕES COM INTERMITÊNCIA DE TELA Não devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes. Essa diretriz deve ser aplicada também para propagandas e elementos de publicidade de terceiros que possam fazer parte da página.
  55. 55. RECOMENDAÇÃO 15 – ASSEGURAR O CONTROLEDO USUÁRIO SOBRE AS ALTERAÇÕES TEMPORAISDO CONTEÚDO Nenhum conteúdo deve se movimentar ou ser alterado automaticamente sem o controle do usuário. Exemplo: conteúdos que se movem, rolagens, animações. Ao usuário deve ser permitido parar e reiniciar conteúdos que se movam, sem exceção.
  56. 56. CONTEÚDO/INFORMAÇÃO
  57. 57. RECOMENDAÇÃO 16 – IDENTIFICAR O IDIOMAPRINCIPAL DA PÁGINA Deve-se identificar o idioma utilizado para o conteúdo das páginas. HTML: atributo lang. XHTML: xml:lang.
  58. 58. RECOMENDAÇÃO 17 – OFERECER UM TÍTULODESCRITIVO E INFORMATIVO À PÁGINA O título da página deve ser descritivo e informativo. O conteúdo da tag <title> será a primeira informação lida pelo leitor de telas.
  59. 59. RECOMENDAÇÃO 18 – DISPONIBILIZARINFORMAÇÃO SOBRE A LOCALIZAÇÃO DO USUÁRIONA PÁGINA É necessário fornecer ao usuário orientação de onde ele está e qual o trajeto percorrido hierarquicamente para chegar na página atual. Um dos recursos utilizados é o “breadcrumbs” ou migalha de pão.
  60. 60. RECOMENDAÇÃO 19 – DESCREVER LINKSCLARA E SUCINTAMENTE É necessário identificar claramente o destino de cada link. É recomendado indicar os links que apontem para páginas fora do site em que o usuário esteja navegando. Nunca utilizar o mesmo título para links que apontem para endereços diferentes.
  61. 61. RECOMENDAÇÃO 20 – FORNECER ALTERNATIVA EMTEXTO PARA AS IMAGENS DO SÍTIO Todas as imagens da página consideradas conteúdos relevantes, devem ser descritas utilizando o atributo alt. Imagens que não transmitem conteúdo (imagens decorativas) devem ser inseridas por CSS. Para imagens complexas que necessitam de descrição mais detalhada, deve-se fornecer além do alt, uma descrição no próprio contexto ou um link para a descrição longa após a imagem.
  62. 62. RECOMENDAÇÃO 21 – FORNECER ALTERNATIVA EMTEXTO PARA AS ZONAS ATIVAS DE MAPA DE IMAGEM Para mapas de imagem do lado do cliente, devem ser fornecidas descrições através do atributo alt para cada uma das zonas ativas, ou seja, para cada um dos links que receberá o foco. É sempre recomendada a utilização de mapas de imagem do lado do cliente. Não é possível fornecer um alt para cada uma das zonas ativas de mapas de imagem do lado do servidor.
  63. 63. RECOMENDAÇÃO 22 – DISPONIBILIZARDOCUMENTOS EM FORMATOS ACESSÍVEIS Disponibilizar os documentos preferencialmente em formato HTML. Pode ser utilizado também o formato ODF, desde que seja tomado o cuidado para que seja acessível. É recomendado que seja informada a extensão e o tamanho do arquivo no próprio texto do link.
  64. 64. RECOMENDAÇÃO 23 – EM TABELAS, UTILIZARTÍTULOS E RESUMOS DE FORMA APROPRIADA O título da tabela deve ser definido pelo elemento caption e deve ser o primeiro elemento utilizado após a declaração do elemento table. Em tabelas extensas, deve ser fornecido um resumo dos dados, através do atributo summary, declarado no elemento table.
  65. 65. RECOMENDAÇÃO 24 – ASSOCIAR CÉLULAS DEDADOS ÀS CÉLULAS DE CABEÇALHO EM UMATABELA O uso apropriado do elemento th para os cabeçalhos e do elemento td para as células de dados é essencial para torná-las acessíveis. Deve-se utilizar os elementos thead, tbody e tfoot para agrupar linhas de cabeçalho, do corpo da tabela e do final, respectivamente. O W3C sugere utilizar o tfoot antes do tbody dentro da definição table, para que o rodapé possa ser renderizado antes das linhas de dados.
  66. 66. RECOMENDAÇÃO 25 – GARANTIR A LEITURA E ACOMPREENSÃO DAS INFORMAÇÕES O texto de um site deve ser de fácil leitura e compreensão. Quando o texto exigir uma capacidade de leitura mais avançada, deve ser disponibilizado informações suplementares que expliquem ou ilustrem o conteúdo principal.
  67. 67.  Técnicas a serem utilizadas:  Desenvolver apenas um tópico por parágrafo  Utilizar sentenças organizadas (sujeito, verbo, objeto)  Dividir sentenças longas em sentenças mais curtas  Evitar o uso de jargão, expressões regionais ou termos especializados  Utilizar palavras comuns  Utilizar lista de itens ao invés de palavras ou frases separadas por vírgula  Fazer referencias claras a pronomes e outras partes do documento  Utilizar preferencialmente a voz ativa
  68. 68. RECOMENDAÇÃO 26 – DISPONIBILIZAR UMAEXPLICAÇÃO PARA SIGLAS, ABREVIATURAS EPALAVRAS INCOMUNS Deve estar disponível uma explicação que identifique a forma completa ou o significado das abreviaturas e siglas. Para tal fim, é utilizada a tag abbr. Palavras ambíguas, desconhecidas ou muito específicas deverão ser definidas através de um texto adjacente, uma lista de definições ou estarem contidas em um glossário.
  69. 69. RECOMENDAÇÃO 27 – INFORMAR A MUDANÇADE IDIOMA NO CONTEÚDO Se algum elemento de uma página possuir conteúdo em um idioma diferente do principal, este deverá estar identificado pelo atributo lang. Essa recomendação não se aplica a nomes próprios ou termos técnicos que possam ser compreendidos no contexto.
  70. 70. APRESENTAÇÃO/DESIGN
  71. 71. RECOMENDAÇÃO 28 – OFERECER CONTRASTEMÍNIMO ENTRE PLANO DE FUNDO E PRIMEIROPLANO O contraste deve ser suficiente para que as informações possam ser visualizadas por pessoas com baixa visão, cromodeficiências ou que utilizam monitores de vídeo monocromáticos. É desaconselhado o uso de imagens atrás de textos. A relação de contraste entre plano de fundo e primeiro plano deve ser no mínimo 4,5:1. Check my colours (online): http://www.checkmycolours.com/
  72. 72. RECOMENDAÇÃO 29 – NÃO UTILIZAR APENAS COROU OUTRAS CARACTERÍSTICAS SENSORIAIS PARADIFERENCIAR ELEMENTOS A cor ou outras características sensoriais, como 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.
  73. 73. RECOMENDAÇÃO 30 – PERMITIR OREDIMENSIONAMENTO DE TEXTO SEM PERDA DEFUNCIONALIDADE A página deve continuar legível e funcional quando redimensionada para até 200%. Não podem ocorrer sobreposições de texto nem o aparecimento de rolagem horizontal.
  74. 74. RECOMENDAÇÃO 31 – DIVIDIR AS ÁREAS DEINFORMAÇÃO A divisão da página em grupos de conteúdo torna mais fácil a tarefa de gerenciar as informações. A divisão em blocos de conteúdo representa a base para a utilização de atalhos. Deve ser mantido um padrão de apresentação de blocos de conteúdo coerente em todas as páginas. A página inicial, em alguns casos, apresenta uma configuração diferente das demais páginas.
  75. 75. RECOMENDAÇÃO 32 – POSSIBILITAR QUE OELEMENTO EM FOCO SEJA VISUALMENTE EVIDENTE A área que recebe o foco do teclado deve ser claramente marcada. Por padrão, links e elementos de formulário já apresentam a borda destacada ao receberem o foco do teclado. Essa borda pode ser modificada via CSS, mas não deverá ser removida. :focus – define o estilo do elemento que recebe o foco do teclado, como links e elementos de formulário. :hover – define o estilo do elemento quando passa- se o mouse sobre ele. : active – define o estilo do link ativo.
  76. 76. MULTIMÍDIA
  77. 77. RECOMENDAÇÃO 33 – FORNECERALTERNATIVA PARA VÍDEO Deve haver uma alternativa sonora ou textual para vídeos que não incluem faixas de áudio. Para vídeos que contém áudio falado e no idioma natural da página, devem ser fornecidas legendas. É desejável que os vídeos com áudio apresentem alternativa na Língua Brasileira de Sinais (Libras).
  78. 78. RECOMENDAÇÃO 34 – FORNECERALTERNATIVA PARA ÁUDIO Áudio gravado deve possuir uma transcrição descritiva. Além de essencial para pessoas com deficiência auditiva, a alternativa em texto também é importante para usuários que não possuem equipamento de som.
  79. 79. RECOMENDAÇÃO 35 – OFERECERAUDIODESCRIÇÃO PARA VÍDEO PRÉ-GRAVADO Vìdeos que transmitem conteúdo visual que não está disponível na faixa de áudio devem possuir uma audiodescrição. A audiodescrição é a descrição clara e objetiva de todas as informações apresentadas de forma visual e que não fazem parte dos diálogos. Essas descrições são apresentadas nos espaços entre os diálogos e nas pausas entre as informações sonoras.
  80. 80. RECOMENDAÇÃO 36 – FORNECER CONTROLEDE ÁUDIO PARA SOM Deve ser fornecido um mecanismo para parar, pausar, silenciar ou ajustar o volume de qualquer som que se reproduza na página.
  81. 81. RECOMENDAÇÃO 37 – FORNECER CONTROLEDE ANIMAÇÃO Para qualquer animação que inicie automaticamente na página devem ser fornecidos mecanismos para que o usuário possa pausar, parar ou ocultar tal animação.
  82. 82. FORMULÁRIO
  83. 83. RECOMENDAÇÃO 38 – FORNECER ALTERNATIVA EMTEXTO PARA OS BOTÕES DE IMAGEM DEFORMULÁRIOS Botões do tipo imagem (input type=“image”), que servem para o mesmo propósito do botão do tipo submit, deve ser fornecida uma descrição textual utilizando o atributo alt.
  84. 84. RECOMENDAÇÃO 39 – ASSOCIAR ETIQUETASAOS SEUS CAMPOS As etiquetas de texto (label) devem estar associadas aos seus campos (input) correspondentes no formulário, através dos atributos for do label e id do input, os quais deverão ter o mesmo valor.
  85. 85. RECOMENDAÇÃO 40 – ESTABELECER UMAORDEM LÓGICA DE NAVEGAÇÃO Os elementos do formulário devem ser distribuídos corretamente através do código HTML, criando, assim, uma sequencia lógica de navegação. Os formulários devem primeiro ser codificados considerando a ordem lógica de navegação, depois organizados visualmente via CSS.
  86. 86. RECOMENDAÇÃO 41 – NÃO PROVOCARAUTOMATICAMENTE 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. Mudanças devem ocorrer através do acionamento de um botão.
  87. 87. RECOMENDAÇÃO 42 – FORNECERINSTRUÇÕES PARA ENTRADA DE DADOS Quando for necessário a entrada de dados por parte do usuário, devem ser fornecidas instruções de preenchimento juntamente com os labels.
  88. 88. RECOMENDAÇÃO 43 – IDENTIFICAR EDESCREVER ERROS DE 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.
  89. 89. RECOMENDAÇÃO 44 – AGRUPAR CAMPOS DEFORMULÁRIO Deverão ser agrupados os controles de formulário relacionados de maneira lógica, utilizando o elemento fieldset, associando o elemento legend de forma significativa. Para cada fieldsel é possível fornecer uma legenda que explica claramente o propósito ou a natureza dos agrupamentos.
  90. 90. RECOMENDAÇÃO 45 – FORNECERCAPTCHA HUMANO O captcha, quando utilizado, deve ser fornecido em forma de pergunta de interpretação. É preciso garantir que a pergunta não seja de difícil resolução, de forma que possa ser respondida por pessoas de variadas culturas e níveis de instrução. O captcha deve ser utilizado apenas quando estritamente necessário.
  91. 91. AVALIAÇÃO AUTOMÁTICA Validadores automáticos: softwares ou serviços onlines que ajudam a determinar se um sítio respeitou ou não as recomendações de acessibilidade. “ASES” e “Da Silva”
  92. 92. Validador Avaliação Relatório de AcessibilidadeURL
  93. 93. AVALIAÇÃO COM ESPECIALISTA Validadores por si só não determinam se um sítio está ou não acessível. Checklists de validação humana.
  94. 94. <img src=“figura.jpg” alt=“figura” />
  95. 95. AVALIAÇÃO COM USUÁRIO
  96. 96.  Realizar avaliações preliminares antes de envolver o usuário no processo de testes Direcionada Não-direcionada
  97. 97.  Registrar facilidades, dificuldades e observações do usuário Questionário Entrevista Medidas de desempenho
  98. 98. DÚVIDAS?
  99. 99. CONSIDERAÇÕES FINAIS
  100. 100. REFERÊNCIAS BIBLIOGRÁFICAS Bengala legal. Disponível em: http://www.bengalalegal.com/acessibilidade Projeto Motrix. Disponível em: http://intervox.nce.ufrj.br/motrix/ Acessibilidade Legal. Disponível em: http://acessibilidadelegal.com/ Acesso Digital. Disponível em: http://acessodigital.net/index.html BRASIL. Recomendações de acessibilidade para construção e adaptação de conteúdos do governo brasileiro na Internet: e-MAG 3.0, Modelo de Acessibilidade em Governo Eletrônico. Disponível em: http://governoeletronico.gov.br/acoes-e- projetos/e-MAG BERSCH, R. Introdução à Tecnologia Assistiva. CEDI - Centro Especializado em Desenvolvimento Infantil. Porto Alegre - RS, 2008. Disponível em: http://proeja.com/portal/images/semana-quimica/2011-10- 19/tec-assistiva.pdf
  101. 101. LINKS ÚTEIS - Palestra em vídeo - Aplicação de Diferentes Técnicas na Avaliação de Acessibilidade Web (VI EBTS - Recife): http://www.youtube.com/watch?v=H2UAdiwDR78 - Slides da palestra (VI EBTS - Recife): http://www.gotest.biz/ebts2012/download/VI-EBTS- AplicacaodeDiferentesTecnicasnaAvaliacaodeAcessibilidadeWeb-LUCINEIA.pdf - Reconhecimento de voz do Google (HTML5) –DEMONSTRAÇÃO: http://slides.html5rocks.com/#speech-input - Check my colours (Avaliação de contraste de sites): http://www.checkmycolours.com/ - Vischeck (Simulador de cromodeficiências): http://www.vischeck.com/vischeck/vischeckURL.php - Da Silva (Validador do e-Mag online): http://www.dasilva.org.br/ - ASES (Validador do e-Mag desktop): http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-e- simulador-de-acessibilidade-sitios - Jaws for Windows (Leitor de tela): http://www.freedomscientific.com/downloads/jaws/jaws-downloads.asp

×