waiu - workshop ai, acessibilidade e usabilidade
DESCRIPTION
Apresentação da Equipe da Acesso Digital ( acessodigital.net ) no WAIU - Workshop de Arquitetura da Informação, Acessibilidade e Usabilidade.TRANSCRIPT
![Page 1: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/1.jpg)
Logotipo do Workshop WAIU e da Acesso Digital
![Page 2: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/2.jpg)
Logotipo da Acesso Digital
O que é?
![Page 3: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/3.jpg)
Marco Antonio de QueirozMAQ
Logotipo da Bengala LegalFoto do MAQ
-- Tecnologias Assistivas-- O que é Acessibilidade na Web-- Diretrizes, Validadores e o decreto de Lei 5.296
![Page 4: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/4.jpg)
Tecnologias Assistivas
![Page 5: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/5.jpg)
Switch MouseTeclado virtual do Windows
Ponteira de cabeça
Acesso ao computador via voz
Painel de controle do leitor de telas Jaws para Windows
Sistema Operacional DOSVOX
Lente de Aumento do Windows
Linha braile Impressora braile
![Page 6: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/6.jpg)
homem em dúvida
O que éAcessibilidade na
Web?
Logotipo Acesso Digital
![Page 7: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/7.jpg)
Diretrizes e Iniciativas de AcessibilidadeWCAG - Web Content Accessibility guidelines 1.0.Recomendações do W3C para a acessibilidade do conteúdo da Web em inglês - WCAG 1.0 - 1999.
Diretrizes Irlandesas de Acessibilidade na Web.Tradução do documento "Irish National Disability Authority IT Accessibility Guidelines - Version 1.1".
e-MAGCriado para atender ao decreto 5.296, de 2 de dezembro de 2004
![Page 8: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/8.jpg)
Validadoresde Acessibilidade
Logotipo Acesso Digital
![Page 9: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/9.jpg)
Logotipo Acesso Digital
Watchfire WebXACT - antigo Bobby (inglês).
eXaminator - Testa acessibilidade, HTML e CSS - português.
Hera - português.
Da Silva - Validador brasileiro
Validador de sintaxe: W3C Markup Validation
Service - Valida o HTML (inglês).
Validador de CSS: W3C CSS Validation Service Valida o CSS (inglês).
![Page 10: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/10.jpg)
Decreto n° 5.296 de 2 de dezembro de 2004– Art. 47. No prazo de até doze meses a contar da data de
publicação deste Decreto, será obrigatória a acessibilidade nos
portais e sítios eletrônicos da administração pública na rede
mundial de computadores (internet), para o uso das pessoas
portadoras de deficiência visual, garantindo-lhes o pleno
acesso às informações disponíveis.
– § 1o Nos portais e sítios de grande porte, desde que seja
demonstrada a inviabilidade técnica de se concluir os
procedimentos para alcançar integralmente a acessibilidade, o
prazo definido no caput será estendido por igual período.
Lei de Acessibilidade
![Page 11: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/11.jpg)
Lêda Lúcia SpeltaPsicóloga, Programadora, Analista de Sistemas e Consultora de Acessibilidade.
Foto do Lêda
- Acessibilidade, quem
precisa?
- Navegação na prática.
![Page 12: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/12.jpg)
?Acessibilidade, quem precisa
![Page 13: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/13.jpg)
Juca, sem visão.
Imagem retirada da apresentação – Usabilidoido.com.br
![Page 14: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/14.jpg)
Mandy, sem visão e braços.Imagem retirada da apresentação – Usabilidoido.com.br
![Page 15: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/15.jpg)
João Henriques deficiente motor utiliza o mouse com dificuldade.
( www.euroacessibilidade.com )
![Page 16: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/16.jpg)
Eric interagindo através de teclado expandido Funlar – Rio (nov/2006).
![Page 17: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/17.jpg)
Lucas, com baixa visão utilizando o software ampliador de tela.
Imagem retirada da apresentação – Usabilidoido.com.br
![Page 18: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/18.jpg)
Casal João e Ana, eles têm pouca experiência, baixa visão e dificuldades motoras.
![Page 19: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/19.jpg)
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 20: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/20.jpg)
Pedro e Laura com dispositivos móveis com acesso a Internet.
Pedro olhando para seu smartphone e Laura com uma cara desesperada pera seu celular.
![Page 21: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/21.jpg)
Gabriel, linguagem em desenvolvimento...
Gabriel compenetrado, olhando para o monitor e clicando com o mouse.
Agora ele está olhando e brincando como teclado.
![Page 22: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/22.jpg)
Calvin, pouca experiência e
medo do computador
Homem com muito medo olhando por cima de um notebook.
![Page 23: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/23.jpg)
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 24: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/24.jpg)
E todos nós, primeira experiência.
Um criança com camisa social e gravata em frente a um notebook
![Page 25: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/25.jpg)
E finalmente, o bilionário
cego!!!
Cifrão desenhado com moedas douradas
![Page 26: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/26.jpg)
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”.
![Page 27: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/27.jpg)
Navegação na prática,
Indique um site!!!
Logotipo Acesso Digital
![Page 28: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/28.jpg)
Horácio SoaresDesigner de interação e consultor em design, acessibilidade e usabilidade.
- Benefícios da acessibilidade.
- Design, Simplicidade e
Acessibilidade.
Foto do Horácio
![Page 29: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/29.jpg)
Benefícios da Acessibilidade
para empresas e a sociedade.
![Page 30: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/30.jpg)
Alvo com um dardo na mosca
atingir 100% do público alvo
![Page 31: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/31.jpg)
Homem de terno comemorando
Fidelização de clientes.
![Page 32: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/32.jpg)
Interfaces
mais fáceis
de usar
e aprender.
Mulher sorrindo em frente a um notebook fazendo sinal de ok
![Page 33: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/33.jpg)
Inclusão digital e o sistema de cotas.
Um alvo novo e inexplorado Homem usando o computador
![Page 34: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/34.jpg)
Uma mão com sinal positivo.
Conformidade
com o
decreto
de lei 5296
de
02/12/2004.
![Page 35: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/35.jpg)
Uma senhora acessando um computador.
Crescimento do consumidor acima dos 65
anos...
![Page 36: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/36.jpg)
Homem olhando para o ceú visualizando seus lucros
Manutenção mais rápida
e barata.
![Page 37: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/37.jpg)
Melhor performance e diminuição Melhor performance e diminuição dos custos com banda.dos custos com banda.
Foto de um carro em alta velocidade uma estrada sem obstáculos pela frente
![Page 38: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/38.jpg)
Valorização da
Diversidade e
Responsabilidade
Social;
Mãos entrelaçadas
![Page 39: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/39.jpg)
Maior visibilidade do seu negócio e produtos pelos
sistemas de busca.
Foto da parte de cima do rosto de um homem com as mãos na cara. Fotografia em preto e branco, mas com um olho azul em destaque.
![Page 40: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/40.jpg)
Diferencialcompetitivo emelhoria dosServiços.
Duas mulheres na praia dando uma estrela uma de costas para a outra, com o mar ao fundo.
![Page 41: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/41.jpg)
Visãoemprendedora
Homem com dispositivo móvel.
![Page 42: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/42.jpg)
![Page 43: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/43.jpg)
O Design, a Simplicidade e a
Acessibilidade.
![Page 44: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/44.jpg)
“Duuuuuuuuuu,, eu sou um designer. Como posso fazer projetos com boa aparência para um grupo de pessoas cegas?
![Page 45: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/45.jpg)
design
Interrogação
![Page 46: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/46.jpg)
Aparência é importante
para o design
![Page 47: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/47.jpg)
Qual dos dois sanduíches você escolheria?
Foto de um sanduíche comprado em uma loja qualquer.
Foto do mesmo sanduíche e para fins de marketing.
![Page 48: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/48.jpg)
Sim, mas design não é arte!
Clara com 3 anos, pintanto o “sete”
![Page 49: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/49.jpg)
![Page 50: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/50.jpg)
Nem é maquiagem...
![Page 51: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/51.jpg)
http://www.flickr.com/photos/alltheaces/67904915/
Porquinho rosa e sorridente de pelúcia
![Page 52: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/52.jpg)
http://www.flickr.com/photos/melmoththewanderer/31029375/
Fucinho de um porco de verdade...
![Page 53: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/53.jpg)
PoluídoPoluído
Diversas chaminés de uma fabrica poluindo o ar.
![Page 54: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/54.jpg)
PoluídoPoluído
Diversas chaminés de uma fabrica poluindo o ar.
O conteúdo deve respirar...70% conteúdo x 30%
espaço
![Page 55: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/55.jpg)
desorganizado... Onde está o Wally?
Um foto de uma piscina tirada de longe, com um número inacreditável de pessoas dentro e fora.
![Page 56: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/56.jpg)
lento...
Homem socando o monitor de seu notebook.
![Page 57: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/57.jpg)
Ambíguo?
Quatro mãos juntas, uma para cada lado.
![Page 58: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/58.jpg)
Complicad
o
Executivo na frente de um grande labirinto.
![Page 59: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/59.jpg)
Confuso
Um poste com dezenas de setas para todos os lados
![Page 60: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/60.jpg)
Não deve discriminar
Uma peça de pião de xadrez isolado de outros 27 piões.
![Page 61: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/61.jpg)
Nem nos fazer sentir incapazesUm homem inconformado em frente ao seu notebook.
![Page 62: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/62.jpg)
Não é ambiguo
Ou ser inacessível
Um homem amarrado, com olhos vendados e boca tapada.
![Page 63: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/63.jpg)
Nãorequer
habilidades
especiais
Uma mão auxiliando a outra no uso do mouse.
![Page 64: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/64.jpg)
Requer habilidade
s especiais
Uma cobra fala para outra Querida, travou de novo!!! Andem meninos vão ajudar seu pai a das Control + Alt + Del.
![Page 65: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/65.jpg)
Ou ser difícil de usar
![Page 66: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/66.jpg)
![Page 67: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/67.jpg)
Não é apenasestética
Um close de um belo rosto feminino.
![Page 68: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/68.jpg)
Afinal, o que é design
![Page 69: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/69.jpg)
É uma disciplina que explora o diálogo entre produtos,
pessoas e contextos.
Fonte: http://www.usabilitybok.org/design/p286
Usability Body of Knowledge
![Page 70: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/70.jpg)
Fonte: http://www.usabilitybok.org/design/p286
Usability Body of Knowledge
Um processo que desenvolve soluções
para ajudar as pessoas a alcançar
seus objetivos.
![Page 71: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/71.jpg)
Qual é o grandedesafio do designer?
![Page 72: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/72.jpg)
Tratar o excesso de informações, itens, funcionalidades...
Um burro tentando carregar um exagerado volume de carga, mas em função do excesso, está impossibilitado de colocar as patas sobre o chão.
![Page 73: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/73.jpg)
Como tornaro complexo,
simples?
![Page 74: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/74.jpg)
“
”
Aprender a se perguntar “isso realmente precisa estar aqui?” é o primeiro passo para iniciar a criar
simplicidade.
Pär Almqvist in KISS – Keep it simples, stupid!
http://www.digital-web.com/articles/keep_it_simple_stupid/
![Page 75: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/75.jpg)
“
”
Simplicidade é o supra-sumo da sofisticação. É saber o que manter e o que jogar fora... isso acontece como mágica quando funciona, porque nenhuma complexidade é transferida aos usuários.
(5º Princípio de Joshua Porter)
Não confunda simplicidade com algo simplório, pobre...
![Page 76: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/76.jpg)
O designer deve buscar a
simplicidade, mas com foco na real necessidade do
usuário…
![Page 77: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/77.jpg)
![Page 78: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/78.jpg)
Cuidado...
![Page 79: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/79.jpg)
O que o usuário explicou
o que queria.
Nem sempre é o que
realmente ele precisa.
![Page 80: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/80.jpg)
GoogleSerá que o
Google é acessível?
![Page 81: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/81.jpg)
Google em 1998 (versão Beta)
![Page 82: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/82.jpg)
Fonte: http://www.archive.org
![Page 83: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/83.jpg)
Google em 2007
![Page 84: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/84.jpg)
O que é uma inovação
![Page 85: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/85.jpg)
Opssss….
![Page 86: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/86.jpg)
![Page 87: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/87.jpg)
Para finalizar, uma pergunta:
LESS IS MORE? (menos é mais?)
![Page 88: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/88.jpg)
Para finalizar, uma pergunta:
LESS IS MORE? (menos é mais?)
![Page 89: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/89.jpg)
Bruno TorresDesenvolvedor e consultor em Web Standards e acessibilidade.
- Padrões Web.- Inovações tecnológicas x acessibilidade.
Foto do Bruno Torres
![Page 90: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/90.jpg)
Padrões web
• Tecnologias recomendadas pelo W3C• Usar cada uma para o seu fim específico• Desenvolvimento em camadas• “Progressive Enhancement”
![Page 91: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/91.jpg)
Camadas
• Conteúdo– (X)HTML
• Apresentação– CSS
• Comportamento– ECMAScript (JavaScript)
![Page 92: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/92.jpg)
Progressive Enhancement
• Desenvolva a camada de conteúdo– TUDO deve funcionar neste ponto
![Page 93: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/93.jpg)
Progressive Enhancement
• Estilize o seu conteúdo– Tem certeza de que não “quebrou” nada?– Teste, teste, teste e depois teste de novo– Evite mexer na camada de conteúdo
• A não ser que seja realmente necessário
![Page 94: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/94.jpg)
Progressive Enhancement
• Agora sim, comportamento– Já sabe né? Não quebre nada.– Teste mais ainda e mais um pouco– Pense muito antes de mexer na primeira
camada– Crie elementos descartáveis por aqui mesmo
![Page 95: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/95.jpg)
Visão do inferno
<a href=“javascript:meuFruFruFavorito();” style=“color:#900;”>Clique aqui!!!</a>
E esse exemplo não é dos piores...
![Page 96: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/96.jpg)
Mundo (quase) idealHTML<a href=“/algo.html” id=“frufru”>Meu frufru favorito</a>
CSS#frufru{
color:#900;
}
JavaScriptvar frufru = document.getElementById(‘frufru’);
function meuFruFruFavorito() {
[codigo]
}
frufru.onclick = meuFruFruFavorito;
frufru.onkeypress = meuFruFruFavorito;
![Page 97: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/97.jpg)
Vantagens
• Compatibilidade• Acessibilidade• Usabilidade• Desempenho• Economia de banda• Otimização para sites de busca
![Page 98: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/98.jpg)
E a produtividade?
![Page 99: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/99.jpg)
Produtividade
• Cai no início– Curva de aprendizado alta
• Aumenta muito com o tempo– A palavra-chave é experiência
![Page 100: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/100.jpg)
Vídeo - Acessibilidade na Web:
Custo ou Benefício?http://acessodigital.net/video.html
![Page 101: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/101.jpg)
Vídeo - Acessibilidade na Web:
Custo ou Benefício?http://acessodigital.net/video.html
http://videolog.uol.com.br/video?230205
![Page 102: WAIU - Workshop AI, Acessibilidade e Usabilidade](https://reader036.vdocuments.site/reader036/viewer/2022081505/556c097ad8b42a852a8b4664/html5/thumbnails/102.jpg)
Obrigado!
Avaliação, adequação aos padrões de acessibilidade,
desenvolvimento, design, capacitação e
consultoria.