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,904 views

Published on

Acessibilidade na Web, mobilidade, barreiras e novas tecnologias.

Published in: Design
2 Comments
8 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total views
4,904
On SlideShare
0
From Embeds
0
Number of Embeds
1,872
Actions
Shares
0
Downloads
97
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide
  • <number>
  • Dez segundos
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • Flickr is a photo sharing application, BaseCamp is a project management application, Kayak is a airline flight search tool. <number>
  • <number>
  • <number>
  • AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated.Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion 3.2.5 states, “Changes of context are initiated only by user request.”Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. <number>
  • AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated.Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion 3.2.5 states, “Changes of context are initiated only by user request.”Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated.Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion 3.2.5 states, “Changes of context are initiated only by user request.”Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity.
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • 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

    ×