Logotipo do Workshop WAIU e da Acesso Digital
Logotipo da Acesso Digital
O que é?
Marco Antonio de QueirozMAQ
Logotipo da Bengala LegalFoto do MAQ
-- Tecnologias Assistivas-- O que é Acessibilidade na Web-- Diretrizes, Validadores e o decreto de Lei 5.296
Tecnologias Assistivas
Switch MouseTeclado virtual do Windows
Ponteira de cabeça
Acesso ao computador via voz
Painel de controle do leitor de telas Jaws para Windows
Sistema Operacional DOSVOX
Lente de Aumento do Windows
Linha braile Impressora braile
homem em dúvida
O que éAcessibilidade na
Web?
Logotipo Acesso Digital
Diretrizes e Iniciativas de AcessibilidadeWCAG - Web Content Accessibility guidelines 1.0.Recomendações do W3C para a acessibilidade do conteúdo da Web em inglês - WCAG 1.0 - 1999.
Diretrizes Irlandesas de Acessibilidade na Web.Tradução do documento "Irish National Disability Authority IT Accessibility Guidelines - Version 1.1".
e-MAGCriado para atender ao decreto 5.296, de 2 de dezembro de 2004
Validadoresde Acessibilidade
Logotipo Acesso Digital
Logotipo Acesso Digital
Watchfire WebXACT - antigo Bobby (inglês).
eXaminator - Testa acessibilidade, HTML e CSS - português.
Hera - português.
Da Silva - Validador brasileiro
Validador de sintaxe: W3C Markup Validation
Service - Valida o HTML (inglês).
Validador de CSS: W3C CSS Validation Service Valida o CSS (inglês).
Decreto n° 5.296 de 2 de dezembro de 2004– Art. 47. No prazo de até doze meses a contar da data de
publicação deste Decreto, será obrigatória a acessibilidade nos
portais e sítios eletrônicos da administração pública na rede
mundial de computadores (internet), para o uso das pessoas
portadoras de deficiência visual, garantindo-lhes o pleno
acesso às informações disponíveis.
– § 1o Nos portais e sítios de grande porte, desde que seja
demonstrada a inviabilidade técnica de se concluir os
procedimentos para alcançar integralmente a acessibilidade, o
prazo definido no caput será estendido por igual período.
Lei de Acessibilidade
Lêda Lúcia SpeltaPsicóloga, Programadora, Analista de Sistemas e Consultora de Acessibilidade.
Foto do Lêda
- Acessibilidade, quem
precisa?
- Navegação na prática.
?Acessibilidade, quem precisa
Juca, sem visão.
Imagem retirada da apresentação – Usabilidoido.com.br
Mandy, sem visão e braços.Imagem retirada da apresentação – Usabilidoido.com.br
João Henriques deficiente motor utiliza o mouse com dificuldade.
( www.euroacessibilidade.com )
Eric interagindo através de teclado expandido Funlar – Rio (nov/2006).
Lucas, com baixa visão utilizando o software ampliador de tela.
Imagem retirada da apresentação – Usabilidoido.com.br
Casal João e Ana, eles têm pouca experiência, baixa visão e dificuldades motoras.
Deficientes auditivos não oralizadostêm dificuldades com o português. Apreendem primeiro a língua de
sinais.
Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)
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.
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
E todos nós, 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 só indexa conteúdo em
texto.
Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.
Navegação na prática,
Indique um site!!!
Logotipo Acesso Digital
Horácio SoaresDesigner de interação e consultor em design, acessibilidade e usabilidade.
- Benefícios da acessibilidade.
- Design, Simplicidade e
Acessibilidade.
Foto do Horácio
Benefícios da Acessibilidade
para empresas e a sociedade.
Alvo com um dardo na mosca
atingir 100% do público alvo
Homem de terno comemorando
Fidelização de clientes.
Interfaces
mais fáceis
de usar
e aprender.
Mulher sorrindo em frente a um notebook fazendo sinal de ok
Inclusão digital e o sistema de cotas.
Um alvo novo e inexplorado Homem usando o computador
Uma mão com sinal positivo.
Conformidade
com o
decreto
de lei 5296
de
02/12/2004.
Uma senhora acessando um computador.
Crescimento do consumidor acima dos 65
anos...
Homem olhando para o ceú visualizando seus lucros
Manutenção mais rápida
e barata.
Melhor performance e diminuição Melhor performance e diminuição dos custos com banda.dos custos com banda.
Foto de um carro em alta velocidade uma estrada sem obstáculos pela frente
Valorização da
Diversidade e
Responsabilidade
Social;
Mãos entrelaçadas
Maior visibilidade do seu negócio e produtos pelos
sistemas de busca.
Foto da parte de cima do rosto de um homem com as mãos na cara. Fotografia em preto e branco, mas com um olho azul em destaque.
Diferencialcompetitivo emelhoria dosServiços.
Duas mulheres na praia dando uma estrela uma de costas para a outra, com o mar ao fundo.
Visãoemprendedora
Homem com dispositivo móvel.
O Design, a Simplicidade e a
Acessibilidade.
“Duuuuuuuuuu,, eu sou um designer. Como posso fazer projetos com boa aparência para um grupo de pessoas cegas?
design
Interrogação
Aparência é importante
para o design
Qual dos dois sanduíches você escolheria?
Foto de um sanduíche comprado em uma loja qualquer.
Foto do mesmo sanduíche e para fins de marketing.
Sim, mas design não é arte!
Clara com 3 anos, pintanto o “sete”
Nem é maquiagem...
http://www.flickr.com/photos/alltheaces/67904915/
Porquinho rosa e sorridente de pelúcia
http://www.flickr.com/photos/melmoththewanderer/31029375/
Fucinho de um porco de verdade...
PoluídoPoluído
Diversas chaminés de uma fabrica poluindo o ar.
PoluídoPoluído
Diversas chaminés de uma fabrica poluindo o ar.
O conteúdo deve respirar...70% conteúdo x 30%
espaço
desorganizado... Onde está o Wally?
Um foto de uma piscina tirada de longe, com um número inacreditável de pessoas dentro e fora.
lento...
Homem socando o monitor de seu notebook.
Ambíguo?
Quatro mãos juntas, uma para cada lado.
Complicad
o
Executivo na frente de um grande labirinto.
Confuso
Um poste com dezenas de setas para todos os lados
Não deve discriminar
Uma peça de pião de xadrez isolado de outros 27 piões.
Nem nos fazer sentir incapazesUm homem inconformado em frente ao seu notebook.
Não é ambiguo
Ou ser inacessível
Um homem amarrado, com olhos vendados e boca tapada.
Nãorequer
habilidades
especiais
Uma mão auxiliando a outra no uso do mouse.
Requer habilidade
s especiais
Uma cobra fala para outra Querida, travou de novo!!! Andem meninos vão ajudar seu pai a das Control + Alt + Del.
Ou ser difícil de usar
Não é apenasestética
Um close de um belo rosto feminino.
Afinal, o que é design
É uma disciplina que explora o diálogo entre produtos,
pessoas e contextos.
Fonte: http://www.usabilitybok.org/design/p286
Usability Body of Knowledge
Fonte: http://www.usabilitybok.org/design/p286
Usability Body of Knowledge
Um processo que desenvolve soluções
para ajudar as pessoas a alcançar
seus objetivos.
Qual é o grandedesafio do designer?
Tratar o excesso de informações, itens, funcionalidades...
Um burro tentando carregar um exagerado volume de carga, mas em função do excesso, está impossibilitado de colocar as patas sobre o chão.
Como tornaro complexo,
simples?
“
”
Aprender a se perguntar “isso realmente precisa estar aqui?” é o primeiro passo para iniciar a criar
simplicidade.
Pär Almqvist in KISS – Keep it simples, stupid!
http://www.digital-web.com/articles/keep_it_simple_stupid/
“
”
Simplicidade é o supra-sumo da sofisticação. É saber o que manter e o que jogar fora... isso acontece como mágica quando funciona, porque nenhuma complexidade é transferida aos usuários.
(5º Princípio de Joshua Porter)
Não confunda simplicidade com algo simplório, pobre...
O designer deve buscar a
simplicidade, mas com foco na real necessidade do
usuário…
Cuidado...
O que o usuário explicou
o que queria.
Nem sempre é o que
realmente ele precisa.
GoogleSerá que o
Google é acessível?
Google em 1998 (versão Beta)
Fonte: http://www.archive.org
Google em 2007
O que é uma inovação
Opssss….
Para finalizar, uma pergunta:
LESS IS MORE? (menos é mais?)
Para finalizar, uma pergunta:
LESS IS MORE? (menos é mais?)
Bruno TorresDesenvolvedor e consultor em Web Standards e acessibilidade.
- Padrões Web.- Inovações tecnológicas x acessibilidade.
Foto do Bruno Torres
Padrões web
• Tecnologias recomendadas pelo W3C• Usar cada uma para o seu fim específico• Desenvolvimento em camadas• “Progressive Enhancement”
Camadas
• Conteúdo– (X)HTML
• Apresentação– CSS
• Comportamento– ECMAScript (JavaScript)
Progressive Enhancement
• Desenvolva a camada de conteúdo– TUDO deve funcionar neste ponto
Progressive Enhancement
• Estilize o seu conteúdo– Tem certeza de que não “quebrou” nada?– Teste, teste, teste e depois teste de novo– Evite mexer na camada de conteúdo
• A não ser que seja realmente necessário
Progressive Enhancement
• Agora sim, comportamento– Já sabe né? Não quebre nada.– Teste mais ainda e mais um pouco– Pense muito antes de mexer na primeira
camada– Crie elementos descartáveis por aqui mesmo
Visão do inferno
<a href=“javascript:meuFruFruFavorito();” style=“color:#900;”>Clique aqui!!!</a>
E esse exemplo não é dos piores...
Mundo (quase) idealHTML<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;
Vantagens
• Compatibilidade• Acessibilidade• Usabilidade• Desempenho• Economia de banda• Otimização para sites de busca
E a produtividade?
Produtividade
• Cai no início– Curva de aprendizado alta
• Aumenta muito com o tempo– A palavra-chave é experiência
Vídeo - Acessibilidade na Web:
Custo ou Benefício?http://acessodigital.net/video.html
Vídeo - Acessibilidade na Web:
Custo ou Benefício?http://acessodigital.net/video.html
http://videolog.uol.com.br/video?230205
Obrigado!
Avaliação, adequação aos padrões de acessibilidade,
desenvolvimento, design, capacitação e
consultoria.
Top Related