Interact 2009 - Acessibilidade Web e Mobilidade
Transferir como PPT, PDF8 gostaram2,105 visualizações
O documento discute as barreiras à acessibilidade na web, principalmente em dispositivos móveis, e as novas tecnologias que podem melhorar ou piorar a acessibilidade. Algumas das principais barreiras mencionadas incluem Flash, AJAX, Captchas e imagens sem descrições. Novas tecnologias como ARIA da W3C e interfaces táteis podem ajudar a tornar sites e aplicativos mais acessíveis.
![JavaScript 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(){ 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; } }](https://image.slidesharecdn.com/interact-teatro-090525062832-phpapp02/85/Interact-2009-Acessibilidade-Web-e-Mobilidade-41-320.jpg)
![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;](https://image.slidesharecdn.com/interact-teatro-090525062832-phpapp02/85/Interact-2009-Acessibilidade-Web-e-Mobilidade-43-320.jpg)
![Obrigado! Horácio Soares h [email_address] 55 ( 21 ) 9925-5404 @ horaciosoares](https://image.slidesharecdn.com/interact-teatro-090525062832-phpapp02/85/Interact-2009-Acessibilidade-Web-e-Mobilidade-59-320.jpg)
Interact 2009 - Acessibilidade Web e Mobilidade
- 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
- 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 a P T c H a
- 9. Captcha – GMAIL.com via mobile
- 10. Captcha http://sam.zoy.org/pwntcha/
- 12. E o uso de novas tecnologias como o Adobe Flash, Ajax, Ms t Silverlight?
- 13. São como pimenta em um prato de comida
- 15. Site CP.PT dos Comboios de Portugal utilizando recursos de AJAX no formulário de compra de bilhetes. Recursos AJAX – Comboios de Portugal – cp.pt
- 16. O site de Comboios de Portugal sendo carregado em um dispositivo móvel. Evento em AJAX não funciona e usuário não pode listar as estações. O AJAX não funciona em dispositivo móvel – Comboios de Portugal – cp.pt
- 18. Flash principais barreiras: Dependência de plugin Plataforma Windows Limitação em animações Dispositivos móveis Tempo de carregamento
- 19. Exemplo : versão beta e 100% em flash.
- 23. Evolução do exemplo : Versão em HTML e flash. http://www.knickerpicker.com/dressing-room.asp
- 26. FARMRIO .com.br
- 39. Site em Flash – FARMRIO.com.br via mobile
- 40. Flash Acessível Navegação via teclado http://www.campinferias.com
- 41. JavaScript 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(){ 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; } }
- 42. Visão do inferno <a href=“javascript:meuFruFruFavorito();” style=“color:#900;”> Clique aqui!!! </a> E esse exemplo não é dos piores...
- 43. 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;
- 44. <a href=¨#¨> < /a > Imagens e Links sem descrição
- 45. Site do UOL HOST – http://uolhost.com.br
- 46. Site do UOL HOST com as imagens desabilitadas.
- 47. Site da Universidade Candido Mendes sem imagens: http://www.ucam.edu.br
- 48. Site da Universidade Federal da Bahia sem imagens: http://www.uportal.ufba.br
- 49. Site Boa Dica sem imagens - http://www.boadica.com.br
- 50. Site da Locaweb sem imagens - http://www.locaweb.com.br
- 51. Bom exemplo da LOCAWEB: menu dropdown com navegação também pelo teclado. http://www.locaweb.com.br
- 52. Site da Vale do Rio Doce sem imagens - http://www.vale.com
- 53. Novas Tecnologias e a Acessibilidade
- 54. 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 Novas Tecnologias e a Acessibilidade Foto de Raman, engenheiro do Google.
- 55. Vídeo: Lêda Spelta utilizando uma mesa tátil acessível. http://videolog.uol.com.br/video.php?id=411614
- 56. Vídeo: NavTouch: Making Touch Screens Accessible to Blind Users Artigo e vídeo: http://m-accessibility.blogspot.com/2008/08/navtouch-making-touch-screens.html
- 57. 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
- 58. W3C – WAI Web Accessibility Initiative ARIA ( Accessible Rich Internet Applications) Aplicações Internet Ricas e Acessíveis. (compat í vel com os navegadores modernos)
- 59. Obrigado! Horácio Soares h [email_address] 55 ( 21 ) 9925-5404 @ horaciosoares
Notas do Editor
- #2: <number>
- #3: Dez segundos
- #4: <number>
- #5: <number>
- #6: <number>
- #7: <number>
- #8: <number>
- #9: <number>
- #10: <number>
- #11: <number>
- #12: <number>
- #13: Flickr is a photo sharing application, BaseCamp is a project management application, Kayak is a airline flight search tool. <number>
- #14: <number>
- #15: <number>
- #16: 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>
- #17: 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>
- #18: <number>
- #19: <number>
- #20: <number>
- #21: <number>
- #22: <number>
- #23: <number>
- #24: <number>
- #25: <number>
- #26: <number>
- #27: <number>
- #28: <number>
- #29: <number>
- #30: <number>
- #31: <number>
- #32: <number>
- #33: <number>
- #34: <number>
- #35: <number>
- #36: <number>
- #37: <number>
- #38: <number>
- #39: 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.
- #42: <number>
- #43: <number>
- #44: <number>
- #45: <number>
- #46: <number>
- #47: <number>
- #48: <number>
- #49: <number>
- #50: <number>
- #51: <number>
- #52: <number>
- #53: <number>
- #54: <number>
- #55: <number>
- #56: <number>
- #57: <number>
- #58: <number>