Slide 1
Slide 1 text
DESENVOLVENDO
APLICAÇÕES ACESSÍVEIS
O que é preciso entender para mudar a mentalidade?
Gisely Lucas Bernardino
Slide 2
Slide 2 text
GISELY LUCAS
QUEM SOU?
Cientista da Computação, por formação.
Engenheira de software na CI&T.
Co-fundadora da Desplugue-se. Possui
experiência em desenvolvimento de
aplicações web
...
/giselylucas
[email protected]
Slide 3
Slide 3 text
ACESSIBILIDADE
Motivos para falar sobre
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
ENTENDENDO A
ACESSIBILIDADE
Entendendo conceitos
Slide 6
Slide 6 text
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.
Slide 7
Slide 7 text
ACESSIBILIDADE E INCLUSÃO
Slide 8
Slide 8 text
ACESSIBILIDADE DIGITAL
Aplicando, desenvolvendo, evoluindo aplicações digitais
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
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 ...
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
ENTENDENDO A
ACESSIBILIDADE DIGITAL
Do essencial ao desnecessário
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Fonte: site Web Developers - Árvore de Acessibilidade
Slide 15
Slide 15 text
DESENVOLVIMENTO
Dicas e experiências
Slide 16
Slide 16 text
SEMÂNTICA
A ordem semântica dos elementos deve fazer
sentido.
Caso necessário, utilize CSS para mover o
elemento visualmente.
A semântica é extremamente importante para a
construção correta da árvore de acessibilidade.
![]()
Slide 17
Slide 17 text
ATRIBUTOS ARIA
Accessible Rich Internet Applications
Permite adicionar semântica a elementos
do HTML
Modifica a árvore de acessibilidade
Os atributos ARIA não devem ser usados como foco
principal.
Slide 18
Slide 18 text
GERENCIAMENTO DE FOCO
Construir aplicações que sejam
operadas via teclado.
Controlar o foco
Elementos interativos
Outline
Atenção com foco oculto!
Slide 19
Slide 19 text
FORMULÁRIOS
Rótulo em todos os campos
Agrupe campos relacionados
Forneça instruções sobre o
preenchimento
Erros e validações devem ser reportados
Quebre formulários longos
Slide 20
Slide 20 text
Fonte: site Web Developers - Árvore de Acessibilidade
Slide 21
Slide 21 text
Slide 22
Slide 22 text
Diferença de “luminância” ou
brilho entre duas cores
Proporção recomendada: 4,5:1
CONTRASTE
Se as cores do texto e do fundo forem invertidas, a
proporção continua a mesma.
TEXTO
TEXTO
✘ errado
✓ correto
Slide 23
Slide 23 text
Elementos interativos devem ter uma
área de toque significativa.
Elementos de formulários devem ter
um espaçamento mínimo definido
ÁREA DE TOQUE
Botões, Links, Itens de Formulários e Menus.
Atenção especial em áreas de toque para Menu
Slide 24
Slide 24 text
Espaçamento entre linhas e letras.
Alinhar textos à esquerda
Construir layout linear e lógico
garantindo boa leitura em ampliações
Evite textos longos e complexos.
TEXTOS e LAYOUT
Em links evitar deixar o texto genérico como: clique
aqui, leia mais, etc
Slide 25
Slide 25 text
CONTROLE DE ALERTAS E MENSAGENS
Controle de foco
Reportar a informação
Atributos ARIA
aria-invalid
aria-required
aria-live
Slide 26
Slide 26 text
CONTROLE DE 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.
Slide 27
Slide 27 text
ÁUDIOS E VÍDEOS
Legendas/transcrições
Não ter início automático
Sons que não possuem sentido
devem ter o volume baixo ou
inexistente
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
É PRECISO TER EM MENTE
● Permitir e tornar o acesso à informação
global;
● Fornecer a mesma funcionalidade de
diferentes formas.
● As informações devem ser claras.
● Todos os usuários devem ter o mesmo tipo de
informação.
Slide 30
Slide 30 text
DICAS DE FERRAMENTAS
Slide 31
Slide 31 text
Algumas referências legais
Slide 32
Slide 32 text
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
Movimento Web para todos - https://mwpt.com.br/
Dentre outras