NOVO GOLD 2011 LÊDA MARIA RABELO. Individualizar para melhor manejar.
Metodologia para Avaliação de Acessibilidade em Sites 1ª Conferência Web W3C Brasil Lêda Lucia...
Transcript of Metodologia para Avaliação de Acessibilidade em Sites 1ª Conferência Web W3C Brasil Lêda Lucia...
Metodologia para Avaliação de Acessibilidade em Sites
1ª Conferência Web W3C BrasilLêda Lucia Spelta e Horácio Soares
Novembro 2009
Acessibilidade?
“Acessibilidade na web é tornar todos os serviços,
assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há
diferenças.”
(Carla Nascimento – frase vencedora do concurso “Jornadas de Conhecimento - Acessibilidade na
Web”)
Acessibilidade + Web Standards + Usabilidade
Acessibilidade de Verdade!
++
Acessibilidade para quem?
Juca, sem visão.
Mandy, sem visão e braços.
Lucas, com baixa visão utilizando o software ampliador de tela.
Para nosso ex. aluno Isaias, ele é designer e descobriu no início de 2009 que é daltônico.
Isaias à esquerda, conduzindo o Januário para um chopinho após curso de acessibilidade Web.
Ok! Acessibilidade
então é para pessoas com
deficiência visual, certo?
Errado!Errado!Errado!
João Henriques deficiente motor utiliza o mouse com dificuldade.
( www.euroacessibilidade.com )
Eric interagindo através de teclado expandido Funlar – Rio (nov/2006).
João, tetraplégico
João (foto de Maíra Soares )
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)
Então acessibilidade é
somente para pessoas com deficiências,
certo?
Casal João e Ana, eles têm pouca experiência, baixa visão e dificuldades motoras.
Pedro e Laura com dispositivos móveis com acesso a Internet.
Pedro olhando para seu smartphone e Laura com uma cara desesperada para seu celular.
Gabriel, linguagem em desenvolvimento...
Gabriel compenetrado, olhando para o monitor e clicando com o mouse.
Agora ele está olhando e brincando com o 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 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”.
Acessibilidade, quais são os custos?
• Curva de aprendizagem• Alto custo no redesign• Baixo em novos projetos• Diminui com tempo• Validação e manutenção• Melhoria contínua• Mudança de cultura
E os benefícios?
Gráfico de barras em crescimento da esquerda para direita.
Possibilidade de atingir 100% do
público alvo;
Homem com arma mirando um possível alvo
Atender melhor todas as
pessoas
Mas normalmente o tratamento
que recebemos é...
Avião cheio com passageiro exprimido e impossibilitado fazer seu lanche.
Quando podemos ser surpreendidos
Design universal: uma solução para todos
Bebedor acessível para todas pessoas, altas, baixas, em cadeiras, etc.
Homem de terno comemorando
Fidelizar clientes
Dardo
Atender com
qualidade
novos clientes
que surgem
com a inclusão
digital e o
sistema de
cotas.
Mais fácil de usar e aprender
Casal decepcionado ao utilizar as orientações do fabricante e não conseguir montar uma estante.
Uma mão com laço no dedo indicador
Conformidade com o decreto
de lei 5296 (dez/04) e com
a convenção da ONU que
ganhou força de lei
(ago/08) ;
Uma senhora acessando um computador.
Crescimento do consumidor acima dos 65
anos...
Visualizar os benefícios da acessibilidade
Manutenção mais rápida e
barata, com melhor
performance e diminuição
dos custos com banda;
Valorização da
Diversidade e
Responsabilidade
Social;
Mãos entrelaçadas
Proteção contra processos pela falta da acessibilidade;
Mão com sinal de ok.
Maior visibilidade pelos sistemas de busca;
Um grande e bonito olho azul.
Mulher com notebook em sinal de ok
DiferencialDiferencialcompetitivocompetitivo
Cachorrinho caregando um enorme osso.
Diferencial
competitivo e
melhoria da
qualidade.
Mãe e filha felizes na praia dando uma estrela
Navegação as escuras
Validação de Validação de
AcessibilidadeAcessibilidade
Globo em ambiente futurista.
Validação de Validação de AcessibilidadeAcessibilidade
Validações automáticas e semi-automáticas de páginas web
Validação de Validação de AcessibilidadeAcessibilidade
Web Standards
Validador W3C – HTML/XHTMLhttp://validator.w3.org/
Validador W3C – CSShttp://jigsaw.w3.org/css-validator/
Ferramentas
Firefox - HTML Validatorhttps://addons.mozilla.org/pt-BR/firefox/addon/249
Validação de Validação de AcessibilidadeAcessibilidade
Validação automática e semi-automática de acessibilidade.
Validação de Validação de AcessibilidadeAcessibilidade
Validadores automáticas, quem tem um, não tem nenhum...
HERA http://www.sidar.org/hera/index.php.pt
EXAMINATOR http://www.acesso.umic.pt/webax/examinator.php
Da Silvahttp://www.dasilva.org.br/
Total Validatorhttp://www.totalvalidator.com
WCAG 2.0 e WCAG 1.0
Web Xact (Bobby) http://webxact.watchfire.com/
Validador de acessibilidade que foi comprado pela IBM e não está mais disponível na Web.
Truwex Online 2.0http://checkwebsite.erigami.com/accessibility.html
Functional Accessibility Evaluator 1.0 http://fae.cita.uiuc.edu/
WAVE is a free web accessibility "evaluation tool p
rovided by WebAIM. http://wave.webaim.org/
TAWWCAG 1.0, WCAG 2.0 (BETA)
http://www.tawdis.net/
Functional Accessibility Evaluator 1.0 http://fae.cita.uiuc.edu/
Achecker (WCAG 2.0) http://achecker.ca/checker/index.php
Lista de validadores indicados pelo WAI: http://www.w3.org/WAI/ER/tools/complete
Validação de Validação de AcessibilidadeAcessibilidade
Avaliação de contraste.
Color and accessibilityhttp://www.merttol.com/articles/web/color-and-accessibility.html
Teste de contraste http://www.snook.ca/technical/colour_contrast/colour.html
Teste de contraste http://juicystudio.com/services/luminositycontrastratio.php
Teste de contrastehttp://www.stainlessvision.com/projects/colour-contrast-visualiser
Teste de contraste http://www.vischeck.com/vischeck/ (teste de imagens e
sites)
Teste de contrasteFirefox - analisador de Contraste de Cores
Validação de Validação de AcessibilidadeAcessibilidade
Avaliação do tempo de download das páginas.
WebSiteOptimization - tempohttp://WebSiteOptimization.com / http://webwait.com
Validação de Validação de AcessibilidadeAcessibilidade
Teste de links quebrados e página de erro.
W3C - Link checker http://validator.w3.org/checklink
Validação de Validação de AcessibilidadeAcessibilidade
Avaliação humana por especialistas.
Validação de Validação de AcessibilidadeAcessibilidade
Avaliação humana por especialistas:
Aplicação de lista de verificação do WCAG por especialista.
Validação de Validação de AcessibilidadeAcessibilidadeChecklist W3C WCAG 1.0 (link)
Validação de Validação de AcessibilidadeAcessibilidade
WCAG 2.0Appendix B: Checklist (Non-Normative)Web Content Accessibility Guidelines 2.0 Checklist
http://www.w3.org/TR/2006/WD-WCAG20-20060427/appendixB.html
Validação de Validação de AcessibilidadeAcessibilidade
Avaliação humana por especialistas em acessibilidade simulando o acesso por pessoas com deficiência.
Validação de Validação de AcessibilidadeAcessibilidade
Sem mouse – navegar pelo site em análise utilizando apenas o teclado e monitor, com mouse desligado..
Validação de Validação de AcessibilidadeAcessibilidade
Sem mouse e com software leitor de telas - navegar pelo site com o teclado, um software leitor de telas e com monitor.
Validação de Validação de AcessibilidadeAcessibilidade
Sem mouse e sem monitor - navegar pelo seu site utilizando apenas o teclado com orientação do leitor de telas.
Validação de Validação de AcessibilidadeAcessibilidade
Testes de acesso em diferentes plataformas e navegadores.
Lynx Viewer http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
Lynx ViewerTestando o site da AcessoDigital.net
Diferentes Navegadores http://browsershots.org
Diferentes Navegadores http://browsershots.org
Diferentes Navegadores http://browsershots.org
Validação de Validação de AcessibilidadeAcessibilidade
Testes de acesso com diferentes configurações.
Desabilitar estilos (CSS)
Desabilitar imagens
Desabilitar Scripts
Validação de Validação de AcessibilidadeAcessibilidade
Testes de impressão e com dispositivos móveis
Validação de Validação de AcessibilidadeAcessibilidade
Canal para reportar problemas de acessibilidade.
Melhoria contínua da acessibilidade
@
Firefox Firefox
Firefox 3.0.7http://br.mozdev.org/firefox/download.html
Complementos para o Firefox (são instalados a partir de seus respectivos links) :
Firebug: https://addons.mozilla.org/pt-BR/firefox/addon/1843 HTML Validator
https://addons.mozilla.org/pt-BR/firefox/addon/249 Web Developer https://addons.mozilla.org/pt-BR/firefox/addon/60
Check My Colors! 1.0 https://addons.mozilla.org/pt-
BR/firefox/addon/8819 Firefox Accessibility Extension 1.4.5.0
https://addons.mozilla.org/pt-BR/firefox/addon/5809
Firefox Firefox
Complementos para o Firefox (são instalados a partir de seus respectivos links) :
TAW3 with a click 0.9.6 https://addons.mozilla.org/pt-BR/firefox/addon/1158
Juicy Studio Accessibility Toolbar 1.45 https://addons.mozilla.org/pt-BR/firefox/addon/9108
Obtrusive JavaScript Checker 0.81 https://addons.mozilla.org/en-US/firefox/addon/9505
Obrigado!
Lêda Lucia [email protected]
Horácio Soares [email protected]
t
Uma mão segurando um cartão de visita da acesso digital.