Introdução à Acessibilidade na web
- 2. Nayama Rosa github.com/nayamarosa Aluna da 2ª geração na Laboratoria Solutions Assistant em Portais - everis linkedin.com/in/nayamarosa
- 3. Lei da Acessibilidade Lei da Empatia Lei Brasileira da Inclusão(LBI) - Lei 13.146 de 6 de julho de 2015 “Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.”
- 4. “para uso da pessoa com deficiência” ● Cognitivos (autismo, dislexia, TDAH) ● Surdez (bilíngues) ● Deficiência Física (limitação de movimentos nas mãos) ● Baixa visão (catarata) ● Cegas
- 5. “conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente” ● Web Content Accessibility Guidelines(WCAG) - Diretrizes de acessibilidade de conteúdo para web ● 3 níveis: A, AA ou AAA ● acessibilida.de - Marcelo Sales
- 6. HTML semântico Faz certo que funciona
- 7. Tags ● SEO ● acessibilidade ● MDN - aproximadamente 100 tags ● tag relacionada ao seu conteúdo ○ h1, h2, h3, h4, h5 e h6 ○ ul, ol e li ○ nav ○ header ○ footer
- 8. Mas e a div?
- 10. WAI-ARIA #pracegoler Accessible Rich Internet Applications(ARIA) - Aplicações Ricas para tornar a Internet Acessível ● roles: mudar o papel de um elemento(main, search) ● propriedades: (aria-label, aria-autocomplete) ● estados: (aria-checked, aria-disabled, aria-expanded, aria-invalid)
- 11. Apps e plugins/extensões Testando o site Leitores de tela Plugins/extensões Jaws VoiceOver NVDA Orca axe hand talk Kontrast TalkBack
- 12. Navegação pelo leitor de tela(NVDA) Utilizando as teclas ● setas: todos os itens ● tab: clicáveis ● k: links ● g: imagens ● h: títulos ● l: listas ● i: item de lista Para voltar a leitura: Shift + Tecla
- 14. Dicas Começando do básico Página ● Lang Títulos e textos ● Evitar muitos h1 ● Evitar usar “x” ou @ para genêro Css ● List-style ● Display none ● Visibility hidden ● Responsivo
- 15. Dicas Começando do básico Imagens ● Redundâncias(geral) ● Ícones visuais ● Alt=“ ”/Aria-hidden Link ● Conteúdo principal Formulários ● Label for ● Focus/Outline ● Placeholder JavaScript ● Funções podem duplicar fala