aula 01 - acessibilidade

5/17/2018 Aula 01 - Acessibilidade - slidepdf.com

http://slidepdf.com/reader/full/aula-01-acessibilidade 1/106

Disciplina: Interação Humano Computador

Professor: Ricardo Roberto [email protected]

mailto:[email protected]




Sobre a disciplina...

Objetivo Geral:

Aplicar os conceitos de usabilidade desoftware.Objetivos Específicos:

Desenvolver competências e habilidadespara o projeto, a implementação e a

avaliação de sistemas computacionais

interativos para o uso humano, juntamentecom os fenômenos relacionados a esse

uso.















Conteúdo Programático

•Desafios e objetivos da disciplina IHC•Aspectos perceptivos e cognitivos•Princípios de design•Usabilidade de sistemas computacionais•Avaliação de interfaces com o usuário

•Métodos e técnicas de desenvolvimento deinterfaces



















Bibliografia Básica

AGNER, L. Ergodesign e Arquitetura de Informação: trabalhando com ousuario. Quartet, 2009.ORTH, A.I. Interface Homem-Máquina. Porto Alegre: AIO, 2005.PREECE, J.; Rogers, Y.; Sharp, H. Design de Interação: Além da Interação

Homem-Computador. Porto Alegre: Bookman, 2005

BIBLIOGRAFIA COMPLEMENTAR

de SOUZA, C.S. (2005) The Semiotic Engineering of Human-ComputerInteraction. Cambridge, Mass. The MIT Press. 307 p.

Rocha, H. & Baranauska, M., Design e avaliação de interfaces humano-computador. Escola de computação 2000















Sobre o professor...

Ricardo Roberto Leme

Professor da Fatec Itu e Ceunsp.

Experiência de 18 anos com desenvolvimento.

Entusiasta da linguagem Java e dos frameworks

.Net e Ruby on Rails.

Especialista em arquitetura Client/Server

Autor do livro Desenvolvendo Aplicações Web

com Ruby on Rails e PostgreSQL.















Critérios de avaliação

Composta por duas provas e o desenvolvimento de dois trabalhos, que podem ser extra-classe.

Nota Final = (Prova 1 * 4,0) + (Prova 2 * 4,0) + (Trabalho * 2,0)

Será aplicada uma avaliação substituta para os alunos que justificarem a ausência na secretaria na Prova 1 ou Prova 2.

Datas das provas P1 (11/04) P2 (20/06)

















O que é IHC?

É o canal de comunicação entre o homem e o computador, atravésdo qual interagem, visando atingir um objetivo comum.

É o conjunto de comandos de controle do usuário + respostas do computador, constituídos por sinais (gráficos, acústicos e tácteis)














O que é IHC?

É parte de um sistema computacional com a qual uma pessoa entraem contato física, perceptual e conceitualmente. [Moran, 1981]

Interface AplicaçãoUsuário

Sistema

ação

interpretação













Por que estudar Interfaces?

Visão Geral

Porque é necessário estabelecer um bom nível de conversação entreo usuário e o sistema computa-cional

CONFORTO

(Confiabilidade)

DESEMPENHO

(Custo do trabalho)












Visão Geral

Por que estudar Interfaces? A qualidade da interface determina se os usuários aceitam ou recusamum sistema (interesse comercial)

Sucesso ou fracasso de mercado

Custos de hardware e software barateados permitem que se gastemaior capacidade computacional em troca de conforto para o usuário

A qualidade da interface é crítica em certas atividades, como: tráfegoaéreo ou usinas nucleares















Interfaces Web

Acessibilidade nas Interfaces Web

Estudaremosacessibilidade nasinterfaces web









Acessibilidade?




“Acessibilidade na web é tornar todos os serviços, assuntos e

publicações tão fáceis de seremutilizados 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 deVerdade!

++












Acessibilidadepara quem?







Juca, sem visão.




Mandy, sem visão e braços.




Lucas, com baixa visão utilizando o softwareampliador de tela.





Para o Isaias. Ele é designer e descobriu no início de2009 que é daltônico.

Isaias à esquerda, conduzindo o Januário






DALTONISMO




Ok!Acessibilidade

então é parapessoas com

deficiênciavisual, certo?









Errado!

Errado!

Errado!






João Henriques deficiente motorutiliza o mouse com dificuldade.

( www.euroacessibilidade.com )


http://www.euroacessibilidade.com/

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

http://www.flickr.com/photos/mairasoares/


http://www.flickr.com/photos/mairasoares/




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 parapessoas comdeficiências, certo?



Casal João e Ana, eles têm pouca experiência,baixa visão e dificuldades motoras.



Pedro e Laura com dispositivosmó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 omonitor e clicando com o mouse.

Agora ele está olhando ebrincando com o teclado.



Calvin, poucaexperiência emedo do

computadorHomem 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áriocego!!!

Cifrão desenhado commoedas douradas



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

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



Acessibilidade, quais sãoos 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 deatingir 100% do

público alvo;

Homem com arma mirando um possível alvo



Atender melhor todas as pessoas

M l t t t t



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 ainclusão digital e

o sistema de

cotas.

M i fá il d d



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çono dedo indicador

Conformidadecom o decreto delei 5296 (dez/04)

e com aconvenção daONU que ganhou

força de lei(ago/08) ;



Uma senhora acessando um computador.

Crescimento do consumidor acima dos 65 anos...



Visualizar os benefíciosda acessibilidade

Manutenção

mais rápida ebarata, com

melhor

performance ediminuição dos

custos combanda;



Valorização da

Diversidade eResponsabilidade

Social;

Mãos entrelaçadas



Proteção contra

processos pela falta daacessibilidade;

Mão com sinal de ok.



Maior visibilidade pelos

sistemas de busca;

Um grande e bonito olho azul.

Diferencial



Mulher com notebook em sinal de ok

Diferencialcompetitivo

Cachorrinho caregando um enorme osso.



Diferencial

competitivo emelhoria da

qualidade.

Mãe e filha felizes na praia dando uma estrela



Navegação as escuras



Validação de Acessibilidade

Globo em ambiente futurista.




Validações automáticas esemi-automáticas de páginas web




Web Standards

V lid d W C HTML/XHTML



Validador W3C – HTML/XHTMLhttp://validator.w3.org/

V lid d W3C CSS

http://validator.w3.org/







Validador W3C – CSShttp://jigsaw.w3.org/css-validator/

Ferramentas




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







Ferramentas

Firefox - HTML Validatorhttps://addons.mozilla.org/pt-BR/firefox/addon/249



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







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








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

HERA






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



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

EXAMINATOR










EXAMINATORhttp://www.acesso.umic.pt/webax/examinator.php

D Sil


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






Da Silvahttp://www.dasilva.org.br/

T t l V lid t


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





Total Validatorhttp://www.totalvalidator.com

WCAG 2.0 e WCAG 1.0


http://www.totalvalidator.com/

http://www.totalvalidator.com/



Web Xact (Bobby)http://webxact.watchfire.com/

Validador de acessibilidade que foi comprado pela

IBM e não está mais disponível na Web.

T O li 2 0

http://webxact.watchfire.com/

http://webxact.watchfire.com/



Truwex Online 2.0http://checkwebsite.erigami.com/accessibility.html

http://checkwebsite.erigami.com/accessibility.html





Functional Accessibility Evaluator 1.0http://fae.cita.uiuc.edu/

WAVE i f b ibilit " l ti t l


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






WAVE is a free web accessibility "evaluation tool p

rovided by WebAIM.http://wave.webaim.org/

TAW




http://webaim.org/

http://wave.webaim.org/


http://webaim.org/




TAWWCAG 1.0, WCAG 2.0 (BETA)

http://www.tawdis.net/

Achecker (WCAG 2.0) http://achecker.ca/checker/index.php








Functional Accessibility Evaluator 1.0http://fae.cita.uiuc.edu/

( )






Lista de validadores indicados pelo WAI:http://www.w3.org/WAI/ER/tools/complete

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





Avaliação de contraste.

Color and accessibility








http://www.merttol.com/articles/web/color-and-accessibility.html

Teste de contraste





Teste de contrastehttp://www.snook.ca/technical/colour_contrast/colour.html

Teste de contraste


http://www.snook.ca/technical/colour_contrast/colour.html






Teste de contrastehttp://juicystudio.com/services/luminositycontrastratio.php

Teste de contraste


http://juicystudio.com/services/luminositycontrastratio.php







Teste de contrastehttp://www.stainlessvision.com/projects/colour-contrast-visualiser

Teste de contraste


http://www.stainlessvision.com/projects/colour-contrast-visualiser









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

Teste de contraste


http://www.vischeck.com/vischeck/





Teste de contrasteFirefox - analisador de Contraste de Cores

lid ã d ibilid d




Avaliação do tempo de download daspáginas.

WebSiteOptimization - tempo



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

V lid ã d A ibilid d

http://websiteoptimization.com/

http://webwait.com/

http://webwait.com/



http://webwait.com/




Teste de links quebrados e página deerro.

W3C - Link checker

http://webwait.com/

http://webwait.com/

http://webwait.com/

http://webwait.com/

http://webwait.com/



W3C Link checkerhttp://validator.w3.org/checklink


http://webwait.com/

http://validator.w3.org/checklink







Avaliação humana por especialistas.









Avaliação humana por especialistas:

Aplicação de lista de verificação do

WCAG por especialista.










Validação de AcessibilidadeChecklist W3C WCAG 1.0 (link)








WCAG 2.0Appendix B: Checklist (Non-Normative)

Web Content Accessibility Guidelines 2.0Checklist

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

20060427/appendixB.html







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











Avaliação humana por especialistasem acessibilidade simulando o

acesso por pessoas com deficiência.











Sem mouse – navegar pelo site emanálise utilizando apenas o teclado e

monitor, com mouse desligado..













Sem mouse e com software leitor detelas - navegar pelo site com o teclado,

um software leitor de telas e com monitor.












Sem mouse e sem monitor - navegarpelo seu site utilizando apenas o teclado

com orientação do leitor de telas.











Testes de acesso em diferentesplataformas e navegadores.

Lynx Viewerh // ll i / i / l /l /l i h






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






Lynx Viewer







y e eTestando o site da AcessoDigital.net

Diferentes Navegadores






ghttp://browsershots.org



http://browsershots.org/







Testes de acesso com diferentesconfigurações.

Desabilitar estilos (CSS)








Desabilitar estilos (CSS)

Desabilitar imagens





Desabilitar Scripts





Testes de impressão e com dispositivosmóveis










Canal para reportar problemas deacessibilidade.

Melhoria contínua da acessibilidade

@

Firefox










Firefox

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

Complementos para o Firefox (são instalados apartir 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/8819Firefox Accessibility Extension 1.4.5.0


Firefox



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






















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




Firefox

Complementos para o Firefox (são instalados apartir de seus respectivos links) :TAW3 with a click 0.9.6


Juicy Studio Accessibility Toolbar 1.45https://addons.mozilla.org/pt-BR/firefox/addon/9108

Obtrusive JavaScript Checker 0.81https://addons.mozilla.org/en-US/firefox/addon/9505







https://addons.mozilla.org/en-US/firefox/addon/9505










aula 01 - acessibilidade

Documents