W3C Acessibilidade

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 Speltaleda.spelta@acessodigital.net

Horácio Soares horacio.soares@acessodigital.ne

t

Uma mão segurando um cartão de visita da acesso digital.