Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web?...
Transcript of Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web?...
![Page 2: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/2.jpg)
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.
...
![Page 3: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/3.jpg)
Qual o motivo de se falar em ACESSIBILIDADE?
![Page 4: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/4.jpg)
![Page 5: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/5.jpg)
Acessibilidade e Inclusão, o que é?
![Page 6: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/6.jpg)
Comum
Acessibilidade
Grupos de usuários
![Page 7: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/7.jpg)
Como começar a pensar e desenvolver de forma acessível?
![Page 8: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/8.jpg)
Tentar se colocar no lugar do outro
![Page 9: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/9.jpg)
É 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
![Page 10: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/10.jpg)
Diretrizes para desenvolver de forma acessível
![Page 11: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/11.jpg)
Percepção
Princípios
1º
3º
2º
4º
Operação
Compreensão Robusta
![Page 12: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/12.jpg)
Dicas para desenvolver de forma acessível
![Page 13: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/13.jpg)
Gerenciamento de FocoConstruir aplicações que sejam totalmente acessíveis e operáveis pelo teclado.
● Semântica● Estilo
![Page 14: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/14.jpg)
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
![Page 15: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/15.jpg)
FormuláriosOs campos devem sempre estar relacionados a um rótulo
![Page 16: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/16.jpg)
Uso do Alt em Imagens
<img>: 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.
<imgsrc=“image.png”alt=“”[...]
>
![Page 17: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/17.jpg)
Vídeos
● Legendas● Não deve ter início
automático● Sons que não possuem
sentido devem ter o volume baixo ou inexistente
![Page 18: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/18.jpg)
Botões
Preferência ao uso da tag <button>
Caso necessário usar um link como botão:
usar os atributos ARIA
<buttontype=“button”>
Botão 1</button>
<aclass=“button”role=“button”src=“link.html”>
![Page 19: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/19.jpg)
Contraste
TEXTO TEXTO
✘ errado ✓ correto
Existem sites e extensões que validam o contraste, conforme as definições da WCAG
![Page 20: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/20.jpg)
Espaçamento entre as letras
![Page 21: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/21.jpg)
Espaçamento entre as linhas
![Page 22: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/22.jpg)
É 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.
![Page 23: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/23.jpg)
![Page 24: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/24.jpg)
TestesValidação do código lindão!
![Page 25: Pensando em acessibilidade Web? - Amazon S3 · 2019-06-17 · Pensando em acessibilidade Web? gisely.lucas@gmail.com. Gisely Lucas Bernardino Cientista da Computação, por formação.](https://reader033.fdocumentos.tips/reader033/viewer/2022042401/5f107f5e7e708231d4496706/html5/thumbnails/25.jpg)
Dúvidas???