Skip to content
Gallery
Visia University
Home
More
Share
Explore
Criação e direção de arte

icon picker
Boas práticas em acessibilidade

Este conteúdo foi elaborado para orientar e inspirar nossa equipe de criação em sua jornada para desenvolver conteúdo excepcional e impactante nos canais de nossos clientes, pensando em um escopo que seja inclusivo e acessível. É importante que possamos promover trabalhos que possam se comunicar com pessoas com todos os tipos de necessidades o possível.
Mas, mais do que falar com pessoas com deficiências, precisamos falar sobre acessibilidade situacional. A acessibilidade situacional refere-se à capacidade de um ambiente, produto, serviço ou conteúdo serem utilizados por uma ampla variedade de pessoas, independentemente das circunstâncias específicas em que se encontram. Diferentemente da acessibilidade focada em necessidades específicas de deficiência, a acessibilidade situacional considera as variáveis contextuais que podem afetar a experiência das pessoas, como a iluminação, o ruído ambiente, a pressa, a distração e outras condições transitórias.
Ao projetar para acessibilidade situacional, o objetivo é criar soluções que sejam eficazes e fáceis de usar em uma variedade de cenários. Isso pode envolver a escolha de esquemas de cores de alto contraste para que o conteúdo seja legível em diferentes condições de iluminação, a criação de interfaces intuitivas que permitam uma navegação rápida mesmo quando o usuário está ocupado, e o uso de design responsivo para garantir que o conteúdo seja acessível em dispositivos de diferentes tamanhos e formatos.
Em essência, a acessibilidade situacional visa proporcionar uma experiência de usuário eficaz e agradável, levando em consideração as diversas situações em que as pessoas podem interagir com um produto ou ambiente. Isso não apenas beneficia aqueles com deficiências, mas também todos os usuários em diferentes contextos.
Antes de tudo, precisamos desmistificar a ideia de que acessibilidade é apenas para pessoas com deficiência. Há também condições financeiras, educacionais, contextuais, territoriais, entre outras que devem ser consideradas para evitar barreiras entre pessoas e sua atuação na sociedade.
Para a W3C Brasil, organização de padronização da World Wide Web, acessibilidade é “a possibilidade e a condição de alcance, percepção, entendimento e interação para a utilização, participação e a contribuição, em igualdade de oportunidades, com segurança e autonomia.”
Acessibilidade não é só sobre eles, porém quem mais são impactadas e muitas vezes impedidas de atuar em vários contextos, são as PCDs. Segundo o IBGE (2010), 1 em cada 7 pessoas têm alguma deficiência no mundo. Ou seja, aproximadamente existem 1 bilhão de pessoas com deficiência. No Brasil, a proporção é de 1 em cada 4, sendo aproximadamente 50 milhões. Sendo elas com deficiências visuais, auditivas, motoras e de aprendizagem.
Além das Pessoas com Deficiência (PCDs) que têm todo o direito de utilizar e produzir produtos e serviços sem barreiras, existem também outras condições que podem limitar o uso de um produto digital quando o mesmo não está acessível. Por exemplo pessoas idosas, pessoas com internet limitada, com braço imobilizado, pessoas utilizando o celular ao sol ou até mesmo em pé em um ônibus.
Existem três tipos de limitações sensoriais: as definitivas, as temporárias e as situacionais. Confira na imagem a seguir:
⁠
0_y3weNMl77_6BcTmG.png
⁠
⁠
Descrição da imagem: Ilustração vetorial no estilo linha, exibindo uma matriz ilustrando pessoas com limitações sensoriais permanentes, temporárias e situacionais respectivamente da esquerda para direita. Na primeira linha temos limitações de toque, uma pessoa com apenas um braço, uma com braço lesionado com uma faixa cobrindo o braço direito e uma pessoa carregando um bebê no colo. Na segunda linha temos limitações na visão, uma pessoa cega com um cachorro no lado esquerdo, uma bengala e óculos escuros, outra pessoa com óculos e bengala representando uma pessoa com catarata e uma pessoa dirigindo um carro para representar um motorista distraído. Na terceira linha temos limitações na audição, uma pessoa com a cabeça voltada para a lateral esquerda para representar uma pessoa surda, uma pessoa com a cabeça voltada para a lateral direita para representar alguém com infecção no ouvido e outra pessoa chacoalhando um objeto e com barulho ao redor para representar um garçom trabalhando. Na quarta linha temos limitações de fala, com uma pessoa de frente para representar pessoas não-verbais, outra pessoa de frente para representar alguém com laringite e por último uma pessoa com chapéu, escudo e espada para representar alguém com sotaque forte.

Algumas recomendações:

Represente graficamente informações de diferentes formas, com cores, textos e formas. Ex: botão com ícone, rótulo e cor.
Aplique contrastes fortes, mas também evitar os extremos de luz, por exemplo fundo branco e texto preto. Devido a pessoas com sensibilidade sensorial na visão.
O Contrast Checker é uma ferramenta importante para esse tipo de verificação de contraste. Basta separar os códigos das cores RGB que serão sobrepostas e verificar se a proporção é suficiente. Acesse:
WebAIM: Contrast Checker
⁠
.
O contraste 100% no caso de monitores também não é recomendável. Quando a cor do fundo for completamente branca um cinza bem escuro como #333 ou #444 é mais confortável para leitura do que o preto total (#000).
Procure diferenciar links e botões, assim como deixar seus rótulos compreensíveis independente do conteúdo ao redor. Ex: Evitar links e botões rotulados com “clique aqui”.
Utilize linguagem simples, evite jargões, metáforas, abreviações e acrônimos. Caso necessário, forneça a explicação do termo.
Tenha clareza nas informações, forneça meios alternativos para compreensão do seu conteúdo, às vezes fornecer explicações mais longas é essencial para o usuário entender seu produto.
Leia, discuta e aplique a
WCAG
⁠
e o
GAIA
⁠
.
Consuma o conteúdo de pessoas diversas.
Use fontes legíveis e em tamanhos adequados para garantir que o texto seja facilmente lido em diferentes dispositivos e em situações de pressa ou distração.
Se você fez trabalhos para escola ou faculdade provavelmente se lembra daquelas regrinhas da ABNT para diagramação de texto como tipo Times New Roman, tamanho 12, espaçamento entrelinha 1.5. E isto é bom. Para um papel. Nem o computador, nem o celular são um papel. O tamanho padrão de texto de um browser é 16px (ou 48px, quando estamos falando de imagens embedadas, como em posts de social media). Estes não são números aleatórios. Eles foram escolhido por uma razão. Quando lemos um livro ou um trabalho acadêmico seguramos o papel a uma distância bem próxima dos olhos. Quando mexemos em um computador desktop ou notebook a distância em relação a tela é muito maior. Lembrando que em contextos de design criativo se utilizam fontes que possuem diferentes tamanhos, então cabe aqui o olhar criterioso do profissional.
Por isto é necessário que o texto esteja em um tamanho confortável em relação a esta distância. E isto deve ser customizado de acordo com a mídia, afinal, esta distância de leitura também vai variar em um smartphone, tablet, televisão… E todos estes fatores devem ser levados em conta. No geral, quanto maior a distancia do leitor em relação ao meio maior deverá ser o tamanho da letra. Se estiver na dúvida faça o seguro e utilize 16 px/48 px.
Mantenha um espaçamento suficiente entre elementos como botões e links para evitar cliques acidentais, especialmente quando os usuários estão usando dispositivos móveis ou estão em movimento. Além disso, o conforto para leitura se torna maior, especialmente no caso de pessoas neuroatípicas.
Se preocupe com o valor entrelinha (line-height). Algo como 140% da altura da fonte é uma boa medida padrão. Se você quiser ser ainda mais preciso pode utilizar alguma ferramenta de calculo com base na proporção áurea como a
Golden Ratio Typography Calculator
⁠
.
Usar números múltiplos para o tamanho das fontes também é uma boa pedida (por exemplo: 16 pixels para o texto e 32 pixels para um titulo). Manter margens e espaçamentos proporcionais também é uma ótima prática.
Sempre inclua legendas em vídeos e transcrições para áudios. Isso permite que pessoas assistam e compreendam o conteúdo mesmo em ambientes barulhentos ou quando não podem ouvir o áudio.
Utilize ícones intuitivos e bem reconhecíveis para transmitir informações rapidamente, mesmo quando o usuário está com pressa ou distraído.
Realize testes de visualização em diferentes cenários, como em dispositivos móveis, em ambientes com alta luminosidade ou com distrações ao redor. Isso ajuda a identificar problemas de acessibilidade situacional e aprimorar o design.
Torne as chamadas para ação (CTAs) claras e visíveis, permitindo que os usuários identifiquem rapidamente o próximo passo, mesmo quando estão com pouco tempo para interagir com o conteúdo.
Coloque informações importantes ou ações primárias em posições estratégicas, de forma que possam ser localizadas rapidamente mesmo quando os usuários estão navegando de forma rápida.
Evite a poluição visual, optando por designs limpos e minimalistas. Isso ajuda os usuários a focalizar nas informações mais importantes, mesmo quando estão com pressa.
Lembrando que a chave para a acessibilidade é pensar nas várias situações em que os usuários podem interagir com o conteúdo e garantir que ele permaneça legível, utilizável e compreensível em todas essas circunstâncias.
Dicas
01.jpg
Dicas de acessibilidade para criar para pessoas do espectro autista
02.jpg
Dicas de acessibilidade para criar para pessoas deficientes auditivas
03.jpg
Dicas de acessibilidade para criar para pessoas dislexas
04.jpg
Dicas de acessibilidade para criar para pessoas com baixa visão
05.jpg
Dicas de acessibilidade para criar para pessoas com deficiência física ou motora
06.jpg
Dicas de acessibilidade para criar para pessoas que dependem de leitores de tela
⁠



Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.