O documento discute a importância da acessibilidade na experiência do usuário, mencionando exemplos de como pequenos detalhes podem criar barreiras. Também apresenta princípios e critérios WCAG para tornar conteúdos e interfaces acessíveis.

1. Acessibilidade pensada para a experiência
muito além de “7 dicas básicas”
Marcelo SalesFlorianópolis 2019

2. http://marcelosales.work
http://acessibilida.de
http://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 desenvolvendo
uma cultura de acessibilidade para todas as áreas internas.

3. 7

4. WCAG

5. WCAG
Web Content Accessibility Guidelines
Content

6. WCAG 2.1
4Princípios
13Recomendações
78Critérios
de sucesso

7. A AA AAA
30 20 28
Critérios de Sucesso78

8. 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

9. https://youtu.be/gem1qmA3qlE
Vídeo:
Maria Clara: o seu produto está preparado para as novas gerações?

10. Criando barreiras
sem perceber...

11. LINKS

12. 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

13. 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)

14. 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”

15. 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”

16. 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

17. 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

18. Critérios WCAG diretamente afetados

19. FOCO VISÍVEL

20. Foco Visível: Navegação por teclado – Site FastShop vídeo

21. Foco Visível: Navegação por teclado – Site Submarino vídeo

22. Foco Visível: Navegação por teclado – Site Itaú vídeo

23. Critérios WCAG diretamente afetados

24. http://outlinenone.com

25. BOTÕES

26. Botões: Exemplos visuais de botões

27. Botões: Comparador (Aspecto Visual vs. Aspecto Aural) - FastShop vídeo

28. Botões: Comparador (Aspecto Visual vs. Aspecto Aural) - Apple vídeo

29. Critérios WCAG diretamente afetados

30. ORIENTAÇÃO
DE TELA

31. World IA Day 2019 | #WIAD2019
Orientação: Código de Barras para Pagamentos – App Itaú

32. Critério WCAG diretamente afetado

33. PLACEHOLDER

34. Placeholder: Por quê devemos evitá-lo (quase) sempre?
Contraste não
suficiente do
Placeholder
“Problema”
originalmente levantado:

35. Placeholder: Por quê devemos evitá-lo (quase) sempre?
Uso de
características
sensoriais para
indicar localização
“Insira abaixo...”
“Problema”
real encontrado:

36. 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...

37. Placeholder: Por quê devemos evitá-lo (quase) sempre?
Mudança da label
Soluçã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.

38. Critérios WCAG diretamente afetados

39. 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

40. Exemplos no
dia a dia

42. Sugestão para o rótulo:
Descarte aqui suas
cápsulas de café
Resíduo: Orgânico
(Classe II A – A001)

43. Em que momento
devo pensar em
acessibilidade?

44. “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.”

45. qualquer usuário
consegue utilizar o seu
produto ou serviço?
reflexão...

46. https://youtu.be/trdoe4ZtLuA
Vídeo:
Sady Paulson: Apple Acessibilidade

47. Obrigado!
instagram | twitter | medium
@msales
youtube
/todosPorAcessibilidade
linkedIn
@msales78
http://marcelosales.work
http://acessibilida.de
https://guia-wcag.com