Aula 01 - Acessibilidade
-
Upload
gregorio-almeida-queiroz -
Category
Documents
-
view
48 -
download
0
Transcript of Aula 01 - Acessibilidade
![Page 1: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/1.jpg)
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]
![Page 2: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/2.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 2/106
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.
![Page 3: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/3.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 3/106
Sobre a disciplina...
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
![Page 4: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/4.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 4/106
Sobre a disciplina...
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
![Page 5: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/5.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 5/106
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.
![Page 6: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/6.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 6/106
Sobre a disciplina...
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)
![Page 7: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/7.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 7/106
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)
![Page 8: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/8.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 8/106
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
![Page 9: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/9.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 9/106
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)
![Page 10: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/10.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 10/106
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
![Page 11: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/11.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 11/106
Interfaces Web
Acessibilidade nas Interfaces Web
Estudaremosacessibilidade nasinterfaces web
![Page 12: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/12.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 12/106
Acessibilidade?
![Page 13: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/13.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 13/106
“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”)
![Page 14: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/14.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 14/106
Acessibilidade + Web Standards + Usabilidade
Acessibilidade deVerdade!
++
![Page 15: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/15.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 15/106
Acessibilidadepara quem?
![Page 16: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/16.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 16/106
Juca, sem visão.
![Page 17: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/17.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 17/106
Mandy, sem visão e braços.
![Page 18: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/18.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 18/106
Lucas, com baixa visão utilizando o softwareampliador de tela.
![Page 19: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/19.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 19/106
Para o Isaias. Ele é designer e descobriu no início de2009 que é daltônico.
Isaias à esquerda, conduzindo o Januário
![Page 20: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/20.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 20/106
DALTONISMO
![Page 21: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/21.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 21/106
Ok!Acessibilidade
então é parapessoas com
deficiênciavisual, certo?
![Page 22: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/22.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 22/106
Errado!
Errado!
Errado!
![Page 23: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/23.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 23/106
João Henriques deficiente motorutiliza o mouse com dificuldade.
( www.euroacessibilidade.com )
![Page 24: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/24.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 24/106
Eric interagindo através de teclado expandido Funlar – Rio
(nov/2006).
![Page 25: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/25.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 25/106
João,tetraplégico
João (foto de Maíra Soares )
![Page 26: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/26.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 26/106
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)
![Page 27: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/27.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 27/106
Então acessibilidade
é somente parapessoas comdeficiências, certo?
![Page 28: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/28.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 28/106
Casal João e Ana, eles têm pouca experiência,baixa visão e dificuldades motoras.
![Page 29: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/29.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 29/106
Pedro e Laura com dispositivosmóveis com acesso a Internet.
Pedro olhando para seu smartphone e Laura com uma cara desesperada para seu celular.
![Page 30: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/30.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 30/106
Gabriel, linguagem em desenvolvimento...
Gabriel compenetrado, olhando para omonitor e clicando com o mouse.
Agora ele está olhando ebrincando com o teclado.
![Page 31: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/31.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 31/106
Calvin, poucaexperiência emedo do
computadorHomem com muito medo olhando por
cima de um notebook.
![Page 32: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/32.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 32/106
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
![Page 33: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/33.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 33/106
E todos nós, primeira experiência.
Um criança em frente a um notebook
![Page 34: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/34.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 34/106
E finalmente,
o bilionáriocego!!!
Cifrão desenhado commoedas douradas
![Page 35: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/35.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 35/106
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”.
![Page 36: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/36.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 36/106
Acessibilidade, quais sãoos custos?
![Page 37: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/37.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 37/106
• 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
![Page 38: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/38.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 38/106
E os benefícios?
Gráfico de barras em crescimento da esquerda para direita.
![Page 39: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/39.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 39/106
Possibilidade deatingir 100% do
público alvo;
Homem com arma mirando um possível alvo
![Page 40: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/40.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 40/106
Atender melhor todas as pessoas
M l t t t t
![Page 41: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/41.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 41/106
Mas normalmente o tratamento que
recebemos é...
Avião cheio com passageiro exprimido e impossibilitado fazer seu lanche.
![Page 42: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/42.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 42/106
Quando podemos ser surpreendidos
Design universal: uma solução para todos
Bebedor acessível para todas pessoas, altas, baixas, em cadeiras, etc.
![Page 43: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/43.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 43/106
Homem de terno comemorando
Fidelizar clientes
![Page 44: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/44.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 44/106
Dardo
Atender com
qualidade novos
clientes que
surgem com ainclusão digital e
o sistema de
cotas.
M i fá il d d
![Page 45: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/45.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 45/106
Mais fácil de usar e aprender
Casal decepcionado ao utilizar as orientações do fabricante e não conseguir montar uma estante.
![Page 46: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/46.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 46/106
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) ;
![Page 47: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/47.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 47/106
Uma senhora acessando um computador.
Crescimento do consumidor acima dos 65 anos...
![Page 48: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/48.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 48/106
Visualizar os benefíciosda acessibilidade
Manutenção
mais rápida ebarata, com
melhor
performance ediminuição dos
custos combanda;
![Page 49: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/49.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 49/106
Valorização da
Diversidade eResponsabilidade
Social;
Mãos entrelaçadas
![Page 50: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/50.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 50/106
Proteção contra
processos pela falta daacessibilidade;
Mão com sinal de ok.
![Page 51: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/51.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 51/106
Maior visibilidade pelos
sistemas de busca;
Um grande e bonito olho azul.
Diferencial
![Page 52: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/52.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 52/106
Mulher com notebook em sinal de ok
Diferencialcompetitivo
Cachorrinho caregando um enorme osso.
![Page 53: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/53.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 53/106
Diferencial
competitivo emelhoria da
qualidade.
Mãe e filha felizes na praia dando uma estrela
![Page 54: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/54.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 54/106
Navegação as escuras
![Page 55: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/55.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 55/106
Validação de Acessibilidade
Globo em ambiente futurista.
![Page 56: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/56.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 56/106
Validação de Acessibilidade
Validações automáticas esemi-automáticas de páginas web
![Page 57: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/57.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 57/106
Validação de Acessibilidade
Web Standards
V lid d W C HTML/XHTML
![Page 58: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/58.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 58/106
Validador W3C – HTML/XHTMLhttp://validator.w3.org/
V lid d W3C CSS
![Page 59: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/59.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 59/106
Validador W3C – CSShttp://jigsaw.w3.org/css-validator/
Ferramentas
![Page 60: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/60.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 60/106
Ferramentas
Firefox - HTML Validatorhttps://addons.mozilla.org/pt-BR/firefox/addon/249
![Page 61: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/61.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 61/106
Validação de Acessibilidade
Validação automática e semi-automática de acessibilidade.
![Page 62: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/62.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 62/106
Validação de Acessibilidade
Validadores automáticas, quem temum, não tem nenhum...
HERA
![Page 63: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/63.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 63/106
HERA http://www.sidar.org/hera/index.php.pt
EXAMINATOR
![Page 64: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/64.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 64/106
EXAMINATORhttp://www.acesso.umic.pt/webax/examinator.php
D Sil
![Page 65: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/65.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 65/106
Da Silvahttp://www.dasilva.org.br/
T t l V lid t
![Page 66: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/66.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 66/106
Total Validatorhttp://www.totalvalidator.com
WCAG 2.0 e WCAG 1.0
![Page 67: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/67.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 67/106
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
![Page 68: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/68.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 68/106
Truwex Online 2.0http://checkwebsite.erigami.com/accessibility.html
![Page 69: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/69.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 69/106
Functional Accessibility Evaluator 1.0http://fae.cita.uiuc.edu/
WAVE i f b ibilit " l ti t l
![Page 70: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/70.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 70/106
WAVE is a free web accessibility "evaluation tool p
rovided by WebAIM.http://wave.webaim.org/
TAW
![Page 71: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/71.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 71/106
TAWWCAG 1.0, WCAG 2.0 (BETA)
http://www.tawdis.net/
Achecker (WCAG 2.0) http://achecker.ca/checker/index.php
![Page 72: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/72.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 72/106
Functional Accessibility Evaluator 1.0http://fae.cita.uiuc.edu/
( )
![Page 73: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/73.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 73/106
Lista de validadores indicados pelo WAI:http://www.w3.org/WAI/ER/tools/complete
![Page 74: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/74.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 74/106
Validação de Acessibilidade
Avaliação de contraste.
Color and accessibility
![Page 75: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/75.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 75/106
http://www.merttol.com/articles/web/color-and-accessibility.html
Teste de contraste
![Page 76: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/76.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 76/106
Teste de contrastehttp://www.snook.ca/technical/colour_contrast/colour.html
Teste de contraste
![Page 77: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/77.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 77/106
Teste de contrastehttp://juicystudio.com/services/luminositycontrastratio.php
Teste de contraste
![Page 78: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/78.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 78/106
Teste de contrastehttp://www.stainlessvision.com/projects/colour-contrast-visualiser
Teste de contraste
![Page 79: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/79.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 79/106
Teste de contrastehttp://www.vischeck.com/vischeck/ (teste de imagens e sites)
Teste de contraste
![Page 80: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/80.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 80/106
Teste de contrasteFirefox - analisador de Contraste de Cores
lid ã d ibilid d
![Page 81: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/81.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 81/106
Validação de Acessibilidade
Avaliação do tempo de download daspáginas.
WebSiteOptimization - tempo
![Page 82: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/82.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 82/106
WebSiteOptimization - tempohttp://WebSiteOptimization.com / http://webwait.com
V lid ã d A ibilid d
![Page 83: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/83.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 83/106
Validação de Acessibilidade
Teste de links quebrados e página deerro.
W3C - Link checker
![Page 84: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/84.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 84/106
W3C Link checkerhttp://validator.w3.org/checklink
V lid ã d A ibilid d
![Page 85: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/85.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 85/106
Validação de Acessibilidade
Avaliação humana por especialistas.
V lid ã d A ibilid d
![Page 86: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/86.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 86/106
Validação de Acessibilidade
Avaliação humana por especialistas:
Aplicação de lista de verificação do
WCAG por especialista.
V lid ã d A ibilid d
![Page 87: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/87.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 87/106
Validação de AcessibilidadeChecklist W3C WCAG 1.0 (link)
V lid ã d A ibilid d
![Page 88: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/88.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 88/106
Validação de Acessibilidade
WCAG 2.0Appendix B: Checklist (Non-Normative)
Web Content Accessibility Guidelines 2.0Checklist
http://www.w3.org/TR/2006/WD-WCAG20-
20060427/appendixB.html
V lid ã d A ibilid d
![Page 89: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/89.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 89/106
Validação de Acessibilidade
Avaliação humana por especialistasem acessibilidade simulando o
acesso por pessoas com deficiência.
V lid ã d A ibilid d
![Page 90: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/90.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 90/106
Validação de Acessibilidade
Sem mouse – navegar pelo site emanálise utilizando apenas o teclado e
monitor, com mouse desligado..
V lid ã d A ibilid d
![Page 91: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/91.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 91/106
Validação de Acessibilidade
Sem mouse e com software leitor detelas - navegar pelo site com o teclado,
um software leitor de telas e com monitor.
V lid ã d A ibilid d
![Page 92: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/92.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 92/106
Validação de Acessibilidade
Sem mouse e sem monitor - navegarpelo seu site utilizando apenas o teclado
com orientação do leitor de telas.
V lid ã d A ibilid d
![Page 93: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/93.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 93/106
Validação de Acessibilidade
Testes de acesso em diferentesplataformas e navegadores.
Lynx Viewerh // ll i / i / l /l /l i h
![Page 94: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/94.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 94/106
http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
Lynx Viewer
![Page 95: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/95.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 95/106
y e eTestando o site da AcessoDigital.net
Diferentes Navegadores
![Page 96: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/96.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 96/106
ghttp://browsershots.org
Diferentes Navegadores
![Page 97: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/97.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 97/106
ghttp://browsershots.org
Diferentes Navegadores
![Page 98: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/98.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 98/106
ghttp://browsershots.org
Validação de Acessibilidade
![Page 99: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/99.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 99/106
Validação de Acessibilidade
Testes de acesso com diferentesconfigurações.
Desabilitar estilos (CSS)
![Page 100: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/100.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 100/106
Desabilitar estilos (CSS)
Desabilitar imagens
![Page 101: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/101.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 101/106
Desabilitar Scripts
![Page 102: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/102.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 102/106
Desabilitar Scripts
Validação de Acessibilidade
![Page 103: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/103.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 103/106
Validação de Acessibilidade
Testes de impressão e com dispositivosmóveis
Validação de Acessibilidade
![Page 104: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/104.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 104/106
Validação de Acessibilidade
Canal para reportar problemas deacessibilidade.
Melhoria contínua da acessibilidade
@
Firefox
![Page 105: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/105.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 105/106
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
https://addons.mozilla.org/pt-BR/firefox/addon/5809
Firefox
![Page 106: Aula 01 - Acessibilidade](https://reader031.fdocumentos.com/reader031/viewer/2022020800/557200f54979599169a06dac/html5/thumbnails/106.jpg)
5/17/2018 Aula 01 - Acessibilidade - slidepdf.com
http://slidepdf.com/reader/full/aula-01-acessibilidade 106/106
Firefox
Complementos para o Firefox (são instalados apartir 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.45https://addons.mozilla.org/pt-BR/firefox/addon/9108
Obtrusive JavaScript Checker 0.81https://addons.mozilla.org/en-US/firefox/addon/9505