O documento discute conceitos de acessibilidade digital, como permitir que pessoas com deficiência acessem aplicações e informações na web de forma inclusiva. Aborda princípios de acessibilidade como percepção, operação e compreensão, além de diretrizes como WCAG. Também fornece dicas sobre foco, tabindex, gerenciamento de foco, erros e testes de acessibilidade.

2. GISELY LUCAS
QUEM SOU?
Cientista da Computação, por formação.
Engenheira de software na CI&T. Possui
experiência em desenvolvimento de
aplicações web
...
/giselylucas
gisely.lucas@gmail.com

3. ACESSIBILIDADE
Motivos para falar sobre

5. ENTENDENDO A
ACESSIBILIDADE
Entendendo conceitos

6. ACESSIBILIDADE
"Facilidade de acesso, qualidade do que é
acessível", dicionário Michaelis.
"É permitir que pessoas com deficiências ou
mobilidade reduzida participem de atividades
que incluem o uso de produtos, serviços e
informação.", Governo Federal do Brasil.

7. ACESSIBILIDADE E INCLUSÃO

8. ACESSIBILIDADE DIGITAL
Aplicando, desenvolvendo, evoluindo aplicações digitais

9. Para as pessoas sem deficiência a
tecnologia torna as coisas mais fáceis.
Para as pessoas com deficiência, a
tecnologia torna as coisas possíveis.
Mary Pat Radabaugh

10. ACESSIBILIDADE DIGITAL
Permitir e tornar o acesso à informação global;
Entender sobre a diversidade de usuários;
Entender que acessibilidade não impacta apenas pessoas
com deficiências;
Escutar e tentar entender o outro.
Fala mais sobre ...

11. W3C + WAI
World Wide Web Consortium
Web Accessibility Initiative
WCAG
PRINCÍPIOS
Percepção, Operação, Compreensão e Robusta
NÍVEIS
A, AA e AAA
O QUE EXISTE?
Diretrizes, Ferramentas e muitas dicas

12. GERENCIAMENTO DE
FOCO
Do essencial ao desnecessário

13. DOM E A11Y
Document Object Model
Interface de programação de aplicativos (API)
Define a estrutura lógica e forma de acesso/manipulação do documento.
Árvore de Acessibilidade
Accessibility Tree
Formato sintetizado da árvore do DOM
Está diretamente relacionada a semântica do HTML

14. Fonte: site Web Developers - Árvore de Acessibilidade

15. FOCO
Controle da tela via teclado.
Navegação pela tecla TAB e setas (seleção).
Elementos interativos já possuem foco implícito.
A ordem da tabulação, garante uma navegação
coerente.

16. TABINDEX
tabindex=“-1”: não recebe o foco pelo
teclado, mas pode ter o foco via JS.
tabindex=“0”: recebe o foco tanto pelo
teclado quanto pelo JS.
tabindex=“3”: quebra a ordem de tabulação.
tabindex com valores diferentes de -1 e 0 não é uma
boa prática.

17. GERENCIAMENTO DE FOCO
O que é?
Controle dos elementos que vão receber o foco

18. O QUE É ESSENCIAL?
Manter o outline
Foco Itinerante
Skip link: Links ocultos que
pulam a navegação.

19. O QUE É ESSENCIAL?
Mensagens de Erro
Alertas
Vídeos e controladores de
conteúdo

20. OPS!
Adicionar tabindex em elementos interativos,
sem necessidade.
Adicionar tabindex em elementos não
interativos.
Não dar preferências a elementos nativos.
Prender o foco em um elemento.
Ter elementos com foco oculto

21. EXCEÇÕES: foco em elementos não interativos

22. EXCEÇÕES: manter o foco em modais
Capturar o elemento que ativou a
modal.
Capturar o primeiro elemento com
foco.
Criar mecanismos para prender o
laço de teclado na modal. Ex: evento
keydown.

23. Automação
Pode cobrir de 25% a 30%
dos cenários de teste.
Funcionais
Os testes manuais deve
ser a principal forma de
validação.
Se possível, incluir PCDs
no processo.
Testes
Ferramentas
Validadores on-line
Plugins de verificação
Leitores de Tela
Ex: lighthouse, pa11y

24. DICAS DE FERRAMENTAS

25. Algumas referências legais

26. REFERÊNCIAS
WCAG 2.1 Documentação - https://www.w3.org/WAI/WCAG21/quickref
Toolkit de Acessibilidade - Marcelo Sales - http://acessibilidadetoolkit.com/
WebAIM - https://webaim.org/
Web Accessibility - curso na Udacity
Web Developers - Acessibilidade

27. OBRIGADA!
DÚVIDAS?
giselylucas (linkedin)
gisely.lucas@gmail.com