O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Acessibilidade na Web, mobilidade,
  barreiras e novas tecnologias.
Videoclip:
WCAG 2.0 Theme Song Web Content
 Accessibility Guidelines - Disability
    http://www.youtube.com/watch?v=gtuna...
Quem tem celular?
E quem acessa a
internet com ele...
Web Content Accessibility
       Guidelines (WCAG) 2.0.
  http://www.w3.org/TR/2008/REC-WCAG20-20081211/


• O WCAG é um g...
?
Principais Bareiras da
acessibilidade
Acessibilidade e Mobilidade:
                                   - Flash
                                - Captcha
        ...
c aPTcHa
Captcha – GMAIL.com via mobile
Captcha   http://sam.zoy.org/pwntcha/
Captcha (http://www.webvisum.com/en/main/download)
E o uso de novas
tecnologias como o
Adobe Flash, Ajax,
  Ms Silverlight?
     t
São
  como
pimenta
 em um
prato de
 comida
Recursos AJAX – Comboios de Portugal – cp.pt




   Site CP.PT dos Comboios de Portugal utilizando recursos de AJAX no
   ...
O AJAX não funciona em dispositivo móvel –
           Comboios de Portugal –em um dispositivo
   O site de Comboios de Por...
Flash  principais barreiras:

 Dependência de plugin
 Plataforma Windows
 Limitação em animações
 Dispositivos móveis...
Exemplo:
versão beta e
100% em flash.
Evolução do exemplo:
 Versão em HTML e flash.
http://www.knickerpicker.com/dressing-room.asp
FARMRIO.com.br
Site em Flash – FARMRIO.com.br via mobile
Flash Acessível
           Navegação via teclado
http://www.campinferias.com
function prepareMenu(){
//Cria as chamadas para eventos de forma não-intrusiva
  var menu = document.getElementById('menu_...
Visão do inferno
<a href=“javascript:meuFruFruFavorito();”
 style=“color:#900;”>
 Clique aqui!!!
 </a>




E esse exemplo ...
Mundo (quase) ideal
HTML
<a href=“/algo.html” id=“frufru”>Meu frufru favorito</a>
CSS
#frufru{
   color:#900;
}
JavaScript...
Imagens e Links
        sem descrição


<a href=¨#¨>        </a>
Site do UOL HOST – http://uolhost.com.br
Site do UOL HOST com as imagens desabilitadas.
Site da Universidade Candido Mendes sem imagens:
http://www.ucam.edu.br
Site da Universidade Federal da Bahia sem imagens:
http://www.uportal.ufba.br
Site Boa Dica sem imagens - http://www.boadica.com.br
Site da Locaweb sem imagens - http://www.locaweb.com.br
Bom exemplo da LOCAWEB: menu dropdown com navegação
também pelo teclado.  http://www.locaweb.com.br
Site da Vale do Rio Doce sem imagens - http://www.vale.com
Novas Tecnologias
e a Acessibilidade
Novas Tecnologias e a Acessibilidade
   Foto de Raman, engenheiro do Google.




                     Reportagem do The n...
Vídeo: Lêda Spelta utilizando uma
       mesa tátil acessível.




 http://videolog.uol.com.br/video.php?id=411614
Vídeo: NavTouch: Making Touch
     Screens Accessible to Blind Users




                           Artigo e vídeo:
http:/...
Vídeo: Slide Rule: Making Mobile
       Touch Screens Accessible to
      Blind People Using Multi-Touch
          Interac...
W3C – WAI
    Web Accessibility Initiative
• ARIA (Accessible Rich Internet
  Applications) Aplicações Internet
  Ricas e ...
Obrigado!



            Horácio Soares
horacio.soares@acessodigital.net
              55 (21) 9925-5404
                @...
http://www.meadiciona.com/horaciosoares
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Próximos SlideShares
Carregando em…5
×

Interact 2009 - Acessibilidade Web e Mobilidade

5.031 visualizações

Publicada em

Acessibilidade na Web, mobilidade, barreiras e novas tecnologias.

Publicada em: Design
  • ERRATA - slides 45 e 46.

    Usei erradamente o exemplo do site do UOLHOST com as imagens dasabilitadas como sendo um grave problema de acessibilidade, inclusive para o Google.
    Expliquei na apresentação que esse erro era causado pela falta de um texto alternativo nas imagens. Olhando o problema um pouco mais de perto identifiquei que não era nada disso.
    Na verdade eles usam uma técnica chamada de image replacement, que aplicam as imagens como background e deslocam os textos para fora do nosso campo visual. Os textos deslocados para fora da tela são lidos pelos leitores de tela usados por pessoas com deficiência visual e também pelos buscadores como o Google.
    Essa técnica pode trazer um outro problema, mas para explicar melhor vou escrever um post sobre o tema...
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Gostei muito da apresentação... Já foi para os favoritos e resources :) Realmente o pessoal que trabalha com Web deveria prestar mais atenção nos tópicos abordados. Espero que publiquem o vídeo da sua palestra.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Interact 2009 - Acessibilidade Web e Mobilidade

  1. 1. Acessibilidade na Web, mobilidade, barreiras e novas tecnologias.
  2. 2. Videoclip: WCAG 2.0 Theme Song Web Content Accessibility Guidelines - Disability http://www.youtube.com/watch?v=gtuna2AWvqk
  3. 3. Quem tem celular?
  4. 4. E quem acessa a internet com ele...
  5. 5. Web Content Accessibility Guidelines (WCAG) 2.0. http://www.w3.org/TR/2008/REC-WCAG20-20081211/ • O WCAG é um guia para tornar sites acessíveis para pessoas com deficiência. • O MWBP é um guia para tornar os sites usáveis em dispositivos móveis. http://www.w3.org/WAI/mobile/
  6. 6. ? Principais Bareiras da acessibilidade
  7. 7. Acessibilidade e Mobilidade: - Flash - Captcha - Ajax - Mouse - Língua -Banda - Refresh - Navegação - Contexto - Contraste - Padrões Três celulares um ao lado do outro: um iphone, um blackbarry e um Nokia.
  8. 8. c aPTcHa
  9. 9. Captcha – GMAIL.com via mobile
  10. 10. Captcha http://sam.zoy.org/pwntcha/
  11. 11. Captcha (http://www.webvisum.com/en/main/download)
  12. 12. E o uso de novas tecnologias como o Adobe Flash, Ajax, Ms Silverlight? t
  13. 13. São como pimenta em um prato de comida
  14. 14. Recursos AJAX – Comboios de Portugal – cp.pt Site CP.PT dos Comboios de Portugal utilizando recursos de AJAX no formulário de compra de bilhetes.
  15. 15. O AJAX não funciona em dispositivo móvel – Comboios de Portugal –em um dispositivo O site de Comboios de Portugal sendo carregado cp.pt móvel. Evento em AJAX não funciona e usuário não pode listar as estações.
  16. 16. Flash  principais barreiras:  Dependência de plugin  Plataforma Windows  Limitação em animações  Dispositivos móveis  Tempo de carregamento
  17. 17. Exemplo: versão beta e 100% em flash.
  18. 18. Evolução do exemplo: Versão em HTML e flash. http://www.knickerpicker.com/dressing-room.asp
  19. 19. FARMRIO.com.br
  20. 20. Site em Flash – FARMRIO.com.br via mobile
  21. 21. Flash Acessível Navegação via teclado http://www.campinferias.com
  22. 22. function prepareMenu(){ //Cria as chamadas para eventos de forma não-intrusiva var menu = document.getElementById('menu_menu'); var menuLinks = menu.getElementsByTagName('a'); menu = menuLinks[0]; var principal = document.getElementById('principal'); menu.onclick = function(){ JavaScript showAndHide('submenu', true); return false; } menu.onkeypress = function(){ var keynum; if(window.event) // para o IE keynum = window.event.keyCode; else if(e.keyCode) // Netscape/Firefox/Opera keynum = e.keyCode; if (keynum == 13) { //apenas a tecla ENTER showAndHide('submenu', true); return false; } }
  23. 23. Visão do inferno <a href=“javascript:meuFruFruFavorito();” style=“color:#900;”> Clique aqui!!! </a> E esse exemplo não é dos piores...
  24. 24. Mundo (quase) ideal HTML <a href=“/algo.html” id=“frufru”>Meu frufru favorito</a> CSS #frufru{ color:#900; } JavaScript var frufru = document.getElementById(‘frufru’); function meuFruFruFavorito() { [codigo] } frufru.onclick = meuFruFruFavorito; frufru.onkeypress = meuFruFruFavorito;
  25. 25. Imagens e Links sem descrição <a href=¨#¨> </a>
  26. 26. Site do UOL HOST – http://uolhost.com.br
  27. 27. Site do UOL HOST com as imagens desabilitadas.
  28. 28. Site da Universidade Candido Mendes sem imagens: http://www.ucam.edu.br
  29. 29. Site da Universidade Federal da Bahia sem imagens: http://www.uportal.ufba.br
  30. 30. Site Boa Dica sem imagens - http://www.boadica.com.br
  31. 31. Site da Locaweb sem imagens - http://www.locaweb.com.br
  32. 32. Bom exemplo da LOCAWEB: menu dropdown com navegação também pelo teclado.  http://www.locaweb.com.br
  33. 33. Site da Vale do Rio Doce sem imagens - http://www.vale.com
  34. 34. Novas Tecnologias e a Acessibilidade
  35. 35. Novas Tecnologias e a Acessibilidade  Foto de Raman, engenheiro do Google. Reportagem do The new York Times: For the Blind, Technology Does What a Guide Dog Can’t – 03/01/09 Link NY - http://www.nytimes.com/2009/01/04/business/04blind.html?_r=1 Link MAQ - http://bengalalegal.com/raman.php
  36. 36. Vídeo: Lêda Spelta utilizando uma mesa tátil acessível. http://videolog.uol.com.br/video.php?id=411614
  37. 37. Vídeo: NavTouch: Making Touch Screens Accessible to Blind Users Artigo e vídeo: http://m-accessibility.blogspot.com/2008/08/navtouch-making-touch-scr
  38. 38. Vídeo: Slide Rule: Making Mobile Touch Screens Accessible to Blind People Using Multi-Touch Interaction Techniques Vídeo: http://www.youtube.com/watch?v=496IAx6_xys Artigo: http://faculty.washington.edu/wobbrock/pubs/assets-08.pdf
  39. 39. W3C – WAI Web Accessibility Initiative • ARIA (Accessible Rich Internet Applications) Aplicações Internet Ricas e Acessíveis. (compatível com os navegadores modernos)
  40. 40. Obrigado! Horácio Soares horacio.soares@acessodigital.net 55 (21) 9925-5404 @horaciosoares
  41. 41. http://www.meadiciona.com/horaciosoares

×