Recommended
Recommended
More Related Content
Similar to Acessibilidade e Usabilidade em Design Digital
Similar to Acessibilidade e Usabilidade em Design Digital (20)
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
- 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”> <!-- Conteúdo principal da página --> </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
- 30. Plugin com recursos úteis de acessibilidade Outros plugins: https://wordpress.org/plugins/tags/a11y/