Interact 2009 - Acessibilidade Web e Mobilidade
-
Upload
horacio-soares -
Category
Design
-
view
4.086 -
download
3
description
Transcript of Interact 2009 - Acessibilidade Web e Mobilidade
![Page 1: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/1.jpg)
Acessibilidade na Web, mobilidade, barreiras e novas
tecnologias.
![Page 2: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/2.jpg)
Videoclip: WCAG 2.0 Theme Song Web Content
Accessibility Guidelines - Disabilityhttp://www.youtube.com/watch?v=gtuna2AWvqk
![Page 3: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/3.jpg)
Quem tem celular?
![Page 4: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/4.jpg)
E quem acessa a internet com ele...
![Page 5: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/5.jpg)
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/
![Page 6: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/6.jpg)
?Principais Bareiras daacessibilidade
![Page 7: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/7.jpg)
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.
![Page 8: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/8.jpg)
caPTcHa
![Page 9: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/9.jpg)
Captcha – GMAIL.com via Captcha – GMAIL.com via mobilemobile
![Page 10: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/10.jpg)
Captcha http://sam.zoy.org/pwntcha/
![Page 11: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/11.jpg)
Captcha (http://www.webvisum.com/en/main/download)
![Page 12: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/12.jpg)
E o uso de novas E o uso de novas tecnologias como o tecnologias como o Adobe Flash, Ajax, Adobe Flash, Ajax,
Ms Ms ttSilverlight?Silverlight?
![Page 13: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/13.jpg)
São São como como
pimentpimenta em a em um um
prato prato de de
comidacomida
![Page 14: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/14.jpg)
![Page 15: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/15.jpg)
Site CP.PT dos Comboios de Portugal utilizando recursos de AJAX no formulário de compra de bilhetes.
Recursos AJAX – Comboios de Portugal – Recursos AJAX – Comboios de Portugal – cp.ptcp.pt
![Page 16: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/16.jpg)
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 O AJAX não funciona em dispositivo móvel – Comboios de Portugal – cp.pt– Comboios de Portugal – cp.pt
![Page 17: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/17.jpg)
![Page 18: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/18.jpg)
Flash principais barreiras:
Dependência de plugin
Plataforma Windows
Limitação em animações
Dispositivos móveis
Tempo de carregamento
![Page 19: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/19.jpg)
ExemploExemplo::versão beta e versão beta e 100% em flash.100% em flash.
ExemploExemplo::versão beta e versão beta e 100% em flash.100% em flash.
![Page 20: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/20.jpg)
![Page 21: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/21.jpg)
![Page 22: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/22.jpg)
![Page 23: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/23.jpg)
Evolução do Evolução do exemploexemplo::
Versão em HTML e flash.Versão em HTML e flash.http://www.knickerpicker.com/dressing-room.asphttp://www.knickerpicker.com/dressing-room.asp
Evolução do Evolução do exemploexemplo::
Versão em HTML e flash.Versão em HTML e flash.http://www.knickerpicker.com/dressing-room.asphttp://www.knickerpicker.com/dressing-room.asp
![Page 24: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/24.jpg)
![Page 25: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/25.jpg)
![Page 26: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/26.jpg)
FARMRIO.com.brFARMRIO.com.br
![Page 27: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/27.jpg)
![Page 28: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/28.jpg)
![Page 29: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/29.jpg)
![Page 30: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/30.jpg)
![Page 31: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/31.jpg)
![Page 32: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/32.jpg)
![Page 33: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/33.jpg)
![Page 34: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/34.jpg)
![Page 35: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/35.jpg)
![Page 36: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/36.jpg)
![Page 37: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/37.jpg)
![Page 38: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/38.jpg)
![Page 39: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/39.jpg)
Site em Flash – Site em Flash – FARMRIO.com.br via FARMRIO.com.br via mobilemobile
![Page 40: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/40.jpg)
Flash AcessívelNavegação via teclado
http://www.campinferias.com
![Page 41: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/41.jpg)
JavaScriptJavaScript
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; } }
![Page 42: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/42.jpg)
Visão do inferno
<a href=“javascript:meuFruFruFavorito();” <a href=“javascript:meuFruFruFavorito();” style=“color:#900;”>style=“color:#900;”>Clique aqui!!!Clique aqui!!!</a></a>
E esse exemplo não é dos piores...
![Page 43: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/43.jpg)
Mundo (quase) idealMundo (quase) ideal
HTML<a href=“/algo.html” id=“frufru”>Meu frufru favorito</a>CSS#frufru{
color:#900;}JavaScriptvar frufru = document.getElementById(‘frufru’);function meuFruFruFavorito() {
[codigo]}frufru.onclick = meuFruFruFavorito;frufru.onkeypress = meuFruFruFavorito;
![Page 44: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/44.jpg)
<a href=¨#¨> </a>
Imagens e Links Imagens e Links sem descriçãosem descrição
![Page 45: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/45.jpg)
Site do UOL HOST – http://uolhost.com.br
![Page 46: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/46.jpg)
Site do UOL HOST com as imagens desabilitadas.
![Page 47: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/47.jpg)
Site da Universidade Candido Mendes sem imagens:http://www.ucam.edu.br
![Page 48: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/48.jpg)
Site da Universidade Federal da Bahia sem imagens:http://www.uportal.ufba.br
![Page 49: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/49.jpg)
Site Boa Dica sem imagens - http://www.boadica.com.br
![Page 50: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/50.jpg)
Site da Locaweb sem imagens - http://www.locaweb.com.br
![Page 51: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/51.jpg)
Bom exemplo da LOCAWEB: menu dropdown com navegação também pelo teclado. http://www.locaweb.com.br
![Page 52: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/52.jpg)
Site da Vale do Rio Doce sem imagens - http://www.vale.com
![Page 53: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/53.jpg)
Novas TecnologiasNovas Tecnologiase a Acessibilidadee a Acessibilidade
![Page 54: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/54.jpg)
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.
![Page 55: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/55.jpg)
Vídeo: Vídeo: Lêda Spelta utilizando uma Lêda Spelta utilizando uma mesa tátil acessível.mesa tátil acessível.
http://videolog.uol.com.br/video.php?id=411614 http://videolog.uol.com.br/video.php?id=411614
![Page 56: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/56.jpg)
Vídeo: Vídeo: NavTouch: Making Touch Screens Accessible to Blind Users
Artigo e vídeo: Artigo e vídeo: http://m-accessibility.blogspot.com/2008/08/navtouch-making-touch-screens.html
![Page 57: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/57.jpg)
Vídeo: Vídeo: Slide Rule: Making Mobile Slide Rule: Making Mobile Touch Screens Accessible toTouch Screens Accessible to
Blind People Using Multi-Touch Blind People Using Multi-Touch Interaction TechniquesInteraction Techniques
Vídeo: Vídeo: http://www.youtube.com/watch?v=496IAx6_xys http://www.youtube.com/watch?v=496IAx6_xys Artigo: Artigo: http://faculty.washington.edu/wobbrock/pubs/assets-
08.pdf
![Page 58: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/58.jpg)
W3C – WAIW3C – WAIWeb Accessibility Initiative Web Accessibility Initiative
1. ARIA (Accessible Rich Internet Applications) Aplicações Internet Ricas e Acessíveis. (compatível com os navegadores modernos)
![Page 59: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/59.jpg)
Obrigado!
Horácio Soareshoracio.soares@acessodigital
.net 55 (21) 9925-5404
@horaciosoares
![Page 60: Interact 2009 - Acessibilidade Web e Mobilidade](https://reader038.fdocumentos.tips/reader038/viewer/2022102721/54945dc3b4795994788b46ae/html5/thumbnails/60.jpg)
http://www.meadiciona.com/horaciosoares