Acessibilidade e Usabilidade em Design Digital

1. em Design Digital Acessibilidade e Usabilidade

2. • Formado em Design Digital • Desenvolvedor front-end e Designer Gabriel Henrique @gabrielhenrique @gabrielhrs98 ghdesign.dev hastedesign.com.br

3. ACESSIBILIDADE USABILIDADE ACESSIBILIDADE Porque ser acessível?

4. Motivo e definição do tema Ponto de interrogação representando o motivo Símbolo universal da acessibilidade

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. ACESSIBILIDADE USABILIDADE OBJETIVO DA ACESSIBILIDADE Para quem podemos proporcionar a participação na web?

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. Daltonismo, Neurodiversidade, Idosos Representando o olho de uma pessoa daltônica Mente colorida representando a neurodiversidade Casal de idosos

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. WCAG Web Content Accessibility Guidelines Guia WCAG de Consulta Rápida Acessibilidade Toolkit

11. Tipos de navegação Teclado Tecnologias assistivas Mouse Assistente de voz

12. ACESSIBILIDADE USABILIDADE BOAS PRÁTICAS DE ACESSIBILIDADE Para designers e devs

13. accessmonitor.acessibilidade.gov.pt/amp https://developers.google.com/web/tools/lighthouse Lighthouse Validador de práticas acessíveis

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. Simulador de filtros daltônicos https://www.toptal.com/designers/colorfilter

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. 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. 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. Uso do alt para descrever a imagem <figure> <img src="imagem.jpg" alt="Minha Figura"> <figcaption>Informações da Figura</figcaption> </figure>

20. Inserindo texto alternativo pelo Guttenberg

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. Inserindo WAI-ARIA pelo Guttenberg ARIA: img role - MDN Mozilla

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”>  </div> </footer>

24. Before e After apenas para elementos de estilo q::before { content: ”<<”; color: blue; } q::after { content: “>>”; color: red; }

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. ACESSIBILIDADE USABILIDADE USABILIDADE Como seguir os conceitos na criação de layouts?

27. Princípios Centrado no usuário Processo iterativo Simples, claro e fácil

28. User Interface (UI) e User Experience (UX) Design de ExperiênciaDesign de Interface

29. ACESSIBILIDADE USABILIDADE ACESSIBILIDADE + WORDPRESS

30. Plugin com recursos úteis de acessibilidade Outros plugins: https://wordpress.org/plugins/tags/a11y/

31. Acessibilidade Usabilidade Design Digital

32. Obrigado! Dúvidas?