Vamos falar de desenvolvimento com Acessibilidade?

Vamos falar de desenvolvimento com acessibilidade? [email protected]

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

ACESSIBILIDADE, Como me encontrei nela.

O que é ACESSIBILIDADE?

” É permitir que pessoas com deﬁciê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 “

ACESSIBILIDADE, motivos para falar sobre.

Entendendo acessibilidade digital

Comum Acessibilidade Grupos de usuários

Diversidade de usuários Deficiências temporárias Deficiência auditiva Deficiência Motora Deficiências
Cognitivas Deficiência visual Outros ...

Como começar a pensar e desenvolver de forma acessível?

Tentar se colocar no lugar do outro

É 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

Diretrizes para desenvolver de forma acessível

Percepção Princípios 1º 3º 2º 4º Operação Compreensão Robusta

Dicas para desenvolver de forma acessível

Semântica A ordem semântica dos elementos deve fazer sentido. Caso
necessário, utilize CSS para mover o elemento visualmente. <html> <header> <navigation> <body> <img> <p> </body> <footer> </html

Gerenciamento de Foco Construir aplicações que sejam totalmente acessíveis e
operáveis pelo teclado. • Semântica • Estilo

Área de toque/interação Elementos interativos, devem ter uma área de
toque signiﬁcativa. • Formulários • Botões • Menus TEXTO TEXTO

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

Controle de Alertas e mensagens • Controle do Foco •
Reportar a informação

Uso do Alt em Imagens <img>: tag que permite o
leitor de tela identiﬁcar 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. <img src=“image.png” alt=“” [...] >

Contraste TEXTO TEXTO ✘ errado ✓ correto Existem sites e
extensões que validam o contraste, conforme as deﬁnições da WCAG

Elementos Interativos Dê preferência ao uso da tag padrões do
HTML. Ex: <button> Caso necessário adaptar um elemento, utilize os atributos ARIA <button type=“button”> Botão 1 </button> <a class=“button” role=“button” src=“link.html”>

Espaçamento entre as letras

Espaçamento entre as linhas

Vídeos • Legendas • Não deve ter início automático •
Sons que não possuem sentido devem ter o volume baixo ou inexistente

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

Bora visitar a documentação da WCAG? WCAG 2.1 Documentação

Testes Validação do código lindão!

Bora assistir?

Dúvidas???

OBRIGADA!!! Gisely Lucas Bernardino [email protected] (email) @giselylucasb (linkedin)

Vamos falar de desenvolvimento com Acessibilidade?

Vamos falar de desenvolvimento com Acessibilidade?

Gisely Lucas

More Decks by Gisely Lucas

Other Decks in Programming

Featured

Transcript