Your SlideShare is downloading. ×
Palestra: Acessibilidade na web -  Iran Pontes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Palestra: Acessibilidade na web - Iran Pontes

1,029
views

Published on

Palestra sobre Acessibilidade na Web ministrada por Iran Pontes na EXPODESIGN UNIBRATEC - 2012

Palestra sobre Acessibilidade na Web ministrada por Iran Pontes na EXPODESIGN UNIBRATEC - 2012

Published in: Education

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,029
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ACESSIBILIDADE NA WEBORIENTAÇÕES, DICAS E APLICAÇÕES IRAN PONTES | iranpontes.com/palestra 1
  • 2. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES MAS AFINAL, O QUE É ACESSIBILIDADE?IRAN PONTES | 2iranpontes.com/palestra
  • 3. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES MAS AFINAL, O QUE É ACESSIBILIDADE? Segundo a lei no 10.098, de 19 de dezembro de 2000, acessibilidade está relacionada em FORNECER CONDIÇÃO PARA UTILIZAÇÃO, COM SEGURANÇA E AUTONOMIA, TOTAL OU ASSISTIDA, dos espaços, mobiliários e equipamentos urbanos, das edificações, dos serviços de transporte E DOS DISPOSITIVOS, SISTEMAS E MEIOS DE COMUNICAÇÃO E INFORMAÇÃO, por pessoa portadora de deficiência ou com mobilidade reduzida.IRAN PONTES | 3iranpontes.com/palestra
  • 4. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES E ACESSIBILIDADE NA WEB?IRAN PONTES | 4iranpontes.com/palestra
  • 5. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES ACESSIBILIDADE PAR A A WEB CONSISTE EM APLICAR CONDIÇÕES PAR A UTILIZAÇÃO EM SISTEMAS PAR A WEB (SITES).IRAN PONTES | 5iranpontes.com/palestra
  • 6. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES ACESSIBILIDADE NA WEB “ACESSIBILIDADE NA WEB É TORNAR TODOS OS SERVIÇOS, ASSUNTOS E PUBLICAÇÕES TÃO FÁCEIS DE SEREM UTILIZADOS POR TODAS AS PESSOAS, QUE ATÉ ESQUECEREMOS QUE HÁ DIFERENÇAS.” (CARLA NASCIMENTO – FR ASE VENCEDOR A DO CONCURSO “JORNADAS DE CONHECIMENTO - ACESSIBILIDADE NA WEB”)IRAN PONTES | 6iranpontes.com/palestra
  • 7. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES ACESSIBILIDADE PAR A A WEB REMOVER “BARREIRAS NAS COMUNICAÇÕES: QUALQUER ENTR AVE OU OBSTÁCULO QUE DIFICULTE OU IMPOSSIBILITE A EXPRESSÃO OU O RECEBIMENTO DE MENSAGENS POR INTERMÉDIO DOS MEIOS OU SISTEMAS DE COMUNICAÇÃO, SEJAM OU NÃO DE MASSA.” ARTIGO 2 II -DIRAN PONTES | 7iranpontes.com/palestra
  • 8. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕESACESSIBILIDADE E A Extraído de Apresentação da W3C 8
  • 9. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES ACESSIBILIDADE E APAR A A W3C ACESSIBILIDADE NA WEBSIGNIFICA ACESSO PAR A TODOS,INDEPENDENTEMENTE DE QUALQUER TIPO DELIMITAÇÃO PESSOAL. Extraído de Apresentação da W3C 9
  • 10. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES ACESSIBILIDADE E A RECOMENDAÇÕES DE ACESSIBILIDADEPAR A O CONTEÚDO DA WEB (WCAG 2.0) (Web Content Accessibility Guidelines) http://www.w3.org/TR/WCAG/IRAN PONTES | 10iranpontes.com/palestra
  • 11. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES PORQUE DESENVOLVER DE MODO ACESSÍVEL?IRAN PONTES | 11iranpontes.com/palestra
  • 12. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES PORQUE DESENVOLVER SITE ACESSÍVEL? 1. Prestação de serviço público; 2. Estará de acordo com os princípios de acessibilidade preconizados pela lei federal de acessibilidade; 3. Adaptado a diferentes tipos de conexão como navegadores antigos como o IE6, computadores antigos e sem mouse; 4. Maior acesso ao site devido a atender a um maior públicoIRAN PONTES | 12iranpontes.com/palestra
  • 13. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES PORQUE DESENVOLVER SITE ACESSÍVEL? 5. Menos custo com manutenção; 6. Site mais fácil de ser navegado e intuitivo; 7. O Governo é obrigado a desenvolver de forma acessível conforme Decreto 5.296 de 02 de dezembro de 2004; 8. Desenvolvedor é uma ponte de comunicação; 9. Pensar e desenvolver de forma INCLUSIVA;IRAN PONTES | 13iranpontes.com/palestra
  • 14. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕESVÍDEO – ARQUITETUR A INCLUSIVA 14
  • 15. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES ACESSIBILIDADE NO HTML 5IRAN PONTES | 15iranpontes.com/palestra
  • 16. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES ACESSIBILIDADE NO HTML 5 1. MARCAÇÃO SEMÂNTICA: • Facilita a leitura da tela por softwares que leem tags do HTML e não entre blocos de navegação marcado com <div>, que não é semântico, porque não há como grupá-los e incluí-los em um esquema diferenciado de navegação. Solução do HTML 5: <header>, <footer>, <nav>, <article>, <section>, <aside> e <figure> ...IRAN PONTES | 16iranpontes.com/palestra
  • 17. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES ACESSIBILIDADE NO HTML 5 2. MULTIMÍDIA • HTML5 oferece controles nativos evitando utilizar plugins, pois a mídia faz parte do navegador que também possui controles nativos; Solução do HTML 5: <button> para controles play/pause e os mecanismos criados pelos novos elementos input da HTML5 como <input type=range> para um slider de volumeIRAN PONTES | 17iranpontes.com/palestra
  • 18. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS E PRÁTICASIRAN PONTES | 18iranpontes.com/palestra
  • 19. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS PRÁTICAS 1. Estudar sobre acessibilidade e usabilidade assim como arquitetura da informação e padrões WEB. 2. Disponibilizar LEGENDAS à áudios e descrições para vídeos; 3. Acrescentar descrição nas imagens utilizando “alt”, “title” e “longdesc”: <img src=“casa_amarela.jpg“ Longdesc=“casaamarela.html" alt=“Casa amarela“/IRAN PONTES | 19iranpontes.com/palestra
  • 20. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS E PRÁTICAS 4. Disponibilizar as informações com e sem cores; 5. Utilizar links com atributo title: <a href="link.htm" title="Descrição do Link" >Link</a> 6. Formulários sempre com o elemento <label>: <label for="Nome"> Nome: </label><input type="Text" name="Nome"> 7. Onde for necessário um plug-in como FLASH, deve-se incluir um link para o ítem requerido;IRAN PONTES | 20iranpontes.com/palestra
  • 21. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS E PRÁTICAS 8. Desabilitar CSS para garantir que a página está limpa; (Fazer teste para o site com apenas textos: http://www.delorie.com/web/lynxview.html) 9. Testar o site em vários navegadores; 10. Confirmar que os links funcionam mesmo com o Java Script desabilitado; 11. Verificar se as cores do fundo e textos sobrepostos estejam com bons contrates;IRAN PONTES | 21iranpontes.com/palestra
  • 22. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS E PRÁTICAS 12. Evitar desenvolver para resoluções de novos monitores e sim os mais utilizados; 13. Evitar tabelas e quando houver (Tabelas de dados) identificar cabeçalhos de linha e coluna e resumos; 11. Evitar movimentos na página; 13. Evitar utilizar Menus com sub-menus e quando for necessário que seja acessível no uso do teclado; 14. Disponibilizar link na logo do site;IRAN PONTES | 22iranpontes.com/palestra
  • 23. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS E PRÁTICAS 15. Destacar links visitados e nunca sublinhar textos sem que haja link; 16. Usar atributo "for" para permitir que o usuário clique no rótulo (nome) para selecionar os campos no formulário; 17. Evitar utilizar textos justificados em sites devido há alguns problemas de legibilidade, particularmente para os usuários disléxicos (lêem com dificuldade); 18. Desenvolver uma versão do site monocromática;IRAN PONTES | 23iranpontes.com/palestra
  • 24. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS PRÁTICAS 19. Utilizar espaçamento entre linhas utilizando a propriedade line-height do CSS conseguimos criar um espaçamento entre as linhas em um parágrafo; 20. Utilizar breadcrumbs (migalhas de pão); 21. Utilizar cor de background; 22. Testar se você consegue navegar em seu site utilizando tab, shift-tab e return; 23. Usar o atributo da linguagem do site ‘lang:pt’IRAN PONTES | 24iranpontes.com/palestra
  • 25. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS PRÁTICAS 24. Desenvolver a versão mobile do site; 25. Textos em EM ou PT não em PX; 26. Se usar frames, usar a tag interna <noframes>, e o atributo ‘longdesc’; 27. Tags como <caption> dos atributos id, headers e scope guiam o leitor de sites (tela) então podem usar a vontade; 28. Evitar utilizar CAPTCHA com apenas imagens, utilizem com som, perguntas simples... 29. Sempre desenvolver seguindo os princípios da W3C;IRAN PONTES | 25iranpontes.com/palestra
  • 26. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS PRÁTICASIRAN PONTES | 26iranpontes.com/palestra
  • 27. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS PRÁTICAS 1. Quantidade razoável de celulares não aceitam flash (incluindo o IPHONE); 2. Em Modify > Document sempre definir o TITLE e DESCRIPTION do documento.IRAN PONTES | 27iranpontes.com/palestra
  • 28. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS PRÁTICAS 3. Para gerar conteúdos acessíveis no flash acesse o PAINEL ACESSIBILITY: Window > Other Panels > AcessibilityIRAN PONTES | 28iranpontes.com/palestra
  • 29. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS PRÁTICAS Acessibilizando um MovieClipIRAN PONTES | 29iranpontes.com/palestra
  • 30. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS PRÁTICAS Acessibilizando um BotãoIRAN PONTES | 30iranpontes.com/palestra
  • 31. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS PRÁTICAS ACTION SCRIPT ACESSÍVEL 3. ALGUNS EXEMPLOS PRÁTICOS: PROPRIEDADE AÇÃO APLICAÇÃO.silent Tornar filme Documentos inteiros acessível/Tornar objeto Botões acessível (lógica inversa) Clipes de filme Texto dinâmico Texto de entrada.description Descrição Documentos inteiros Botões Clipes de filme Texto dinâmico Texto de entrada IRAN PONTES | 31 iranpontes.com/palestra
  • 32. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DICAS PRÁTICASMAIS INFORMAÇÕES SOBRE ACESSIBILIDADE NO FLASH:http://imasters.com.br/artigo/8146/flash/acessibilidade_em_flash/http://help.adobe.com/pt_BR/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7c2ba.html IRAN PONTES | 32 iranpontes.com/palestra
  • 33. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕESVÍDEO – ACESSIBILIDADE: CUXTO X BENEFÍCIO 33
  • 34. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES PAR A QUEM DESENVOLVEMOS A FIM DA ACESSIBILIDADE?IRAN PONTES | 34iranpontes.com/palestra
  • 35. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES TECNOLOGIA • Navegadores sem suporte a cor; • Navegadores de texto; • Conexões lentas; ou Diversidade de Sistemas Operacionais; • Dispositivos de navegação portáteis; • Navegadores sem suporte a CSS ou scripts, ou com estes recursos desabilitados; • Dispositivos de navegação com limitações de memória e/ou processamento; Diversidade de resoluções de tela...IRAN PONTES | 35iranpontes.com/palestra
  • 36. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES FATOR HUMANO • Pessoas com limitações de visão, audição, física, cognitiva ou neurológica; • Idosos; • Crianças em fase de conhecimento; • Limitações temporárias; • Limitações Econômicas; • Comunidades rurais...IRAN PONTES | 36iranpontes.com/palestra
  • 37. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DADOSIRAN PONTES | http://www.csszengarden.com/ 37iranpontes.com/palestra
  • 38. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES MOTIVOS PELOS QUAIS NUNCA UTILIZOU A INTERNET: 55% AFIRMAR AM QUE O MOTIVO É A FALTA DE HABILIDADE. Fonte: Pesquisa TIC Domicílios 2010 – CGI.br Pessoas que nunca acessaram a internet, mas usaram um computador.IRAN PONTES | 38iranpontes.com/palestra
  • 39. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES IDOSOS NO MUNDO Em 2010, de acordo com a Sinopse do Censo Demográfico o país tinha 13,8 milhões de crianças de até 4 anos e 14 milhões de pessoas com mais de 65 anos. Fonte: G1, 2012IRAN PONTES | 39iranpontes.com/palestra
  • 40. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES IDOSOS NO MUNDO ESTIMATIVA PAR A 2050 Quase 2 bilhões de pessoas com mais de 60 anos. (+ de 20% da população) Fonte: ht tp://www.un.org/esa/population/publications/worldageing19502050/IRAN PONTES | 40iranpontes.com/palestra
  • 41. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DEFICIÊNCIAS• 14,5% da população brasileira (mais de 24 milhões) era por tadora de, pelo menos, uma das deficiências investigadas pela pesquisa.• Em 2000, existiram 148 mil pessoas cegas e 2,4 milhões com grande dificuldade de enxergar Fonte: IBGE - ht tp://www.ibge.gov.br/home/presidencia/noticias/27062003censo.shtmIRAN PONTES | 41iranpontes.com/palestra
  • 42. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES DEFICIÊNCIAS• O número de surdos no Brasil era de 166.400. Além disso, cerca de 900 mil pessoas declararam ter grande dificuldade permanente de ouvir.• Pessoas com tetraplegia, paraplegia ou hemiplegia permanente são mais de 937 mil e com falta de um membro mais de 478 mil. Fonte: IBGE - ht tp://www.ibge.gov.br/home/presidencia/noticias/27062003censo.shtmIRAN PONTES | 42iranpontes.com/palestra
  • 43. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES IDOSO NO COMPUTADOR 43
  • 44. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES CASESIRAN PONTES | http://www.csszengarden.com/ 44iranpontes.com/palestra
  • 45. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES CASESIRAN PONTES | http://www.csszengarden.com/ 45iranpontes.com/palestra
  • 46. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕESVÍDEO – ACESSIBILIDADE: CUXTO X BENEFÍCIO 46
  • 47. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES CASESIRAN PONTES |iranpontes.com/palestra http://www.bengalalegal.com/ 47
  • 48. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES VÍDEO – CONADE 48
  • 49. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES TESTE DE ACESSIBILIDADEhttp://validator.w3.org/http://www.dasilva.org.br/http://wave.webaim.org//http://www.stainlessvision.com/projects/colour-contrast-visualiser(Contrastes)http://validator.w3.org/checklink (Links quebrados) http://browsershots.org (Diferentes navegadores)IRAN PONTES | 49iranpontes.com/palestra
  • 50. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES TECNOLOGIAS ASSISTIVAS LEITORES DE TELA  VIRTUAL VI  JOWS FOR WINDOWS  DOSVOX  NVDA (http://www.nvda-project.org/)IRAN PONTES | 50iranpontes.com/palestra
  • 51. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES “É FAZENDO QUE SE APRENDE A FAZER AQUILO QUE SE DEVE APRENDER A FAZER.” AristótelesIRAN PONTES | 51iranpontes.com/palestra
  • 52. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES OBRIGADO!IRAN PONTES | 52iranpontes.com/palestra
  • 53. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES IR AN PONTES www.iranpontes.com @iranpontes Facebook.com/iranpontesIRAN PONTES | 53iranpontes.com/palestra
  • 54. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES REFERÊNCIAS E DOCUMENTOS• Livro: Design – Gestão, Métodos, Projetos e Processos• http://www.renatatr.com/monografia/monografia.pdf• http://edu3051.pbworks.com/f/ACESSIBILIDADE_WEB_revista_PGIE.pdf• http://www.linhadecodigo.com.br/artigo/1624/acessibilidade-web-tudo-tem- sua-primeira-vez.aspx• http://www.kadunew.com/blog/web-design/10-crimes-de-usabilidade-que- voce-nao-deve-cometer• Apresentação Acessibilidade pela W3C ao Iseminar 2010• http://www.maujor.com/tutorial/acessibilidade-na-html5.phpIRAN PONTES | 54iranpontes.com/palestra
  • 55. ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES REFERÊNCIAS E DOCUMENTOS• http://pt.kioskea.net/contents/web/ergonomie.php3• http://www.ilearn.com.br/TR/WCA• http://www.webroom.com.br/conteudo.aspx?cont=78&pai=72• Apresentações: Acesso DigitalIRAN PONTES | 55iranpontes.com/palestra