Metodologia para Avaliação de Acessibilidade em Sites
Download
1 / 96

metodologia para avalia - PowerPoint PPT Presentation


  • 182 Views
  • Updated On :

Metodologia para Avaliação de Acessibilidade em Sites 1ª Conferência Web W3C Brasil Lêda Lucia Spelta e Horácio Soares. Novembro 2009. Acessibilidade?.

Related searches for metodologia para avalia

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'metodologia para avalia' - jana


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Slide1 l.jpg
Metodologia para Avaliação de Acessibilidade em Sites1ª Conferência Web W3C BrasilLêda Lucia Spelta e Horácio Soares

Novembro 2009



Slide3 l.jpg

“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”)


Slide4 l.jpg

+ assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.”

+

Acessibilidade+Web Standards+Usabilidade

Acessibilidade de

Verdade!


Acessi bilidade para quem l.jpg
Acessi assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.” bilidade para quem?


Slide6 l.jpg

Juca, sem visão. assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.”


Slide7 l.jpg

Mandy, assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.” semvisão e braços.


Slide8 l.jpg

Lucas, com assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.” baixavisãoutilizando o software ampliador de tela.


Slide9 l.jpg

Para assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.” nosso ex. alunoIsaias, ele é designer e descobriu no início de 2009 que é daltônico.

Isaias à esquerda, conduzindo o Januáriopara um chopinho

apóscurso de acessibilidade Web.


Slide10 l.jpg

Ok! assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.”

Acessibilidade então é para pessoas com deficiência visual, certo?


Slide11 l.jpg

Errado! assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.”

Errado!

Errado!


Slide12 l.jpg

João assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.” Henriquesdeficiente motor utiliza o mouse com dificuldade. ( www.euroacessibilidade.com )


Slide13 l.jpg

Eric assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.” interagindoatravés de tecladoexpandidoFunlar – Rio (nov/2006).


Slide14 l.jpg

João, assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.”

tetraplégico

João (foto de Maíra Soares)


Slide15 l.jpg

Deficientes assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.” auditivosnãooralizadostêmdificuldades com o português. Apreendemprimeiro a língua de sinais.

Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)




Slide18 l.jpg

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

Pedro e Laura com dispositivosmóveis com acesso a Internet.


Slide19 l.jpg

Gabriel, desesperada para seu celular.linguagememdesenvolvimento...

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

Agora ele está olhando e

brincando com o teclado.


Slide20 l.jpg

Calvin, pouca experiência e desesperada para seu celular.medo do computador

Homem com muito medo olhando por cima de um notebook.


Slide21 l.jpg

Max, com tendinite, usando o mouse desesperada para seu celular.com a mão trocada.

Homem com expressão de desespero, usando o mouse com a mão esquerda


Slide22 l.jpg

E todos nós, primeira experiência. desesperada para seu celular.

Um criança em frente a um notebook


Slide23 l.jpg

E finalmente, desesperada para seu celular.o bilionário cego!!!

Cifrão desenhado com moedas douradas


Slide24 l.jpg

Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.

Google, o bilionário cego!!! É apenas um robô que só indexa conteúdo em texto.



Slide26 l.jpg

  • Curva de aprendizagem não posso ver”.

  • Alto custo no redesign

  • Baixo em novos projetos

  • Diminui com tempo

  • Validação e manutenção

  • Melhoria contínua

  • Mudança de cultura


Slide27 l.jpg

E os benefícios? não posso ver”.

Gráfico de barras em crescimento da esquerda para direita.


Slide28 l.jpg

Possibilidade de atingir 100% do público alvo; não posso ver”.

Homem com arma mirando um possível alvo



Slide30 l.jpg

Mas normalmente o tratamento que recebemos é... não posso ver”.

Avião cheio com passageiro exprimido e impossibilitado fazer seu lanche.


Slide31 l.jpg

Quando podemos ser surpreendidos não posso ver”.

Design universal: uma solução para todos

Bebedor acessível para todas pessoas, altas, baixas, em cadeiras, etc.


Slide32 l.jpg

Fidelizar clientes não posso ver”.

Homem de terno comemorando


Slide33 l.jpg

Atender com qualidade novos clientes que surgem com a inclusão digital e o sistema de cotas.

Dardo


Slide34 l.jpg

Mais fácil de usar e aprender inclusão digital e o sistema de cotas.

Casal decepcionado ao utilizar as orientações do fabricante e não conseguir montar uma estante.


Slide35 l.jpg

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 mão com laço no dedo indicador


Slide36 l.jpg

Uma senhora acessando um computador. convenção da ONU que ganhou força de lei (ago/08) ;

Crescimento do consumidor acima dos 65 anos...


Slide37 l.jpg

Manutenção mais rápida e barata, com melhor performance e diminuição dos custos com banda;

Visualizar os benefícios da acessibilidade


Slide38 l.jpg

Valorização da diminuição dos custos com banda;

Diversidade e

Responsabilidade

Social;

Mãos entrelaçadas


Slide39 l.jpg

Mão com sinal de ok. diminuição dos custos com banda;

Proteção contra processos pela falta da acessibilidade;


Slide40 l.jpg

Um grande e bonito olho azul. diminuição dos custos com banda;

Maior visibilidade pelos sistemas de busca;


Slide41 l.jpg

Diferencial diminuição dos custos com banda;

competitivo

Mulher com notebook em sinal de ok

Cachorrinho caregando um enorme osso.


Slide42 l.jpg

Diferencial diminuição dos custos com banda;

competitivo e

melhoria da

qualidade.

Mãe e filha felizes na praia dando uma estrela


Slide43 l.jpg

Navegação as escuras diminuição dos custos com banda;


Slide44 l.jpg

Validação de diminuição dos custos com banda; Acessibilidade

Globoemambientefuturista.


Slide45 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

Validações automáticas e

semi-automáticas de páginas web


Slide46 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

Web Standards


Validador w3c html xhtml http validator w3 org l.jpg
Validador W3C – HTML/XHTML diminuição dos custos com banda;http://validator.w3.org/


Validador w3c css http jigsaw w3 org css validator l.jpg
Validador W3C – CSS diminuição dos custos com banda;http://jigsaw.w3.org/css-validator/


Slide49 l.jpg

  • Ferramentas diminuição dos custos com banda;

    • Firefox - HTML Validator

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


Slide50 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Validação automática e semi-automática de acessibilidade.


Slide51 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Validadores automáticas, quem tem um, não tem nenhum...


Hera http www sidar org hera index php pt l.jpg
HERA diminuição dos custos com banda;http://www.sidar.org/hera/index.php.pt


Examinator http www acesso umic pt webax examinator php l.jpg
EXAMINATOR diminuição dos custos com banda;http://www.acesso.umic.pt/webax/examinator.php


Da silva http www dasilva org br l.jpg
Da diminuição dos custos com banda; Silvahttp://www.dasilva.org.br/


Total validator http www totalvalidator com wcag 2 0 e wcag 1 0 l.jpg
Total diminuição dos custos com banda;Validatorhttp://www.totalvalidator.comWCAG 2.0 e WCAG 1.0


Slide56 l.jpg
Web diminuição dos custos com banda;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 0 http checkwebsite erigami com accessibility html l.jpg
Truwex diminuição dos custos com banda; Online 2.0http://checkwebsite.erigami.com/accessibility.html


Functional accessibility evaluator 1 0 http fae cita uiuc edu l.jpg
Functional diminuição dos custos com banda;AccessibilityEvaluator 1.0 http://fae.cita.uiuc.edu/


Wave is a free web accessibility evaluation tool p rovided by webaim http wave webaim org l.jpg
WAVE diminuição dos custos com banda;is a free web accessibility "evaluation tool provided by WebAIM. http://wave.webaim.org/


Taw wcag 1 0 wcag 2 0 beta http www tawdis net l.jpg
TAW diminuição dos custos com banda;WCAG 1.0, WCAG 2.0 (BETA) http://www.tawdis.net/


Functional accessibility evaluator 1 0 http fae cita uiuc edu61 l.jpg
Functional Accessibility Evaluator 1.0 diminuição dos custos com banda;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 l.jpg
Lista de validadores indicados pelo WAI: diminuição dos custos com banda;http://www.w3.org/WAI/ER/tools/complete


Slide63 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Avaliação de contraste.


Slide64 l.jpg

Color diminuição dos custos com banda;andaccessibilityhttp://www.merttol.com/articles/web/color-and-accessibility.html


Teste de contraste http www snook ca technical colour contrast colour html l.jpg
Teste de contraste diminuição dos custos com banda; http://www.snook.ca/technical/colour_contrast/colour.html


Teste de contraste http juicystudio com services luminositycontrastratio php l.jpg
Teste de contraste diminuição dos custos com banda; http://juicystudio.com/services/luminositycontrastratio.php


Teste de contraste http www stainlessvision com projects colour contrast visualiser l.jpg
Teste de contraste diminuição dos custos com banda;http://www.stainlessvision.com/projects/colour-contrast-visualiser


Teste de contraste http www vischeck com vischeck teste de imagens e sites l.jpg
Teste de contraste diminuição dos custos com banda; http://www.vischeck.com/vischeck/(teste de imagens e sites)


Teste de contraste firefox a nalisador de contraste de cores l.jpg
Teste de contraste diminuição dos custos com banda;Firefox - analisador de Contraste de Cores


Slide70 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Avaliação do tempo de download das páginas.


Websiteoptimization tempo http websiteoptimization com http webwait com l.jpg
WebSiteOptimization diminuição dos custos com banda; - tempohttp://WebSiteOptimization.com / http://webwait.com


Slide72 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Teste de links quebrados e página de erro.


W3c link checker http validator w3 org checklink l.jpg
W3C - Link diminuição dos custos com banda;checker http://validator.w3.org/checklink


Slide74 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Avaliação humana por especialistas.


Slide75 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Avaliação humana por especialistas:

  • Aplicação de lista de verificação do WCAG por especialista.


Slide76 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

Checklist W3C WCAG 1.0 (link)


Slide77 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

WCAG 2.0

Appendix B: Checklist (Non-Normative)

Web Content Accessibility Guidelines 2.0 Checklist

http://www.w3.org/TR/2006/WD-WCAG20-20060427/appendixB.html


Slide78 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Avaliação humana por especialistas em acessibilidade simulando o acesso por pessoas com deficiência.


Slide79 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Sem mouse – navegar pelo site em análise utilizando apenas o teclado e monitor, com mouse desligado..


Slide80 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

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


Slide81 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Sem mouse e sem monitor - navegar pelo seu site utilizando apenas o teclado com orientação do leitor de telas.


Slide82 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Testes de acesso em diferentes plataformas e navegadores.


Lynx viewer http www yellowpipe com yis tools lynx lynx viewer php l.jpg
Lynx diminuição dos custos com banda;Viewerhttp://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php


Lynx viewer testando o site da acessodigital net l.jpg
Lynx diminuição dos custos com banda;ViewerTestando o site da AcessoDigital.net


Diferentes navegadores http browsershots org l.jpg
Diferentes Navegadores diminuição dos custos com banda; http://browsershots.org


Diferentes navegadores http browsershots org86 l.jpg
Diferentes Navegadores diminuição dos custos com banda; http://browsershots.org


Diferentes navegadores http browsershots org87 l.jpg
Diferentes Navegadores diminuição dos custos com banda; http://browsershots.org


Slide88 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Testes de acesso com diferentes configurações.


Desabilitar estilos css l.jpg
Desabilitar diminuição dos custos com banda;estilos (CSS)


Desabilitar imagens l.jpg
Desabilitar diminuição dos custos com banda;imagens


Desabilitar scripts l.jpg
Desabilitar diminuição dos custos com banda; Scripts


Slide92 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Testes de impressão e com dispositivos móveis


Slide93 l.jpg

Validação de Acessibilidade diminuição dos custos com banda;

  • Canal para reportar problemas de acessibilidade.

  • Melhoria contínua da acessibilidade

@


Slide94 l.jpg

Firefox diminuição dos custos com banda;

Firefox 3.0.7

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


Slide95 l.jpg

Firefox diminuição dos custos com banda;

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


Slide96 l.jpg

Obrigado! diminuição dos custos com banda;

Lêda Lucia [email protected]

Horácio Soares [email protected]

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


ad