Este documento introduz os conceitos de acessibilidade na web, discutindo a Lei Brasileira de Inclusão, as diretrizes WCAG e como tornar conteúdos, HTML, CSS e JavaScript acessíveis. Também fornece dicas como usar tags semânticas, WAI-ARIA, testar com leitores de tela e melhorar a navegação e experiência de usuários com deficiência.

1. 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

13. Vídeo da navegação

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

16. Obrigada!
github.com/nayamarosa linkedin.com/in/nayamarosa