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