Uma aplicação web acessível, permite que diferentes usuários tenham acesso ao conteúdo disponível. Mas como nós, pessoas envolvidas no desenvolvimento, projeto e teste de aplicações digitais, podemos gerar um produto acessível para todos? O que precisamos saber para desenvolver uma aplicação digital, seja ela web ou através de um aplicativo móvel? Mas você sabe quais informações são relevantes ao usuário para garantir isso? Sabe por onde começar? Bora, conhecer então sobre acessibilidade?
2. 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.
...
5. ”
É 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
“
13. É 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
18. 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
21. 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
23. 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.
<img
src=“image.png”
alt=“”
[...]
>
24. Contraste
TEXTO TEXTO
✘ errado ✓ correto
Existem sites e extensões que validam o contraste, conforme
as definições da WCAG
25. 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”>
28. Vídeos
● Legendas
● Não deve ter início
automático
● Sons que não possuem
sentido devem ter o volume
baixo ou inexistente
29. É 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.
30. Bora visitar a documentação da WCAG?
WCAG 2.1 Documentação
