Upload
horacio-soares
View
4.086
Download
3
Embed Size (px)
DESCRIPTION
Acessibilidade na Web, mobilidade, barreiras e novas tecnologias.
Citation preview
Acessibilidade na Web, mobilidade, barreiras e novas
tecnologias.
Videoclip: WCAG 2.0 Theme Song Web Content
Accessibility Guidelines - Disabilityhttp://www.youtube.com/watch?v=gtuna2AWvqk
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 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/
?Principais Bareiras daacessibilidade
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.
caPTcHa
Captcha – GMAIL.com via Captcha – GMAIL.com via mobilemobile
Captcha http://sam.zoy.org/pwntcha/
Captcha (http://www.webvisum.com/en/main/download)
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?
São São como como
pimentpimenta em a em um um
prato prato de de
comidacomida
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
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
Flash principais barreiras:
Dependência de plugin
Plataforma Windows
Limitação em animações
Dispositivos móveis
Tempo de carregamento
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.
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
FARMRIO.com.brFARMRIO.com.br
Site em Flash – Site em Flash – FARMRIO.com.br via FARMRIO.com.br via mobilemobile
Flash AcessívelNavegação via teclado
http://www.campinferias.com
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; } }
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...
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;
<a href=¨#¨> </a>
Imagens e Links Imagens e Links sem descriçãosem descrição
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 TecnologiasNovas Tecnologiase a Acessibilidadee a Acessibilidade
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.
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
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
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
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)
Obrigado!
Horácio Soareshoracio.soares@acessodigital
.net 55 (21) 9925-5404
@horaciosoares
http://www.meadiciona.com/horaciosoares