Metodologia para Avaliao de Acessibilidade em Sites 1 Conferncia Web W3C Brasil

Lda Lucia Spelta e Horcio Soares

Novembro 2009

Acessibilidade?

Acessibilidade na web tornar todos os servios, assuntos e publicaes to fceis de serem utilizados por todas as pessoas, que at esqueceremos que h diferenas.
(Carla Nascimento frase vencedora do concurso Jornadas de Conhecimento - Acessibilidade na Web)

Acessibilidade + Web Standards + Usabilidade

Acessibilidade de Verdade!

Acessibilidade para quem?

Juca, sem viso.

Mandy, sem viso e braos.

Lucas, com baixa viso utilizando o software ampliador de tela.

Para nosso ex. aluno Isaias, ele designer e descobriu no incio de 2009 que daltnico.

Isaias esquerda, conduzindo o Janurio para um chopinho aps curso de acessibilidade Web.

Ok! Acessibilidade ento para pessoas com deficincia visual, certo?

Errado! Errado! Errado!

Joo Henriques deficiente motor utiliza o mouse com dificuldade.

( www.euroacessibilidade.com )

Eric interagindo atravs de teclado expandido Funlar Rio

(nov/2006).

Joo, tetraplgico

Joo (foto de Mara Soares )

Deficientes auditivos no oralizados tm dificuldades com o portugus. Apreendem primeiro a lngua de sinais.

Chapeuzinho Vermelho em portugus e na lngua de sinais (prof. Goulo)

Ento acessibilidade somente para pessoas com deficincias, certo?

Casal Joo e Ana, eles tm pouca experincia, baixa viso e dificuldades motoras.

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

Pedro e Laura com dispositivos mveis com acesso a Internet.

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 experincia e medo do computador

Homem com muito medo olhando por cima de um notebook.

Max, com tendinite, usando o mouse com a mo trocada.

Homem com expresso de desespero, usando o mouse com a mo esquerda

E todos ns, primeira experincia.

Um criana em frente a um notebook

E finalmente, o bilionrio cego!!!

Cifro desenhado com moedas douradas

Dilbert fazendo parte do logotipo do Google e falando eu no posso ver.

Google, o bilionrio cego!!! apenas um rob que s indexa contedo em texto.

Acessibilidade, quais so os custos?

 Curva de aprendizagem Alto custo no redesign Baixo em novos projetos Diminui com tempo Validao e manuteno Melhoria contnua Mudana de cultura

E os benefcios?

Grfico de barras em crescimento da esquerda para direita.

Possibilidade de atingir 100% do pblico alvo;

Homem com arma mirando um possvel alvo

Atender melhor todas as pessoas

Mas normalmente o tratamento que recebemos ...

Avio cheio com passageiro exprimido e impossibilitado fazer seu lanche.

Quando podemos ser surpreendidos

Design universal: uma soluo para todos

Bebedor acessvel para todas pessoas, altas, baixas, em cadeiras, etc.

Fidelizar clientes

Homem de terno comemorando

Atender com qualidade novos clientes que

surgem com a
incluso digital e

o sistema de
cotas.
Dardo

Mais fcil de usar e aprender

Casal decepcionado ao utilizar as orientaes do fabricante e no conseguir montar uma estante.

Conformidade com o decreto de lei 5296 (dez/04) e com a conveno da ONU que ganhou fora de lei (ago/08) ;

Uma mo com lao no dedo indicador

Uma senhora acessando um computador.

Crescimento do consumidor acima dos 65 anos...

Manuteno mais rpida e barata, com melhor performance e diminuio dos custos com banda;
Visualizar os benefcios da acessibilidade

Valorizao da Diversidade e Responsabilidade Social;

Mos entrelaadas

Mo com sinal de ok.

Proteo contra processos pela falta da acessibilidade;

Um grande e bonito olho azul.

Maior visibilidade pelos sistemas de busca;

Diferencial competitivo

Mulher com notebook em sinal de ok

Cachorrinho caregando um enorme osso.

Diferencial competitivo e melhoria da qualidade.

Me e filha felizes na praia dando uma estrela

Navegao as escuras

Validao de Acessibilidade

Globo em ambiente futurista.

Validao de Acessibilidade

Validaes automticas e semi-automticas de pginas web

Validao de Acessibilidade

Web Standards

Validador W3C HTML/XHTML

http://validator.w3.org/

Validador W3C CSS

http://jigsaw.w3.org/css-validator/

Ferramentas

Firefox - HTML Validator

https://addons.mozilla.org/pt-BR/firefox/addon/249

Validao de Acessibilidade

Validao automtica e semiautomtica de acessibilidade.

Validao de Acessibilidade

Validadores automticas, quem tem um, no tem nenhum...

HERA

http://www.sidar.org/hera/index.php.pt

EXAMINATOR
http://www.acesso.umic.pt/webax/examinator.php

Da Silva
http://www.dasilva.org.br/

Total Validator
http://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 no est mais disponvel na Web.

Truwex Online 2.0

http://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/

TAW WCAG 1.0, WCAG 2.0 (BETA)

http://www.tawdis.net/

Achecker (WCAG 2.0)

Functional Accessibility Evaluator 1.0

http://fae.cita.uiuc.edu/

http://achecker.ca/checker/index.php

Lista de validadores indicados pelo WAI:

http://www.w3.org/WAI/ER/tools/complete

Validao de Acessibilidade

Avaliao de contraste.

Color and accessibility

http://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 contraste
http://www.stainlessvision.com/projects/colour-contrast-visualiser

Teste de contraste
http://www.vischeck.com/vischeck/ (teste de imagens e sites)

Teste de contraste
Firefox - analisador de Contraste de Cores

Validao de Acessibilidade

Avaliao do tempo de download das pginas.

WebSiteOptimization - tempo
http://WebSiteOptimization.com / http://webwait.com

Validao de Acessibilidade

Teste de links quebrados e pgina de erro.

W3C - Link checker

http://validator.w3.org/checklink

Validao de Acessibilidade

Avaliao humana por especialistas.

Validao de Acessibilidade
Avaliao humana por especialistas:

Aplicao de lista de verificao do WCAG por especialista.

Validao de Acessibilidade
Checklist W3C WCAG 1.0 (link)

Validao de Acessibilidade
WCAG 2.0
Appendix B: Checklist (Non-Normative) Web Content Accessibility Guidelines 2.0 Checklist
http://www.w3.org/TR/2006/WD-WCAG2020060427/appendixB.html

Validao de Acessibilidade
Avaliao humana por especialistas em acessibilidade simulando o acesso por pessoas com deficincia.

Validao de Acessibilidade
Sem mouse navegar pelo site em anlise utilizando apenas o teclado e monitor, com mouse desligado..

Validao de Acessibilidade
Sem mouse e com software leitor de telas - navegar pelo site com o teclado,
um software leitor de telas e com monitor.

Validao de Acessibilidade
Sem mouse e sem monitor - navegar pelo seu site utilizando apenas o teclado com orientao do leitor de telas.

Validao de Acessibilidade
Testes de acesso em diferentes plataformas e navegadores.

Lynx Viewer
http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php

Lynx Viewer
Testando o site da AcessoDigital.net

Diferentes Navegadores
http://browsershots.org

Diferentes Navegadores
http://browsershots.org

Diferentes Navegadores
http://browsershots.org

Validao de Acessibilidade
Testes de acesso com diferentes configuraes.

Desabilitar estilos (CSS)

Desabilitar imagens

Desabilitar Scripts

Validao de Acessibilidade
Testes de impresso e com dispositivos mveis

Validao de Acessibilidade
Canal para reportar problemas de acessibilidade.

@
Melhoria contnua da acessibilidade

Firefox
Firefox 3.0.7
http://br.mozdev.org/firefox/download.html

Complementos para o Firefox (so 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

BR/firefox/addon/8819

https://addons.mozilla.org/pt-

Firefox Accessibility Extension 1.4.5.0

https://addons.mozilla.org/pt-BR/firefox/addon/5809

Firefox
Complementos para o Firefox (so 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!

Lda Lucia Spelta

leda.spelta@acessodigital.net

Horcio Soares
horacio.soares@acessodigital.net

Uma mo segurando um carto de visita da acesso digital.