Design inclusivo: Como tornar os teus recursos visuais acessíveis a todos

Os infográficos são uma forma incrivelmente eficaz de transmitir rapidamente a tua mensagem. No entanto, se não tiveres o utilizador em mente ao criares a tua infografia, a tua mensagem pode não chegar a todos como poderia chegar de outra forma.

Tornar a tua infografia acessível significa eliminar as limitações que podem impedir umaA melhor acessibilidade significa que mais pessoas podem ver a tua criação e partilhá-la. Uma melhor acessibilidade significa que mais pessoas podem ver e partilhar a tua criação – e os motores de busca terão mais facilidade em encontrá-lo. Tudo isto leva a uma grande “vitória” para ti, mas Aqui tens a melhor partet: podes fazer isso de forma fácil e rápida.

Para uma leitura relacionada, vê o nosso guia sobre equilíbrio assimétrico.

Acompanha o jogo cria uma conta gratuita e seleciona um modelo da galeria de infográficos.

Leitores de ecrã são programas que os cegos e os deficientes visuais utilizam para navegar em sítios Web. Os leitores de ecrã funcionam através da tradução de texto para braille ou voz. Exceto que… as imagens não são obviamente texto. É aí que entra o texto alternativo!

Imagem à esquerda: Os leitores de ecrã não registam uma imagem a menos que esta tenha texto alternativo.
Imagem à direita: Ao utilizar texto alternativo, fornece conteúdo que os leitores de ecrã podem ler.

O texto alternativo é um atributo que podes adicionar a qualquer imagem do teu site, incluindo infografias. Os leitores de ecrã (e até os motores de busca como o Google) podem ler o texto alternativo para compreender o que a imagem está a apresentar. Se estiveres a utilizar uma estrutura como o Wordpress no teu site, é fácil adicionar texto alternativo (mostrado abaixo). Certifica-te apenas de que usas pontos no texto alternativo. É assim que os leitores de ecrã sabem quando uma frase termina.

Passo 1: No teu painel de controlo do Wordpress, vai à Biblioteca Multimédia.

Também podes achar útil o nosso artigo sobre a conceção do princípio da ênfase.

Passo 2: Seleciona qualquer imagem para ver as respectivas opções.

Passo 3: Adiciona o teu texto alternativo e o Wordpress guardá-lo-á automaticamente.

Ao criar uma infografia com o Piktochart, podes optar por publicar e partilhar o teu projeto em vez de o transferires como uma imagem. Ao fazê-lo, o Piktochart apresentará a infografia de uma forma legível para leitores de ecrã e motores de busca – sem a necessidade de qualquer texto alternativo! Experimenta-o inscrevendo-te gratuitamente.

Vale a pena saber que o texto no Piktochart será legível através de um leitor de ecrã se o visual for partilhado eletronicamente através de HTML. De acordo com a publicação do blogue sobre este tópico, só tens de adicionar o “alt-text” utilizando o WordPress e, em seguida, incorporá-lo no teu sítio Web. O que acontece é que o “texto alternativo” será adicionado ao infográfico como um todo, e não apenas a cada imagem e ícone individual.

Nesta fase, infelizmente, não poderás adicionar etiquetas de “texto alternativo” para imagens e ícones. Além disso, os mapas e os gráficos de dados não serão acessíveis através de um leitor de ecrã.

Se o teu infográfico tiver muito conteúdo, a utilização de texto alternativo pode não ser a solução ideal. Além disso, nem todas as pessoas com deficiência visual ou baixa visão utilizam um leitor de ecrã. As pessoas com daltonismo podem não captar a luz vermelha e verde – os tipos mais comuns de daltonismo – Muitas vezes muda a cor que realmente vê. Isto torna impossível conceber uma infografia que todos possam ver exatamente da mesma forma.

Neste caso, podes simplesmente escrever o que o teu infográfico diz por baixo (ou por cima). Os leitores de ecrã continuarão a poder digitalizá-lo, dando-te mais controlo sobre a formatação do texto. A utilização de texto alternativo ou de uma versão de texto é vantajosa para ti para ti: as pessoas com deficiência têm acesso à tua imagem e tu aumentas as tuas probabilidades de aparecer numa pesquisa.

Estás à procura de mais? Consulta o design de informação.

[clickToTweet tweet=”Use alt text or summarize the content of your visual to make it easily accessible to everyone” quote=”Use alt text or summarize the content of your visual to make it easily accessible to everyone”]

A cegueira não é a única deficiência visual. Deves considerar também o daltonismo e a baixa visão. Também não sejas cético – de acordo com a Federação Nacional dos Cegos, existem mais de 7,3 milhões de pessoas com deficiências visuais nos EUA e só nos EUAe a WebAIM calcula que 93% das pessoas com deficiência visual utilizam leitores de ecrã.

[clickToTweet tweet=”There are 7.3M people with visual impairments in the US alone. Are your designs accessible to all?” quote=”There are 7.3M people with visual impairments in the US alone. Are your designs accessible to all?”]

Felizmente, é fácil ter em conta as pessoas com deficiência visual. É só uma questão de fazer com que as coisas sejam fáceis de ler e se destaquem – e acaba por ajudar todos.

Aqui tens algumas dicas:

Utiliza um tamanho de letra que não exija que se aperte os olhos para ler. Recomendo que utilizes 14px ou “médio” para o tamanho de letra mais pequeno pelo menos. A Smashing Magazine, uma fonte autorizada dedicada ao web design, vai ainda mais longe ao sugerir deves usar 16px como tamanho de letra para o teu corpo de texto. Se achares que isto torna o teu visual demasiado longo, considera utilizar uma linguagem mais concisa, remover pontos menos importantes ou restringir o foco do teu visual.

Também abordamos este assunto no nosso artigo sobre os princípios do design.

Todos nós gostamos de tipos de letra com um aspeto extravagante, mas geralmente são difíceis de ler em parágrafos. Usa tipos de letra básicos para grandes volumes de texto. Tipos de letra como Georgia, Times, Arial, Helvetica e Calibri são óptimas escolhas, mas estão longe de ser as únicas opções. Uma vez que os títulos utilizam geralmente um tipo de letra maior e são mais curtos do que os parágrafos, tens mais flexibilidade com o estilo de letra. Evita usar Webdings embora. Aqui está tudo o que precisas de saber sobre a combinação de tipos de letra para o teu visual.

Para tipos de letra e elementos visuais que transmitem informações, utiliza cores que tenham um elevado contraste entre si. Não deixes que isto limite a tua criatividade – apenas evita situações como colocar texto azul num fundo roxo. Nesta situação, o azul e o amarelo ou o laranja seriam mais adequados. Se tens curiosidade em saber se as tuas cores contrastam bem, experimenta isto:

Dica profissional: Também podes dessaturar a imagem, que substituirá a cor por tons de cinzento. Se não conseguires distinguir os cinzentos, então as cores originais não têm um contraste elevado.

Evita utilizar grandes blocos de texto branco sobre um fundo preto (ou mesmo escuro). Com o tempo, cansa os olhos dos utilizadores e prejudica a legibilidade. O ideal é que o teu o texto dos parágrafos deve ter um tipo de letra mais escuro sobre um fundo mais claro. Se tu deve Utiliza uma cor clara para o corpo do texto, considera uma cor de valor médio para o fundo, como vermelho ou azul suave ou cinzento 60%, mas tem em conta o ponto anterior sobre o contraste. No entanto, não te preocupes com os títulos – desde que os títulos sejam bastante curtos.

Os deficientes visuais não são os únicos utilizadores a ter em conta quando se trata de acessibilidade.

Para uma leitura relacionada, vê o nosso guia sobre os princípios da unidade de design.

Num mundo em que a Internet rápida está amplamente disponível, é fácil esquecer que muitos americanos ainda utilizam o serviço de ligação telefónica para se ligarem à Internet, mais de 2 milhões de de facto. No entanto, há um grupo ainda maior que, ocasionalmente, experimenta velocidades de ligação lentas: os utilizadores de telemóveis.

As imagens com tamanhos de ficheiro grandes demoram uma eternidade a carregar para as pessoas com velocidades de ligação lentas. O tamanho do ficheiro não se refere ao tamanho da imagem; podes pensar no tamanho do ficheiro como a densidade. Se dois itens tiverem o mesmo tamanho, o que tiver maior densidade pesará mais. Podes reduzir o tamanho do ficheiro da tua imagem sem diminuir a sua qualidade, utilizando compressão. O resultado final é um infográfico de aspeto fantástico que carrega rapidamente.

Existem vários programas que podes utilizar que incluem ferramentas de compressão, mas muitos deles, como o Photoshop, são serviços ou software pagos. Se o teu site estiver a funcionar numa estrutura como o Wordpress ou o Joomla, existem plug-ins, como o Compressão e otimização de imagens Smushque comprime as imagens por ti sem recorrer a um serviço pago. No entanto, será necessário um pouco de trabalho da tua parte.

O Piktochart fornece uma funcionalidade de compressão integrada que é fácil de utilizar – Na verdade, só precisas de um clique do rato. Podes aceder às opções de compressão quando estiveres a descarregar o teu projeto como uma imagem.

Passo 1:Acede às opções de compressão selecionando “Transferir” no canto superior direito do editor do Piktochart.

Passo 2: Escolhe entre “Original”, “Medium” e “Hi Res” para o nível de compressão que melhor se adapta às tuas necessidades.

Também podes achar útil o nosso artigo sobre a psicologia das formas.

O Piktochart oferece modelos profissionais para criares apresentações, infográficos, cartazes, brochuras, relatórios e muito mais. Basta criares uma conta gratuitaobtém acesso ilimitado a modelos, funcionalidades de colaboração, pagamento por transferência e uma pasta para organizar os seus visuais! Começa agora.

Estás à procura de mais? Consulta a hierarquia visual.