Acessibilidade Digital - Boas Práticas (Parte 4)

Prévia do material em texto

Acessibilidade Digital
Parte 4 - Boas práticas
Resumo do Bootcamp da HOW
Sumário
Boas Práticas: Conteúdo Textual
Tamanho da fonte
Textos nos links de conteúdo
Espaçamento entre linhas
SEO
Boas Práticas: Mídias
Transcrição de vídeo
Transcrição de áudio
Imagem
Boas Práticas: Aspectos Visuais
Navegação por teclado
Feedbacks em formulários
Gráficos
Boas Práticas: Neurodiversidade
Objetividade
Organização de conteúdo
Previsibilidade
Diagramação e tipografia
Boas Práticas: Conteúdo Textual
Tamanho da fonte
Tamanhos e pesos maiores de fontes são percebidos nas interfaces mais facilmente.
Textos nos links de conteúdo
Todos os links precisam ter uma descrição que facilite a compreensão do usuário. Em vez
de dizer apenas “clique aqui”, explicar para as pessoas usuárias o que acontecerá se elas
clicarem no link.
em vez de: preferir:
Clique aqui. Clique aqui para fazer o download.
Espaçamento entre linhas
O espaçamento entre linhas mais adequado é de 1,5x o tamanho da fonte usado. Isso
torna o conteúdo mais legível para a maior parte das pessoas.
Exemplo: se estiver usando uma fonte 10px, use espaçamento 15px.
➔ Como cada tipografia tem uma característica diferente, essas regras podem ser
adaptadas conforme as necessidades das pessoas usuárias.
SEO
Elementos importantes para obter melhor rankeamento no Google:
● Metadados
● Texto alternativo de imagens
● Texto âncora de link
● Estrutura de tag de título
● Design de site acessível
● Transcrição de áudio e vídeo
Boas Práticas: Mídias
Transcrição de vídeo
Entre as formas de transcrição de vídeo, estão:
● Janela de libras
○ Prestar atenção às dimensões da janela em relação à tela, para que o
conteúdo não seja prejudicado e as pessoas consigam assistir
apropriadamente.
● Legenda
○ Legendas automatizadas muitas vezes não captam as palavras
corretamente, por isso a legenda manual é importante.
○ Banners automáticos não são adequados, o melhor é que a pessoa usuária
possa escolher se deseja passá-los manualmente ou não.
Transcrição de áudio
● Legenda
○ Assim como nos vídeos, os áudios (como podcasts) também precisam
oferecer uma alternativa de consumo às pessoas usuárias. E as legendas
precisam ser feitas (ou ajustadas) manualmente para evitar erros.
Imagem
● Atributo ALT
○ As imagens precisam ser descritas para que sejam lidas pelo leitor de tela.
○ Imagens unicamente decorativas não precisam ser descritas.
○ Descrever as descrições de forma que sejam relevantes ao contexto em
que a imagem está inserida, nem tudo precisa ser descrito.
○ Evitar redundâncias com o texto.
Boas Práticas: Aspectos Visuais
Navegação por teclado
É importante ter o estado de foco para que a navegação por teclado seja facilitada.
Estado de foco é o destaque do elemento selecionado, para que a pessoa usuária
consiga se localizar com facilidade.
Feedbacks em formulários
● Não usar somente a cor para representar um status ou informação. Usar também
outro recurso gráfico (ícones ou imagens) e suporte textual.
● Dar feedbacks em tempo real, em vez de apenas ao término do formulário
completo.
Gráficos
Dependendo da complexidade do gráfico, sua acessibilidade pode ser feita:
● De forma nativa, com código interativo. Assim a pessoa usuária consegue navegar
pelas informações e interpretá-las por conta própria.
● Por descrição de imagem, já fazendo as considerações necessárias.
Não usar apenas cores, mas também padrões e texturas diferentes.
● Isso ajuda em casos de daltonismo, por exemplo.
● Organizar padrões e texturas de acordo com tópicos.
● Em vez de usar legendas ao lado do gráfico, colocar a porcentagem já no próprio
gráfico facilita sua interpretação.
Boas Práticas: Neurodiversidade
Pessoas neurodivergentes são pessoas que têm um processo de pensamento
neuroatípico. Exemplo: pessoas com TDAH, autismo, sinestesia, discalculia.
Objetividade
Eliminar o excesso de informações que possam sobrecarregar a parte sensorial ou tirar o
foco da atenção no conteúdo.
Organização de conteúdo
No ambiente de trabalho:
● Dividir o conteúdo em tópicos
● Usar poucas cores
● Usar apenas uma tipografia
Nos produtos:
● Adotar visuais mais limpos e agradáveis
● Informações objetivas e claras
Previsibilidade
● Evitar telas que possuam um tempo limitado para a pessoa interagir e não
informem o tempo restante. As pessoas podem precisar de mais tempo que o
fornecido. É importante oferecer controle de tempo.
● Ter elementos familiares vai reduzir a carga cognitiva e o esforço da pessoa
usuária. Exemplo: botão de like, cor azul para links.
Diagramação e tipografia
A diagramação de um texto e a escolha da tipografia pode melhorar a experiência das
pessoas ou tornar o conteúdo inacessível.
● Evitar textos justificados.
● Evitar tipografias que não diferenciam as letras I e L quando maiúsculas.
● Antes de escolher a família tipográfica para um projeto, testar se as letras geram
algum conflito.