Slides da apresentação que fiz para o WIAD 2019 (Dia Mundial da Arquitetura de Informação) que ocorreu simultaneamente em mais de 60 cidades pelo mundo e tive a oportunidade de participar da edição em São Paulo. O tema para todos era "Design pela Diferença" e o tema da minha apresentação foi "Criando barreiras, mesmo removendo-as" e falei um pouco dos problemas ao se pensar em uma acessibilidade parcial sem envolver de fato todos os usuários em projetos. O foco principal foi a importância em se utilizar a WCAG para ser aplicada em seus projetos e como cada um dos critérios pode afetar diversas situações em seus projetos.

1. SÃO PAULO - BRAZIL

2. Criando barreiras,
mesmo removendo-as!

3. 01WORLD IA DAY 2016 01WORLD IA DAY 2016
MARCELO
SALES
http://acessibilida.de
http://marcelosales.work

4. WCAG

5. WCAG
Web Content Accessibility Guidelines
Content
World IA Day 2019 | #WIAD2019

6. WCAG 2.1
4Princípios
13Recomendações
78Critérios
de sucesso
World IA Day 2019 | #WIAD2019

7. A AA AAA
30 20 28
Critérios de Sucesso78
World IA Day 2019 | #WIAD2019

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
World IA Day 2019 | #WIAD2019

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. ACIONAMENTO
DE CONTEÚDO
EM FOCO

31. Acionamento Acidental: Uso de Mouse Over - Itaú vídeo

32. Acionamento Acidental: Uso de Mouse Over – American Airlines vídeo

33. Critério WCAG diretamente afetado

34. Acionamento Acidental: Navegação por teclado com Voice Over – American Airlines vídeo

35. ORIENTAÇÃO
DE TELA

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

37. Critério WCAG diretamente afetado

38. ABREVIAÇÕES

39. Abreviações: Informação simples e sem complicação
“Faltam 2A 04M”
anos meses
https://www.facebook.com/groups/todosporacessibilidade/permalink/549522132202469/
Discussão iniciada no grupo Todos por Acessibilidade - Facebook

40. Critério WCAG diretamente afetado

41. PLACEHOLDER

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

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

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

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

46. Critérios WCAG diretamente afetados

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

48. World IA Day 2019 | #WIAD2019
https://a11yproject.com/posts/placeholder-input-elements/

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

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

51. Obrigado!
http://marcelosales.work
Dúvidas?
instagram | twitter | medium
@msales
youtube
/todosPorAcessibilidade
linkedIn
@msales78
Marcelo Sales
http://guiawcag.com http://acessibilida.de
msales@acessibilida.de