Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Upcoming SlideShare
Loading in …5
×

Interact 2009 - Acessibilidade Web e Mobilidade

4,984 views

Published on

Acessibilidade na Web, mobilidade, barreiras e novas tecnologias.

Published in: 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...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×