Slide 2
Slide 2 text
Gisely Lucas Bernardino
Cientista da Computação,
por formação. Engenheira
de software na CI&T.
Possui experiência em
desenvolvimento de
aplicações web.
...
Slide 3
Slide 3 text
ACESSIBILIDADE,
Como me encontrei nela.
Slide 4
Slide 4 text
O que é ACESSIBILIDADE?
Slide 5
Slide 5 text
”
É permitir que pessoas com deficiências ou mobilidade
reduzida participem de atividades que incluem o uso de
produtos, serviços e informação.
Descrição de Acessibilidade para o Governo Federal do Brasil
http://www.acessoainformacao.gov.br/acessibilidade
“
Slide 6
Slide 6 text
ACESSIBILIDADE,
motivos para falar sobre.
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Entendendo acessibilidade digital
Slide 9
Slide 9 text
Comum
Acessibilidade
Grupos de
usuários
Slide 10
Slide 10 text
Diversidade de usuários
Deficiências
temporárias
Deficiência
auditiva
Deficiência Motora
Deficiências
Cognitivas
Deficiência visual
Outros ...
Slide 11
Slide 11 text
Como começar a pensar e desenvolver de
forma acessível?
Slide 12
Slide 12 text
Tentar se colocar no
lugar do outro
Slide 13
Slide 13 text
É preciso pensar em acessibilidade em todas as
fases
● Levantamento de
requisitos
● Arquitetura do
projeto
● Prototipação
● Validação com o
Cliente
● Desenvolvimento
● Testes
● Implantação
Slide 14
Slide 14 text
Diretrizes para desenvolver de forma acessível
Slide 15
Slide 15 text
Percepção
Princípios
1º
3º
2º
4º
Operação
Compreensão Robusta
Slide 16
Slide 16 text
Dicas para desenvolver de forma acessível
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Semântica
A ordem semântica dos elementos
deve fazer sentido.
Caso necessário, utilize CSS para
mover o elemento visualmente.
![]()
Slide 19
Slide 19 text
Gerenciamento de Foco
Construir aplicações
que sejam totalmente
acessíveis e operáveis
pelo teclado.
● Semântica
● Estilo
Slide 20
Slide 20 text
Área de toque/interação
Elementos interativos,
devem ter uma área de
toque significativa.
● Formulários
● Botões
● Menus
TEXTO
TEXTO
Slide 21
Slide 21 text
Formulários
Algumas dicas para construir um
formulário acessível:
● 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 22
Slide 22 text
Controle de Alertas e mensagens
● Controle do Foco
● Reportar a
informação
Slide 23
Slide 23 text
Uso do Alt em Imagens
![]()
: tag que permite o leitor de
tela identificar que ali existe uma
imagem com sentido para o usuário
alt: atributo de texto alternativo.
Deve conter uma descrição breve e
com sentido referente ao conteúdo
da imagem.
Slide 24
Slide 24 text
Contraste
TEXTO TEXTO
✘ errado ✓ correto
Existem sites e extensões que validam o contraste, conforme
as definições da WCAG
Slide 26
Slide 26 text
Espaçamento entre as letras
Slide 27
Slide 27 text
Espaçamento entre as linhas
Slide 28
Slide 28 text
Vídeos
● Legendas
● Não deve ter início
automático
● Sons que não possuem
sentido devem ter o volume
baixo ou inexistente
Slide 29
Slide 29 text
É preciso ter sempre em mente
● 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
Bora visitar a documentação da WCAG?
WCAG 2.1 Documentação
Slide 31
Slide 31 text
Testes
Validação do código lindão!
Slide 32
Slide 32 text
Bora assistir?
Slide 33
Slide 33 text
Dúvidas???
Slide 34
Slide 34 text
OBRIGADA!!!
Gisely Lucas Bernardino
[email protected] (email)
@giselylucasb (linkedin)