Clique aqui para fazer o download do Manual de Gerenciamento de ...
Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o...
Transcript of Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o...
![Page 1: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/1.jpg)
Acessibilidade pensada para a experiênciamuito além de “7 dicas básicas”
Marcelo SalesFlorianópolis 2019
![Page 2: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/2.jpg)
http://marcelosales.workhttp://acessibilida.dehttp://guia-wcag.com
No Itaú atuo na superintendência de UX com foco 100% em acessibilidade,criando ferramentas de apoio, manuais sobre o tema e o desenvolvendouma cultura de acessibilidade para todas as áreas internas.
![Page 3: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/3.jpg)
7
![Page 4: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/4.jpg)
WCAG
![Page 5: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/5.jpg)
WCAGWeb Content Accessibility Guidelines
Content
![Page 6: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/6.jpg)
WCAG 2.1
4Princípios
13Recomendações
78Critérios
de sucesso
![Page 7: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/7.jpg)
A AA AAA30 20 28
Critérios de Sucesso78
![Page 8: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/8.jpg)
Perceptível aos olhos, aos ouvidos e ao tato
Operável por mouse, por teclado e por voz
Compreensível conteúdo claro e sem ambiguidade
Robusto tem que funcionar em qualquer lugar
Princípios4
![Page 9: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/9.jpg)
https://youtu.be/gem1qmA3qlE
Vídeo:Maria Clara: o seu produto está preparado para as novas gerações?
![Page 10: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/10.jpg)
Criando barreirassem perceber...
![Page 11: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/11.jpg)
LINKS
![Page 12: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/12.jpg)
Referência criada a partir de uma apresentação da Talita Pagani
Clique aqui para fazer o download do PDF.
Se você ainda não é cadastrado, clique aqui para fazer o cadastro.
Perdeu sua senha? Clique aqui para recuperar.
Links: Utilização apenas de cor
![Page 13: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/13.jpg)
Clique aqui para fazer o download do PDF.
Se você ainda não é cadastrado, clique aqui para fazer o cadastro.
Perdeu sua senha? Clique aqui para recuperar.
Referência criada a partir de uma apresentação da Talita Pagani
Links: Utilização apenas de cor (visualizado por quem tem Protanopia)
![Page 14: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/14.jpg)
Clique aqui para fazer o download do PDF.
Se você ainda não é cadastrado, clique aqui para fazer o cadastro.
Perdeu sua senha? Clique aqui para recuperar.
Referência criada a partir de uma apresentação da Talita Pagani
Links: Utilização de “clique aqui”
![Page 15: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/15.jpg)
Clique aqui para fazer o download do PDF.
Se você ainda não é cadastrado, clique aqui para fazer o cadastro.
Perdeu sua senha? Clique aqui para recuperar.
Referência criada a partir de uma apresentação da Talita Pagani
Links: Utilização de “clique aqui”
![Page 16: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/16.jpg)
Temos um conteúdo muito importante para disponibilizar para você, então faça o download do nosso e-book em PDF.
Se você ainda não é cadastrado, crie sua conta.
Esqueci minha senha.
Referência criada a partir de uma apresentação da Talita Pagani
Links: Finalidade do link no próprio link
![Page 17: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/17.jpg)
Temos um conteúdo muito importante para disponibilizar para você, então faça o download do nosso e-book em PDF.
Se você ainda não é cadastrado, crie sua conta.
Esqueci minha senha.
Referência criada a partir de uma apresentação da Talita Pagani
Links: Finalidade do link no próprio link
![Page 18: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/18.jpg)
Critérios WCAG diretamente afetados
![Page 19: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/19.jpg)
FOCO VISÍVEL
![Page 20: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/20.jpg)
Foco Visível: Navegação por teclado – Site FastShop vídeo
![Page 21: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/21.jpg)
Foco Visível: Navegação por teclado – Site Submarino vídeo
![Page 22: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/22.jpg)
Foco Visível: Navegação por teclado – Site Itaú vídeo
![Page 23: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/23.jpg)
Critérios WCAG diretamente afetados
![Page 24: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/24.jpg)
http://outlinenone.com
![Page 25: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/25.jpg)
BOTÕES
![Page 26: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/26.jpg)
Botões: Exemplos visuais de botões
![Page 27: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/27.jpg)
Botões: Comparador (Aspecto Visual vs. Aspecto Aural) - FastShop vídeo
![Page 28: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/28.jpg)
Botões: Comparador (Aspecto Visual vs. Aspecto Aural) - Apple vídeo
![Page 29: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/29.jpg)
Critérios WCAG diretamente afetados
![Page 30: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/30.jpg)
ORIENTAÇÃODE TELA
![Page 31: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/31.jpg)
World IA Day 2019 | #WIAD2019
Orientação: Código de Barras para Pagamentos – App Itaú
![Page 32: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/32.jpg)
Critério WCAG diretamente afetado
![Page 33: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/33.jpg)
PLACEHOLDER
![Page 34: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/34.jpg)
Placeholder: Por quê devemos evitá-lo (quase) sempre?
Contraste não suficiente do Placeholder
“Problema”originalmente levantado:
![Page 35: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/35.jpg)
Placeholder: Por quê devemos evitá-lo (quase) sempre?
Uso de características sensoriais para indicar localização
“Insira abaixo...”
“Problema”real encontrado:
![Page 36: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/36.jpg)
Placeholder: Por quê devemos evitá-lo (quase) sempre?
O cliente não necessariamente precisa “digitar” para inserir o código de barras
E também um problema relacionado a experiência de uso...
![Page 37: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/37.jpg)
Placeholder: Por quê devemos evitá-lo (quase) sempre?
Mudança da labelSolução simples:
• Mensagem clara e objetiva;
• Comunicação neutra independentemente do método de entrada de dados;
• Eliminação da necessidade de uso do placeholder.
![Page 38: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/38.jpg)
Critérios WCAG diretamente afetados
![Page 39: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/39.jpg)
World IA Day 2019 | #WIAD2019
https://www.nngroup.com/articles/form-design-placeholders/
2014
https://www.pardot.com/blog/placeholders-and-labels/
2012
https://www.smashingmagazine.com/2018/06/placeholder-attribute/
2018
![Page 40: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/40.jpg)
Exemplos nodia a dia
![Page 41: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/41.jpg)
![Page 42: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/42.jpg)
Sugestão para o rótulo:
Descarte aqui suas cápsulas de café
Resíduo: Orgânico(Classe II A – A001)
![Page 43: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/43.jpg)
Em que momentodevo pensar emacessibilidade?
![Page 44: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/44.jpg)
“Acessibilidade não é algo que você pode deixar para o final.
Ela precisa fazer parte de todas as decisões, envolvendo todas as pessoas, de todas as disciplinas.”
![Page 45: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/45.jpg)
qualquer usuárioconsegue utilizar o seu
produto ou serviço?
reflexão...
![Page 46: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/46.jpg)
https://youtu.be/trdoe4ZtLuA
Vídeo:Sady Paulson: Apple Acessibilidade
![Page 47: Acessibilidade pensada para a experiência muito além de ...€¦ · Clique aqui para fazer o download do PDF. Se você ainda não é cadastrado, clique aqui para fazer o cadastro.](https://reader033.fdocumentos.tips/reader033/viewer/2022050222/5f67c1102002e964a43318f8/html5/thumbnails/47.jpg)
Obrigado!
instagram | twitter | medium
@msales
youtube
/todosPorAcessibilidade
@msales78
http://marcelosales.work
http://acessibilida.de
https://guia-wcag.com