95
Acessibilidade Horácio Soares horacio.soares@acessodigita l.net 55 (21) 9925-5404 @horaciosoares Edted Março 2010

EDTED 2010 - Acessibilidade na Web

Embed Size (px)

DESCRIPTION

Apresentação sobre acessiblidade na web no EDTED Rio de Janeiro - março de 2010

Citation preview

Page 1: EDTED 2010 - Acessibilidade na Web

Acessibilidade

Horácio [email protected]

t 55 (21) 9925-5404

@horaciosoares

EdtedMarço 2010

Page 2: EDTED 2010 - Acessibilidade na Web

Acessibilidade para quem?

Page 3: EDTED 2010 - Acessibilidade na Web

Lêda, sem visão... Utilizando uma mesa tátil acessível

Page 4: EDTED 2010 - Acessibilidade na Web

Lucas, com baixa visão utilizando o software ampliador de tela.

Page 5: EDTED 2010 - Acessibilidade na Web

Bernardo, designer e daltônico

Page 6: EDTED 2010 - Acessibilidade na Web

Ok, então acessibilidade é para

pessoas com deficiência visual,

certo?

Page 7: EDTED 2010 - Acessibilidade na Web

João, tetraplégico

João (foto de Maíra Soares )

Page 8: EDTED 2010 - Acessibilidade na Web

João Henriques deficiente motor utiliza o mouse

com dificuldade. ( www.euroacessibilidade.com )

Page 9: EDTED 2010 - Acessibilidade na Web

Eric interagindo através de teclado expandido - Funlar – Rio (nov/2006).

Page 10: EDTED 2010 - Acessibilidade na Web

Deficientes auditivos não oralizadostêm dificuldades com o português.

Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)

Page 11: EDTED 2010 - Acessibilidade na Web

Vídeo

Video Acessibilidade na Web: Custo ou

Benefício?

Download: http://acessodigital.net/video.html

Videolog: http://videolog.uol.com.br/video.php?

id=230205

Page 12: EDTED 2010 - Acessibilidade na Web

Certo...acessibilidade na Web serve para

pessoas que possuem alguma deficiência,

certo?

Page 13: EDTED 2010 - Acessibilidade na Web

Pedro e Laura com dispositivos móveis com acesso a Internet.

Pedro olhando para seu smartphone e Laura com uma cara desesperada pera seu celular.

Page 14: EDTED 2010 - Acessibilidade na Web

Gabriel, linguagem em desenvolvimento...

Gabriel compenetrado, olhando para o monitor e clicando com o mouse.

Agora ele está olhando e brincando como teclado.

Page 15: EDTED 2010 - Acessibilidade na Web

Calvin, pouca experiência e

medo do computador

Homem com muito medo olhando por cima de um notebook.

Page 16: EDTED 2010 - Acessibilidade na Web

Marta e suas amigas…

Page 17: EDTED 2010 - Acessibilidade na Web

Max, com

tendinite,

usando o

mouse

com a mão

trocada.

Homem com expressão de desespero, usando o mouse com a mão esquerda

Page 18: EDTED 2010 - Acessibilidade na Web

Todos nós na primeira experiência.

Um criança com camisa social e gravata em frente a um notebook

Page 19: EDTED 2010 - Acessibilidade na Web

E finalmente,

o bilionário cego!!!

Cifrão desenhado com moedas douradas

Page 20: EDTED 2010 - Acessibilidade na Web

Google, o bilionário cego!!! É apenas um robô que indexa conteúdo em

texto.

Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.

Page 21: EDTED 2010 - Acessibilidade na Web

Acessibilidade, quais são os custos?

Page 22: EDTED 2010 - Acessibilidade na Web

• Curva de aprendizagem• Alto custo no redesign• Baixo em novos projetos• Diminui com tempo• Validação• Manutenção• Melhoria contínua• Mudança de cultura

Page 23: EDTED 2010 - Acessibilidade na Web

E os benefícios?

Page 24: EDTED 2010 - Acessibilidade na Web

Possibilidade de atingir 100% do

público alvo;

Page 25: EDTED 2010 - Acessibilidade na Web

Atender melhor todas as

pessoas

Page 26: EDTED 2010 - Acessibilidade na Web

Mas normalmente o tratamento

que recebemos é...

Page 27: EDTED 2010 - Acessibilidade na Web

Quando podemos ser surpreendidos

Design universal: uma solução para todos

Page 28: EDTED 2010 - Acessibilidade na Web

Homem de terno comemorando

Fidelizar clientes

Page 29: EDTED 2010 - Acessibilidade na Web

Mais fácil de usar e aprender

Page 30: EDTED 2010 - Acessibilidade na Web

Uma mão com laço no dedo indicador

Conformidade com o decreto de lei Decreto

nº 5.296 (dez/04) e com

a convenção da ONU que

ganhou força de lei Decreto

6949 (ago/09) ;

Page 31: EDTED 2010 - Acessibilidade na Web

Concorrer

Portal

Petrobras: projetos de: Portabilidade e Acessibilidade

Page 32: EDTED 2010 - Acessibilidade na Web

Proteção contra processos pela falta da

acessibilidade

Page 33: EDTED 2010 - Acessibilidade na Web

Visualizar os benefícios da acessibilidade

Manutenção mais rápida e

barata, melhor performance…

Page 34: EDTED 2010 - Acessibilidade na Web

Valorização da

Diversidade e

Responsabilidade Social.

Mãos entrelaçadas

Page 35: EDTED 2010 - Acessibilidade na Web

Maior visibilidade pelos sistemas de busca;

Page 36: EDTED 2010 - Acessibilidade na Web

Mulher com notebook em sinal de ok

VantagemVantagemcompetitivacompetitiva

Page 37: EDTED 2010 - Acessibilidade na Web

Melhoria daqualidade.

Mãe e filha felizes na praia dando uma estrela

Page 38: EDTED 2010 - Acessibilidade na Web

Como anda a acessibilidade digital no Brasil?

Motivação pelo decreto de lei 5296

Page 39: EDTED 2010 - Acessibilidade na Web

http://www.flickr.com/photos/alltheaces/67904915/

Porquinho rosa e sorridente de pelúcia

Acessibilidade aplicada por algumas empresas brasileiras.

Page 40: EDTED 2010 - Acessibilidade na Web

http://www.flickr.com/photos/melmoththewanderer/31029375/

Fucinho de um porco de verdade...

Resultado da acessibilidade de alguns sites que receberam apenas uma camada de maquiagem para se adequarem ao decreto lei de 5296.

Page 41: EDTED 2010 - Acessibilidade na Web

Resultado: acessibilidade para inglês ver.

Page 42: EDTED 2010 - Acessibilidade na Web
Page 43: EDTED 2010 - Acessibilidade na Web

Acessibilidade para inglês ver...

Page 44: EDTED 2010 - Acessibilidade na Web

Portal Brasil

Page 45: EDTED 2010 - Acessibilidade na Web
Page 46: EDTED 2010 - Acessibilidade na Web

Portal Brasil, pra quem?Quem vai utilizar?

Quais são os serviços disponíveis?

Page 47: EDTED 2010 - Acessibilidade na Web

produtos pessoas

contexto

Page 48: EDTED 2010 - Acessibilidade na Web

149Kb

Page 49: EDTED 2010 - Acessibilidade na Web
Page 50: EDTED 2010 - Acessibilidade na Web
Page 51: EDTED 2010 - Acessibilidade na Web

Janela Quebrada

Teoria das Janelas Quebradas aplicada à webhttp://fatorw.com/2007/06/27/teoria-das-janelas-quebradas/

Page 52: EDTED 2010 - Acessibilidade na Web
Page 53: EDTED 2010 - Acessibilidade na Web

<li class="last-child"> <a href="http…" class="rated..." title="Excelente" > excellent

</a> </li>

<li class="last-child"> <a href="http…" class="rated..." title="Excelente" > excellent

</a> </li>

Page 54: EDTED 2010 - Acessibilidade na Web

Um bom site, é um site bem testado…

Vídeo

Page 55: EDTED 2010 - Acessibilidade na Web

Barreiras Técnicas e Culturais:• Quando uma organização quer aplicar acessibilidade, há três barreiras a vencer:

1O que é, para que serve e o que ganhamos

com isso...Mitos

2Eu não sei

como implementar

acessibilidade

3Como

disseminar o conhecimento

e quem irá manter e validar a

acessibilidade

Page 56: EDTED 2010 - Acessibilidade na Web

Acessibilidade?

Page 57: EDTED 2010 - Acessibilidade na Web

Acessibilidade =Técnicas de acessibilidade

Page 58: EDTED 2010 - Acessibilidade na Web

WCAG Web Content Accessibility Guidelines

WCAG 1.0 – 05 de maio de 1999 http://www.utad.pt/wai/wai-pageauth.html

WCAG 2.0 – 11 de dezembro de 2008http://www.ilearn.com.br/TR/WCAG20/

WCAG Samurai

Recomendações para Recomendações para acessibilidade do conteúdo da acessibilidade do conteúdo da

Web 1.0 e 2.0 do W3CWeb 1.0 e 2.0 do W3C

Page 59: EDTED 2010 - Acessibilidade na Web

Acessibilidade =Técnicas de acessibilidade

+ Web Standards

Page 60: EDTED 2010 - Acessibilidade na Web
Page 61: EDTED 2010 - Acessibilidade na Web

Acessibilidade =Técnicas de acessibilidade

+ Web Standards

+ Usabilidade

Page 62: EDTED 2010 - Acessibilidade na Web

Produto: bananaProduto: banana

Page 63: EDTED 2010 - Acessibilidade na Web

Facilidade de Facilidade de aprendizageaprendizage

mmCapacidade com que o Capacidade com que o

usuário começa a interagir usuário começa a interagir rapidamente com o rapidamente com o

sistema logo na primeira sistema logo na primeira vez que o utilizavez que o utiliza..

http://www.flickr.com/photos/arkworld/472578586/http://www.flickr.com/photos/arkworld/472578586/

Page 64: EDTED 2010 - Acessibilidade na Web

http://www.flickr.com/photos/meatballsub/3456803850/ http://www.flickr.com/photos/meatballsub/3456803850/

Eficiênciade uso

Grau de produtividade atingido pelo usuário depois que aprendeu

a utilizar o sistema.

Page 65: EDTED 2010 - Acessibilidade na Web

Eficiênciade uso

http://www.flickr.com/photos/arkworld/472578586/http://www.flickr.com/photos/arkworld/472578586/

Page 66: EDTED 2010 - Acessibilidade na Web

Facilidade deFacilidade dememorizaçãomemorização

• Retenção, capacidade do usuário de voltar a utilizar o sistema após certo tempo sem precisar aprendê-lo novamente.

http://www.flickr.com/photos/sashala/316866777/http://www.flickr.com/photos/sashala/316866777/

Page 67: EDTED 2010 - Acessibilidade na Web

Baixa taxa de errosBaixa taxa de erros• Medida do quanto o usuário pode ser induzido Medida do quanto o usuário pode ser induzido

ao erro pelo sistema e o quanto pode se ao erro pelo sistema e o quanto pode se recuperar do mesmorecuperar do mesmo.

http://www.flickr.com/photos/kalimistuk/2226314453/http://www.flickr.com/photos/kalimistuk/2226314453/

Page 68: EDTED 2010 - Acessibilidade na Web

Satisfação SubjetivaSatisfação Subjetiva

Medida do quanto o usuário se sente feliz de estar utilizando o sistema.Medida do quanto o usuário se sente feliz de estar utilizando o sistema.

Page 69: EDTED 2010 - Acessibilidade na Web

Acessibilidade =Técnicas de acessibilidade

+ Web Standards

+ Usabilidade

+ Conteúdo

Page 70: EDTED 2010 - Acessibilidade na Web

Escrever é a arte de Escrever é a arte de

cortar palavrascortar palavras

Page 71: EDTED 2010 - Acessibilidade na Web

104 PALAVRAS:O questionário a seguir é destinado a colher informações que nos ajudarão a melhorar o site e adequá-lo às suas necessidades.Por favor, selecione suas respostas nos menus suspensos e nos botões de rádio abaixo.Você levará dois ou três minutos para preencher o questionário.No fim deste formulário, você pode optar por deixar seu nome, endereço, e número de telefone. Se você deixar seu nome e número, poderá ser contatado para participar de um estudo destinado a nos ajudar a melhorar este site.Se você tiver comentários ou interesses que precisem de resposta, por favor, contate o Serviço de Atendimento ao Cliente.

47 PALAVRAS:Por favor, ajude-nos a melhorar este site, respondendo a estas questões. Levará apenas 2 ou 3 minutos para completar esta avaliação.Nota: Se você tiver comentários ou interesses que necessitem de uma resposta, não use este formulário. Em vez disso, contate o Atendimento ao Cliente.

Omita palavras desnecessárias

Livro: Não me faça pensar – Autor Steve Krug ( http://sensible.com )

Page 72: EDTED 2010 - Acessibilidade na Web

Acessibilidade =Técnicas de acessibilidade

+ Web Standards

+ Usabilidade

+ Conteúdo

+ AI

Page 73: EDTED 2010 - Acessibilidade na Web

Pergunte aos clientes de um restaurante o que eles preferem:

um cardápio repleto de opções ou um com poucas alternativas

Page 74: EDTED 2010 - Acessibilidade na Web

Exemplo de um cardápio com muitas opções

Page 75: EDTED 2010 - Acessibilidade na Web

Desafio:Como tratar o excesso de

informação?

Page 76: EDTED 2010 - Acessibilidade na Web

Na busca de soluções para os problemas, o que maioria

faz?

Page 77: EDTED 2010 - Acessibilidade na Web

Copia e cola quase tudo...

Page 78: EDTED 2010 - Acessibilidade na Web

Resultado: replicamos tudo que está por aí sem pensar...

Alguns exemplos:

Page 79: EDTED 2010 - Acessibilidade na Web

Código de barras

Page 80: EDTED 2010 - Acessibilidade na Web
Page 81: EDTED 2010 - Acessibilidade na Web

CAPTCHA

Page 82: EDTED 2010 - Acessibilidade na Web

Captcha (solução inacessível e insegura)

(http://www.webvisum.com/en/main/download)

Page 83: EDTED 2010 - Acessibilidade na Web

Menu DropDown

Page 84: EDTED 2010 - Acessibilidade na Web
Page 85: EDTED 2010 - Acessibilidade na Web

Usamos o flash como se todos tivessem acesso a

ele...

Page 86: EDTED 2010 - Acessibilidade na Web
Page 87: EDTED 2010 - Acessibilidade na Web

Clique aqui!

Page 88: EDTED 2010 - Acessibilidade na Web

““Clique aqui”, “Saiba mais”, Clique aqui”, “Saiba mais”, “veja“veja

Mais”… 41.700.000 respostasMais”… 41.700.000 respostaspara “para “clique aquiclique aqui” no Google.” no Google.

Page 89: EDTED 2010 - Acessibilidade na Web

Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)

Page 90: EDTED 2010 - Acessibilidade na Web

Mas por que? Mas por que? Porque não temos tempo, porque somos Porque não temos tempo, porque somos

reativos e dá muito trabalho…reativos e dá muito trabalho…

Page 91: EDTED 2010 - Acessibilidade na Web

Existem três grandes fontes de oportunidades:

Page 92: EDTED 2010 - Acessibilidade na Web

1- Fornecer algo escasso

Page 93: EDTED 2010 - Acessibilidade na Web

2- Fornecer um novo produto ou serviço.

Page 94: EDTED 2010 - Acessibilidade na Web

3 - Fornecer, de maneira nova ou melhor, um produto ou serviço existente.

Page 95: EDTED 2010 - Acessibilidade na Web

Obrigado!

Horácio Soareshoracio.soares@acessodigital

.net 55 (21) 9925-5404

@horaciosoares

Video Acessibilidade na Web: Custo ou Benefício?http://videolog.uol.com.br/video.php?id=230205