Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wiad 2019 - Criando barreiras, mesmo removendo-as

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.

Wiad 2019 - Criando barreiras, mesmo removendo-as

  1. 1. SÃO PAULO - BRAZIL
  2. 2. Criando barreiras, mesmo removendo-as!
  3. 3. 01WORLD IA DAY 2016 01WORLD IA DAY 2016 MARCELO SALES http://acessibilida.de http://marcelosales.work
  4. 4. WCAG
  5. 5. WCAG Web Content Accessibility Guidelines Content World IA Day 2019 | #WIAD2019
  6. 6. WCAG 2.1 4Princípios 13Recomendações 78Critérios de sucesso World IA Day 2019 | #WIAD2019
  7. 7. A AA AAA 30 20 28 Critérios de Sucesso78 World IA Day 2019 | #WIAD2019
  8. 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. 9. https://youtu.be/gem1qmA3qlE Vídeo: Maria Clara: o seu produto está preparado para as novas gerações?
  10. 10. Criando barreiras sem perceber...
  11. 11. LINKS
  12. 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. 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. 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. 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. 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. 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. 18. Critérios WCAG diretamente afetados
  19. 19. FOCO VISÍVEL
  20. 20. Foco Visível: Navegação por teclado – Site FastShop vídeo
  21. 21. Foco Visível: Navegação por teclado – Site Submarino vídeo
  22. 22. Foco Visível: Navegação por teclado – Site Itaú vídeo
  23. 23. Critérios WCAG diretamente afetados
  24. 24. http://outlinenone.com
  25. 25. BOTÕES
  26. 26. Botões: Exemplos visuais de botões
  27. 27. Botões: Comparador (Aspecto Visual vs. Aspecto Aural) - FastShop vídeo
  28. 28. Botões: Comparador (Aspecto Visual vs. Aspecto Aural) - Apple vídeo
  29. 29. Critérios WCAG diretamente afetados
  30. 30. ACIONAMENTO DE CONTEÚDO EM FOCO
  31. 31. Acionamento Acidental: Uso de Mouse Over - Itaú vídeo
  32. 32. Acionamento Acidental: Uso de Mouse Over – American Airlines vídeo
  33. 33. Critério WCAG diretamente afetado
  34. 34. Acionamento Acidental: Navegação por teclado com Voice Over – American Airlines vídeo
  35. 35. ORIENTAÇÃO DE TELA
  36. 36. World IA Day 2019 | #WIAD2019 Orientação: Código de Barras para Pagamentos – App Itaú
  37. 37. Critério WCAG diretamente afetado
  38. 38. ABREVIAÇÕES
  39. 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. 40. Critério WCAG diretamente afetado
  41. 41. PLACEHOLDER
  42. 42. Placeholder: Por quê devemos evitá-lo (quase) sempre? Contraste não suficiente do Placeholder “Problema” originalmente levantado:
  43. 43. Placeholder: Por quê devemos evitá-lo (quase) sempre? Uso de características sensoriais para indicar localização “Insira abaixo...” “Problema” real encontrado:
  44. 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. 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. 46. Critérios WCAG diretamente afetados
  47. 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. 48. World IA Day 2019 | #WIAD2019 https://a11yproject.com/posts/placeholder-input-elements/
  49. 49. qualquer usuário consegue utilizar o seu produto ou serviço? reflexão...
  50. 50. https://youtu.be/trdoe4ZtLuA Vídeo: Sady Paulson: Apple Acessibilidade
  51. 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

×