EDTED 2010 - Acessibilidade na Web

View
9.884
Download
1
Category

Design

Preview:

DESCRIPTION

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

Citation preview

Acessibilidade

Horácio Soareshoracio.soares@acessodigital.ne

t 55 (21) 9925-5404

@horaciosoares

EdtedMarço 2010

Acessibilidade para quem?

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

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

Bernardo, designer e daltônico

Ok, então acessibilidade é para

pessoas com deficiência visual,

certo?

João, tetraplégico

João (foto de Maíra Soares )

http://www.flickr.com/photos/mairasoares/

João Henriques deficiente motor utiliza o mouse

com dificuldade. ( www.euroacessibilidade.com )

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

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)

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

Certo...acessibilidade na Web serve para

pessoas que possuem alguma deficiência,

certo?

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.

Gabriel, linguagem em desenvolvimento...

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

Agora ele está olhando e brincando como teclado.

Calvin, pouca experiência e

medo do computador

Homem com muito medo olhando por cima de um notebook.

Marta e suas amigas…

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

Todos nós na primeira experiência.

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

E finalmente,

o bilionário cego!!!

Cifrão desenhado com moedas douradas

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”.

Acessibilidade, quais são os custos?

• 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

E os benefícios?

Possibilidade de atingir 100% do

público alvo;

Atender melhor todas as

pessoas

Mas normalmente o tratamento

que recebemos é...

Quando podemos ser surpreendidos

Design universal: uma solução para todos

Homem de terno comemorando

Fidelizar clientes

Mais fácil de usar e aprender

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) ;

Concorrer

Portal

Petrobras: projetos de: Portabilidade e Acessibilidade

Proteção contra processos pela falta da

acessibilidade

Visualizar os benefícios da acessibilidade

Manutenção mais rápida e

barata, melhor performance…

Valorização da

Diversidade e

Responsabilidade Social.

Mãos entrelaçadas

Maior visibilidade pelos sistemas de busca;

Mulher com notebook em sinal de ok

VantagemVantagemcompetitivacompetitiva

Melhoria daqualidade.

Mãe e filha felizes na praia dando uma estrela

Como anda a acessibilidade digital no Brasil?

Motivação pelo decreto de lei 5296

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

Porquinho rosa e sorridente de pelúcia

Acessibilidade aplicada por algumas empresas brasileiras.

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.

Resultado: acessibilidade para inglês ver.

Acessibilidade para inglês ver...

Portal Brasil

Portal Brasil, pra quem?Quem vai utilizar?

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

produtos pessoas

contexto

149Kb

Janela Quebrada

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

<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>

Um bom site, é um site bem testado…

Vídeo

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

Acessibilidade?

Acessibilidade =Técnicas de acessibilidade

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

Acessibilidade =Técnicas de acessibilidade

+ Web Standards

Acessibilidade =Técnicas de acessibilidade

+ Web Standards

+ Usabilidade

Produto: bananaProduto: banana

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/

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.

Eficiênciade uso

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

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/

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/

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.

Acessibilidade =Técnicas de acessibilidade

+ Web Standards

+ Usabilidade

+ Conteúdo

Escrever é a arte de Escrever é a arte de

cortar palavrascortar palavras

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 )

Acessibilidade =Técnicas de acessibilidade

+ Web Standards

+ Usabilidade

+ Conteúdo

+ AI

Pergunte aos clientes de um restaurante o que eles preferem:

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

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

Desafio:Como tratar o excesso de

informação?