Search

Interact 2009 - Acessibilidade Web e Mobilidade

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

2 comments

Comments 1 - 2 of 2 previous next Post a comment

  • + horacio.soares horacio.soares 5 months ago
    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...
  • + juarezpaf Juarez P. A. Filho 5 months ago
    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.
Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

garantir que a informao esteja disponvel e acessvel a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usurio, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social. garantir que a informao esteja disponvel e acessvel a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usurio, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.Dez segundos o limite para manter a ateno do usurio concentrada no dilogo. (Jacob Nielsen)Se a home do seu site for lenta, os usurios concluiro, com toda razo, que o restante do site ser lento, e que ser uma tortura utiliz-lo.

Dez segundos o limite para manter a ateno do usurio concentrada no dilogo. (Jacob Nielsen)Se a home do seu site for lenta, os usurios concluiro, com toda razo, que o restante do site ser lento, e que ser uma tortura utiliz-lo.

Flickr is a photo sharing application, BaseCamp is a project management application, Kayak is a airline flight search tool.

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.

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.

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.

8 Favorites

Interact 2009 - Acessibilidade Web e Mobilidade - Presentation Transcript

  1. Acessibilidade na Web, mobilidade, barreiras e novas tecnologias.
  2. Videoclip: WCAG 2.0 Theme Song Web Content Accessibility Guidelines - Disability http://www.youtube.com/watch?v=gtuna2AWvqk
  3. Quem tem celular?
  4. E quem acessa a internet com ele...
  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. ? Principais Bareiras da acessibilidade
  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. c aPTcHa
  9. Captcha – GMAIL.com via mobile
  10. Captcha http://sam.zoy.org/pwntcha/
  11. Captcha (http://www.webvisum.com/en/main/download)
  12. E o uso de novas tecnologias como o Adobe Flash, Ajax, Ms Silverlight? t
  13. São como pimenta em um prato de comida
  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. 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. Flash  principais barreiras:  Dependência de plugin  Plataforma Windows  Limitação em animações  Dispositivos móveis  Tempo de carregamento
  17. Exemplo: versão beta e 100% em flash.
  18. Evolução do exemplo: Versão em HTML e flash. http://www.knickerpicker.com/dressing-room.asp
  19. FARMRIO.com.br
  20. Site em Flash – FARMRIO.com.br via mobile
  21. Flash Acessível Navegação via teclado http://www.campinferias.com
  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. Visão do inferno <a href=“javascript:meuFruFruFavorito();” style=“color:#900;”> Clique aqui!!! </a> E esse exemplo não é dos piores...
  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. Imagens e Links sem descrição <a href=¨#¨> </a>
  26. Site do UOL HOST – http://uolhost.com.br
  27. Site do UOL HOST com as imagens desabilitadas.
  28. Site da Universidade Candido Mendes sem imagens: http://www.ucam.edu.br
  29. Site da Universidade Federal da Bahia sem imagens: http://www.uportal.ufba.br
  30. Site Boa Dica sem imagens - http://www.boadica.com.br
  31. Site da Locaweb sem imagens - http://www.locaweb.com.br
  32. Bom exemplo da LOCAWEB: menu dropdown com navegação também pelo teclado.  http://www.locaweb.com.br
  33. Site da Vale do Rio Doce sem imagens - http://www.vale.com
  34. Novas Tecnologias e a Acessibilidade
  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. Vídeo: Lêda Spelta utilizando uma mesa tátil acessível. http://videolog.uol.com.br/video.php?id=411614
  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. 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. W3C – WAI Web Accessibility Initiative • ARIA (Accessible Rich Internet Applications) Aplicações Internet Ricas e Acessíveis. (compatível com os navegadores modernos)
  40. Obrigado! Horácio Soares horacio.soares@acessodigital.net 55 (21) 9925-5404 @horaciosoares
  41. http://www.meadiciona.com/horaciosoares

+ horacio.soareshoracio.soares, 6 months ago

custom

1517 views, 8 favs, 1 embeds more stats

Acessibilidade na Web, mobilidade, barreiras e nova more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 1517
    • 1463 on SlideShare
    • 54 from embeds
  • Comments 2
  • Favorites 8
  • Downloads 69
Most viewed embeds
  • 54 views on http://horaciosoares.blogspot.com

more

All embeds
  • 54 views on http://horaciosoares.blogspot.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Tags

-->
Search
RSS Feed
What's new?

© 2009 SlideShare Inc. All Rights Reserved