O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Acessibilidade e Usabilidade em Design Digital

A palestra Acessibilidade e Usabilidade em Design Digital foi realizada no ano de 2020, durante o evento WordCamp SP 2020. Foi abordado uma introdução sobre Acessibilidade, como se encontra no Brasil, para quem somos acessíveis, Inclusão Digital, além de práticas acessíveis na web, alguns conceitos de Usabilidade e a relação entre WordPress e Acessibilidade.

É possível ver o vídeo gravado ao vivo no dia da palestra por aqui (https://youtu.be/WCPNLdGwSGA?t=4200)

  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Acessibilidade e Usabilidade em Design Digital

  1. 1. em Design Digital Acessibilidade e Usabilidade
  2. 2. • Formado em Design Digital • Desenvolvedor front-end e Designer Gabriel Henrique @gabrielhenrique @gabrielhrs98 ghdesign.dev hastedesign.com.br
  3. 3. ACESSIBILIDADE USABILIDADE ACESSIBILIDADE Porque ser acessível?
  4. 4. Motivo e definição do tema Ponto de interrogação representando o motivo Símbolo universal da acessibilidade
  5. 5. Cenário atual 24% da população brasileira possui alguma deficiênciaFonte: Censo 2010 / IBGE 99% dos sites não são acessíveis Fonte: Web Para Todos - 2020
  6. 6. ACESSIBILIDADE USABILIDADE OBJETIVO DA ACESSIBILIDADE Para quem podemos proporcionar a participação na web?
  7. 7. Deficiência Permanente x Temporária x Situacional Mulher em uma cadeira de rodas Mulher com criança de colo Homem com muleta e andador em uma perna
  8. 8. Daltonismo, Neurodiversidade, Idosos Representando o olho de uma pessoa daltônica Mente colorida representando a neurodiversidade Casal de idosos
  9. 9. Inclusão Digital Lei Brasileira de Inclusão da Pessoa com Deficiência LBIAcesso à internet e domínio das ferramentas LEI Nº 13.146, DE 6 DE JULHO DE 2015.
  10. 10. WCAG Web Content Accessibility Guidelines Guia WCAG de Consulta Rápida Acessibilidade Toolkit
  11. 11. Tipos de navegação Teclado Tecnologias assistivas Mouse Assistente de voz
  12. 12. ACESSIBILIDADE USABILIDADE BOAS PRÁTICAS DE ACESSIBILIDADE Para designers e devs
  13. 13. accessmonitor.acessibilidade.gov.pt/amp https://developers.google.com/web/tools/lighthouse Lighthouse Validador de práticas acessíveis
  14. 14. Tipografia Dicas para tornar a leitura confortável Espaço entre linhas Dimensão do texto Contraste entre cor do texto e cor de fundo
  15. 15. Simulador de filtros daltônicos https://www.toptal.com/designers/colorfilter
  16. 16. HTML Base para semântica <header> <nav class=”main-menu”> <img class=”logo”/> </nav> </header> <main> <section> <h1>Título de primeiro nível</h1> <article> <h2>Título de segundo nível</h2> <a href=”página.com”>Link para página</a> </article> <aside class=”sidebar”> <p>Parágrafo de texto</p> </aside> </section> </main>
  17. 17. HTML Base para hierarquia <section class=”container”> <img class=”step-1” /> <img class=”step-2” /> <img class=”step-3” /> <img class=”step-4” /> </section> Google Material Design - Hierarquia Visual
  18. 18. Resposta visual de interação à links • Adicione :focus e :active nos links • Todos links devem ter acesso via teclado e mouse • Exiba resposta visual além da mudança de cor no link unvisited visited hover focused active
  19. 19. Uso do alt para descrever a imagem <figure> <img src="imagem.jpg" alt="Minha Figura"> <figcaption>Informações da Figura</figcaption> </figure>
  20. 20. Inserindo texto alternativo pelo Guttenberg
  21. 21. WAI-ARIA Web Accessibility Initiative Accessible Rich Internet Applications Função (Role) <footer class=”footer” role=“contentinfo”> </footer> Propriedades (Properties) <svg aria-label=”Facebook” class=“icon”> <use xlink:href=”/assets/svg/icons.svg#facebook”></use> </svg> Estados (States) <span id="check" role="checkbox" aria-required="true" aria-checked="false"></span> <label for="check">Marque esse campo*</label>
  22. 22. Inserindo WAI-ARIA pelo Guttenberg ARIA: img role - MDN Mozilla
  23. 23. Disponíveis apenas para leitores de tela <body> <a href=”#content” class=“sr-only sr-only- focusable skip-link”> Pular para o conteúdo principal </a> <div class=”container” id=”content” tabindex=”-1”> <!-- Conteúdo principal da página --> </div> </footer>
  24. 24. Before e After apenas para elementos de estilo q::before { content: ”<<”; color: blue; } q::after { content: “>>”; color: red; }
  25. 25. Como tornar um SVG acessível <svg version="1" id="cat" viewBox="0 0 720 800"> <title>cat</title> <path id="tail" data-name="tail" class="cls-1" d="M545.9,695.9c8,28.2,23.2,42.3,27.2,46.9,21.4,24. 1,41.5,40.2,81.1,42.9s65.4-14.2,60.8-26.8-23.1-9.1- 51.3-8.3c-35.2.9-66.6-31.3-74.8-63.9s-7.9-63.8- 36.8-85.5c-44.1-33-135.6-7.1-159.8-3.4s-48.4,52.5- 9.6,45.1,91.4-23.1,123.2- 12.7C537.8,640.4,537.9,667.7,545.9,695.9Z" transform="translate(-9.7 -9.3)"/> <g id="body"> <path id="bg" class="cls-2" d="M447.9,502.1c2.1,151.7-108.3,167- 216.5,167S9.7,663.8,9.7,510.9,85,242.9,231.3,241,44 5.8,350.4,447.9,502.1h0Z" transform="translate(-9.7 -9.3)"/> </g> </svg>
  26. 26. ACESSIBILIDADE USABILIDADE USABILIDADE Como seguir os conceitos na criação de layouts?
  27. 27. Princípios Centrado no usuário Processo iterativo Simples, claro e fácil
  28. 28. User Interface (UI) e User Experience (UX) Design de ExperiênciaDesign de Interface
  29. 29. ACESSIBILIDADE USABILIDADE ACESSIBILIDADE + WORDPRESS
  30. 30. Plugin com recursos úteis de acessibilidade Outros plugins: https://wordpress.org/plugins/tags/a11y/
  31. 31. Acessibilidade Usabilidade Design Digital
  32. 32. Obrigado! Dúvidas?

×