Fica a par das últimas tendências do Marketing, Design e Tecnologia com a newsletter d’O Raio do Blog

Categorias

Acessibilidade na web: como desenhar para todos

Quer estejamos a falar de um website corporativo ou de uma loja online, o objetivo é, sempre, atrair e reter o maior número de visitantes possível e, para isso, é fundamental ter em conta a acessibilidade no nosso website.

Porquê?

Dados da Organização Mundial da Saúde estimam que 15% da população mundial vive com alguma forma de deficiência e, no entanto, segundo um estudo levado a cabo no Reino Unido, estima-se que cerca de 70% dos websites não seguem normas de usabilidade.

Garantir que o nosso website é acessível a todos é importante por vários motivos:

É eticamente correto: é uma forma de contribuir para uma sociedade digital inclusiva e vai ao encontro do princípio da universalidade da internet;
É vantajoso em termos de tráfego: dados das Nações Unidas de 2021 indicam que mais de um “1 bilhão de habitantes no mundo têm algum tipo de deficiência física ou intelectual” e, com o envelhecimento crescente da população, esse número tenderá a aumentar. É uma grande parcela da população que podemos estar a excluir! Para além disso, cumprir normas de acessibilidade é vantajoso em termos de SEO (Search Engine Optimization) o que, como sabemos, ajuda os websites a ter uma melhor classificação nas páginas de resultados dos mecanismos de pesquisa, aumentando o alcance;
Vai ao encontro da lei: a 3 de maio de 2016, a Comissão Europeia apresentou uma proposta de lei que torna a acessibilidade obrigatória em todos os sites de instituições públicas dos estados-membros (como websites de hospitais, universidades, serviços legislativos, bibliotecas, etc.) e esta norma incluirá, no futuro, também o setor privado.

2. Para quem?

A acessibilidade não diz respeito apenas a pessoas com algum tipo de deficiência ou restrição física e intelectual, mas sim a um conjunto de normas que tornam os websites mais fáceis de usar por todos.

Antes de percebermos quais as guidelines para construir um website mais acessível, é importante perceber que tipo de deficiências existem e como podem afetar a navegação web:

Deficiência visual: nesta categoria podemos incluir não só quem sofre de cegueira total ou parcial, como também quem padece de daltonismo, por exemplo. Pessoas com problemas de visão podem necessitar de utilizar softwares de ampliação de tela ou leitores de ecrã para ler texto digital em voz alta e descrever imagens na web.

Deficiência auditiva: podemos falar de vários graus de perda auditiva, de leve a profunda. Nestes casos, é importante que os conteúdos de áudio ou vídeo presentes no website incluam uma transcrição ou legendas.

Deficiência motora: pessoas com restrições motoras podem ter dificuldade em utilizar ratos ou trackpads e, nestes casos, a navegação baseada no teclado é fundamental.

Deficiência cognitiva: para garantir que não estamos a excluir visitantes com dificuldades de compreensão ou aprendizagem, é importante manter os layouts, a navegação e conteúdo simples e consistentes e incluir instruções de utilização para todas as funcionalidades que possam não ser tão intuitivas (como formulários de contacto ou processos de compra numa loja on-line).

Antes de percebermos quais as guidelines para construir um website mais acessível, é importante perceber que tipo de deficiências existem e como podem afetar a navegação web:

É importante referir que, ao falar de acessibilidade, não estamos apenas a incluir pessoas com deficiências graves ou permanentes, dificuldades podem surgir temporariamente, ser reflexo de idades mais avançadas ou, simplesmente, do contexto (já todos sentimos dificuldade a compreender como navegar num website ou estivemos numa situação com muito barulho a tentar ouvir um vídeo sem legendas!).

3. O que ter em conta?

1. Navegação com o teclado

Para validar este critério, deve ser possível navegar pelo website sem ser necessário utilizar o rato. Muitas tecnologias de assistência a pessoas com deficiências motoras assentam em “keyboard-only navigation”, ou seja, para cumprir este requisito deve ser possível aceder a todos os conteúdos e funcionalidades de um website apenas através do teclado – utilizando a tecla “Tab” para navegar entre secções.

Dica: a plataforma WebAIM (Web Acessibility in Mind) tem um conjunto de recursos, dicas e ferramentas que te podem ajudar a avaliar a acessibilidade do teu website e a corrigir potenciais erros. Para garantir que o teu website passa neste critério de navegação e descobrires como podes melhorar, consulta este link.

2. Atenção ao conteúdo dinâmico

O conteúdo dinâmico, ou seja, conteúdo que é carregado na página sem necessitar de reload (como, por exemplo, um banner animado) pode ser um desafio para os sistemas de leitura de ecrãs, já que o website não comunica ao software que esse conteúdo mudou.

Dica: Para resolver este problema, existem as “ARIA landmarks”: ARIA (Accessible Rich Internet Applications) designa um conjunto de atributos que podes adicionar ao código HTML para tornar o teu website mais acessível a utilizadores que usam tecnologias de assistência à navegação, como leitores de ecrã.
No fundo, são tags que adicionamos ao conteúdo para o definir com clareza o que estamos a apresentar na página. No caso de conteúdo dinâmico, podemos colocar a tag “live region” que comunica aos sistemas de leitura que se trata de conteúdo dinâmico.

3. Adicionar textos ALT em todas as imagens

Ao adicionar imagens a um website é importante inserir sempre o texto ALT (ou Alternative Text): este texto funciona como uma descrição da imagem, caso esta não carregue e também para que todos que sofram de limitações de visão possam ter conhecimento do que está ali representado. É também fundamental a nível de SEO!

Dica: Podes ler aqui as boas práticas a implementar ao criar o ALT nas imagens do teu website.

4. Escolher as cores cuidadosamente

A capacidade de percecionar as diferentes cores varia de pessoa para pessoa – na verdade, podemos dizer que a nossa capacidade de visualizar cor varia num espectro tão extenso como o das cores existentes! É, assim, fundamental, garantir que os vários elementos no nosso website tenham contraste suficiente para serem legíveis por todos, principalmente entre texto e fundo.

Dica: Utiliza o ContrastChecker da WebAIM para testar se as cores que estás a selecionar têm contraste suficiente.

5. Estruturar o conteúdo

Utilizar headers para definir títulos e estruturar conteúdos é fundamental para auxiliar na leitura do nosso conteúdo e possibilita aos leitores de ecrã perceberem a estrutura do nosso website e facilitar a navegação.

Visualmente, já sabemos que é importante distinguir títulos ou destaques através do tamanho do texto, cor, o uso do bold, etc. No caso de sistemas de assistência como leitores de ecrã (e mesmo como boa prática de SEO), é fundamental definir a hierarquia de conteúdo de uma página através das tags H1 e outros títulos com H2, H3, H4, etc., para passar corretamente o fluxo de leitura do nosso conteúdo.

Dica: Aprende mais sobre headings e como utilizá-los para estruturar informação aqui.

6. Evitar o uso de tabelas

Tabelas devem ser evitadas para estruturar conteúdos e layouts, já que são de difícil leitura em leitores de ecrãs. O seu uso deve ser restrito a situações em que o conteúdo realmente exige uma formatação tabelar.

Dica: Caso precises de utilizar tabelas no teu website, descobre mais sobre os standards de acessibilidade na sua construção neste link.

7. Permitir o redimensionamento do texto

A maior parte dos browsers permite redimensionar o texto de qualquer website, uma funcionalidade muito útil para quem sofre de dificuldades visuais. Esta funcionalidade deve, no entanto, ser testada quando estamos a desenvolver o website para garantir que não afeta o design ou a estrutura do conteúdo, tornando a experiência de navegação mais difícil.

Dica: Podes testar se o teu website está preparado para esta ampliação da fonte testando a função de zoom ou lupa do teu browser.

Para saber mais sobre fontes, tamanhos e como garantir que não representam um obstáculo à visualização do teu website, recomendamos as guidelines da WebAIM.

8. Cuidado com conteúdos multimédia

Entrar num website onde música começa a tocar automaticamente é irritante para todos os utilizadores, mas pode ser um verdadeiro desafio para utilizadores com deficiência: descobrir o botão para parar pode ser difícil sem o mouse ou em leitores de ecrãs.

Se incluíres vídeo no teu website, coloca legendas e garante que todos, mesmo com problemas auditivos, podem usufruir do teu conteúdo!

É recomendado evitar, também, carrosséis ou banners automáticos, já que alguns utilizadores podem necessitar de mais tempo para absorver a informação do que outros.

Dica: A Web Accessibility Initiative (WAI) do World Wide Web Consortium (W3C) fornece um conjunto alargado de dicas e boas práticas para tornares os teus conteúdos multimédia mais acessíveis que podes consultar aqui.

9. Tem atenção aos formulários

Formulários podem ser especialmente difíceis de utilizar por alguns visitantes do teu site e, no entanto, são uma ferramenta preciosa para criar um canal de comunicação. Garante que cada campo está claramente identificado (com a devida label e, idealmente, texto de exemplo), que todo o formulário é navegável por TAB, que as mensagens de erro / sucesso são claras e explicativas e, se necessário, inclui instruções para como preencher adequadamente o formulário.

Dica: Descobre aqui as guidelines para construíres formulários simples e acessíveis para todos.

10. Criar conteúdo acessível

Desenhar e estruturar um website acessível é fundamental e o mesmo se passa com o conteúdo. Criar conteúdo acessível pode passar por pequenas coisas, como definir sempre o significado de um acrónimo a regras de navegação como descrever o propósito / destino de um link.

Dica: Consulta as dicas da WebAIM sobre linguagem para descobrires como criar e estruturar conteúdo mais acessível.

4. Recursos úteis

Para além dos principais guias de acessibilidade já mencionados, como o WebAIM e o WCAG, existem diversas ferramentas que ajudam a verificar se o teu website cumpre essas guidelines, identificando erros e providenciando dicas de melhoria.

1. WAVE

Com a extensão WAVE Evaluation Tool instalada no browser, podes avaliar a acessibilidade do teu site tendo em conta os padrões de acessibilidade estabelecidos pelo WCAG.

Esta ferramenta é um auxiliar importante para detetar o que está a falhar no teu website e o que pode ser corrigido / melhorado.

2. ARIA DevTools

A extensão ARIA DevTools para o browser é um recurso gratuito que te permite verificar como o teu website está estruturado e é lido por leitores de ecrã, para além de te ajudar a identificar onde deveriam ser colocados atributos ARIA para ajudar a navegação.

3. Recursos para WordPress

O WordPress é o CMS mais utilizado do mundo e, por isso, dispõe já de um conjunto de ferramentas próprias e plugins para melhor a acessibilidade do teu website. Basta procurar no diretório de plugins por “Accessibility” e escolher qual a melhor opção para as tuas necessidades.

4. Cursos

Se quiseres aprofundar o tema e aprender de uma forma mais estruturada, a Udacity disponibiliza um curso de Acessibilidade Web. É gratuito, mas requer algum conhecimento de HTML, CSS e Javascript. Para iniciados, na plataforma COURSERA encontras um curso de Introdução à Acessibilidade e Design Inclusivo, disponibilizado pela Universidade do Illinois, com legendas em português.

A acessibilidade do teu website importa. Para além de garantires que o teu website é de fácil consulta e navegação para todos, atraindo mais potenciais utilizadores, estás a contribuir para um mundo digital mais inclusivo e justo!

Autor

boomer

Do mesmo autor

Mais artigos

No dia a dia de muitas marcas, o marketing é vivido em modo de resposta. Há um post para publicar, um concorrente que lançou uma campanha, uma tendência nova nas redes sociais, uma promoção para comunicar. Tudo acontece em cima da hora, tudo é urgente e quase nada é planeado. Este é o território do marketing reativo. Do outro lado, existe uma abordagem mais estruturada, mais calma e mais eficaz a médio prazo: o marketing estratégico. Não reage ao que acontece, antecipa. Não se limita a executar, decide porquê e para quê.

Quando se fala em plano de marketing, a maioria das pessoas pensa imediatamente em tudo o que quer fazer: campanhas, redes sociais, anúncios, conteúdos, eventos. Mas há uma parte igualmente importante que muitas vezes é ignorada: o que não deve fazer. Um bom plano não é aquele que tem mais páginas nem mais ideias. É aquele que ajuda a tomar decisões. E, para isso, tem de ser claro, realista e focado. Caso contrário, transforma-se num documento bonito, mas inútil, que ninguém consulta e que não orienta o trabalho do dia a dia. Na prática, muitos planos falham não por falta de boas intenções, mas por acumularem erros comuns que se repetem em diferentes marcas e setores.

O marketing de nostalgia tem sido uma das estratégias mais eficazes para marcas que procuram estabelecer conexões emocionais profundas com os consumidores, especialmente com a Geração Z. Num mundo saturado de estímulos digitais e incertezas, o resgate de memórias afetivas oferece conforto, autenticidade e um sentimento de pertença que transcende gerações.

Se tens uma PME, é provável que já tenhas sentido isto: o marketing “devia” trazer resultados, mas na prática vira um loop de urgências, ideias soltas e decisões em cima do joelho. O outsourcing de marketing pode ser a diferença entre uma PME crescer com consistência… ou andar em círculos a apagar fogos.

Com o início de um novo ano, há uma pergunta que aparece em quase todas as conversas com empresários, CEOs e equipas de marketing: “onde é que devemos investir?” A tentação é correr atrás da última “trend”, da mais recente ferramenta de IA, ou do “Guru” que supostamente te vai tornar rico em 90 dias.

A Inteligência Artificial está a mudar as regras do jogo: consumidores exigem relevância, autenticidade e experiências personalizadas, obrigando as marcas a repensarem o marketing.

Neste artigo, apresentámos-te 5 passos fundamentais para criares uma Estratégia Digital eficaz que não só te ajudará a aumentar a visibilidade da tua marca, mas também impulsionará o crescimento dos teu negócio.

O uso de ilusões de ótica no design gráfico permite aos designers brincar com perspetiva, proporção, cores e formas de maneiras únicas.

A Inteligência Artificial já deixou de ser uma coisa do futuro e é, hoje, uma presença bem real no nosso dia a dia de trabalho. E sim, ela pode ser uma aliada incrível — desde que saibas usá-la sem te deixares afetar pelo FOBO!

Já todos vimos - e nos indignamos - com as ofertas de emprego com o objetivo de recrutar o chamado “canivete suíço do Marketing”, certo? Aquele profissional que sabe fazer um pouco de tudo no Marketing - desde a estratégia à produção de conteúdos, dá uns toques de design e vídeo, sabe fazer as campanhas de publicidade online e ainda dá um “pezinho de dança” no Tiktok! ? Ah, e claro, ainda dá apoio ao Departamento de Vendas sempre que há uma Feira / Evento ou quando é preciso fazer uma reunião comercial! Com sorte, poupam-no de tirar cafés aos colegas...

Grids são um dos elementos essenciais de qualquer projeto. Permitem criar estética e coerência, graças à possibilidade de organizar os elementos da interface de acordo com um layout específico.

Aos que ficaram mais interessados em tipografia e typedesign, say no more!

Em Portugal, o consumo de podcasts tem crescido significativamente. De acordo com a Marktest, 28,4% dos residentes no continente com 15 ou mais anos afirmam ouvir podcasts regularmente, totalizando mais de 2,4 milhões de ouvintes!

O custo de um logotipo pode variar largamente, dependendo de diversos fatores, como seria de esperar. A complexidade do projeto, o tamanho da agência que o cria, o nível de experiência e competências do designer e até a localização da empresa podem influenciar os custos e, como tal, o preço final que um cliente poderá pagar.

É cada vez mais importante otimizar fluxos de trabalho e diminuir a repetição de tarefas para sermos mais eficientes e competitivos e também para aumentar a produtividade da equipa e libertar tempo para a verdadeira inovação e criatividade. Uma das metodologias que podemos utilizar chama-se DRY – Don’t Repeat Yourself.

Descobre por que o outsourcing de marketing é o investimento certo para ter uma equipa de branding que faz a tua marca crescer com propósito.

O nosso cérebro é uma máquina poderosíssima, capaz de tomar decisões imediatas a todos os momentos mesmo sem a nossa perceção mas, como diz a sabedoria popular, “depressa e bem...há pouco quem”.

Nos dias que correm, o termo landing page (LP) tem vindo a tornar-se familiar (e imprescindível para os profissionais de Marketing) e, se ainda não sabes o que é, certamente já entraste numa LP pelo menos uma vez na vida!

Todos os designers utilizam ferramentas que os ajudam a atingir o seu objetivo final. Neste artigo damos-te a conhecer algumas extensões, todas gratuitas, que podem ser úteis para melhorar a tua performance durante a criação de um website.

A tua empresa presta serviços diferenciadores, com qualidade e profissionalismo, mas os potenciais clientes continuam a preferir a concorrência?

A ilustração integrada no design gráfico pode ajudar a comunicar mensagens de forma eficiente, e elevar a qualidade da comunicação visual. Neste artigo d’O Raio do Blog vamos explorar as várias razões para integrares ilustrações nos teus próximos projetos.

Durante anos, o SEO foi o motor invisível por trás do tráfego orgânico. Otimizações técnicas, palavras-chave estrategicamente colocadas, backlinks, tudo fazia sentido. No entanto, o próprio conceito de "pesquisa" está a ser reescrito. No novo artigo d’O Raio do Blog, falamos sobre uma mudança silenciosa, mas profunda, na forma como as marcas devem pensar o seu conteúdo para motores de busca.

As extensões do Google Chrome permitem personalizar de inúmeras formas a experiência de navegação do browser. Tira o máximo partido para melhorares a tua rotina em Marketing Digital.

Finalmente, sexta-feira 13! Se para uns o número 13 é sinónimo de medo, para outros significa oportunidade. As superstições têm um papel curioso no mundo dos negócios e influenciam não só o desenvolvimento de produtos, mas também o sucesso (ou fracasso) de campanhas de marketing.

O processo de desenvolvimento de um site não termina com o fim da sua implementação. Na verdade, segue-se a fase mais importante que é a sua publicação e promoção na world wide web. Deixamos-te 5 passos essenciais a ter em conta quando publicas o teu website.

Os catálogos de cores PANTONE deixam de fazer parte integrante dos softwares ADOBE, estando apenas disponíveis como um plug-in pago, com assinatura mensal ou anual

Halloween é uma oportunidade sazonal onde o design gráfico e o marketing convergem com uma clarividência rara: tudo gira à volta de atmosfera, surpresa e imagem. No espaço de algumas semanas podes transformar um produto banal numa peça colecionável, um espaço doméstico numa experiência imersiva ou uma simples etiqueta numa história que as pessoas partilham no Instagram.

Existem algumas regras específicas, conhecidas como princípios do design, que são guias e ferramentas para um design mais harmonioso. Quando bem usados, estes princípios podem transformar totalmente alguns projetos, tanto esteticamente como no que concerne à experiência do utilizador.

O primeiro passo para começar um projeto criativo é procurar a inspiração certa. Este processo pode tornar-se caótico – e demorado! - sem alguma organização e é aqui que entram os moodboards.

A sustentabilidade é um tema que está na ordem do dia e não é novidade que as indústrias dependem de recursos como a energia, a água, o papel e a tinta. O Design Gráfico e o Marketing não são exceção.

Com o TikTok a assumir o papel de novo Google para milhões de jovens, perceber como falar a sua língua e adaptar a comunicação a este universo digital é essencial para qualquer marca que queira captar a atenção e criar impacto com os consumidores mais jovens.

Esta semana falamos da importância de um website abrir rápido e responder aos comandos dos utilizadores em tempo útil e de como essa velocidade pode afetar a percepção do nosso negócio.

Vamos contar uma história de amor entre dois conceitos que, à primeira vista, pareciam viver em mundos diferentes: o Branding e a Estratégia. Alerta de Spoiler: quando eles ficam juntos, fazem magia!

Agora que nos aproximamos da época mais assustadora do ano, falamos do tema que mais arrepios causa na espinha dos designers: a rejeição. Neste artigo d’O Raio do Blog vamos explorar algumas estratégias para prevenir o tão assustador “não” e, também, algumas formas de lidar com essa inevitabilidade.

E se nós te dissermos que lidamos diariamente com o Design Emocional sem nos darmos conta disso?

Como a criatividade e a imaginação têm sido mais uma vez fonte de apoio e protesto em tempos de guerra!

O domínio de um site é muito mais do que um endereço, é a tua identidade on-line e, tal como o nome de uma marca, deve ser criativo e relativamente fácil de memorizar.

Ao contratar os serviços de uma agência terás uma equipa multidisciplinar dedicada à tua marca, composta por especialistas com conhecimentos profundos e atualizados das ferramentas e dos processos. Para que esta “máquina” funcione a favor da tua empresa e consiga obter os resultados esperados, há 5 princípios que são fundamentais.

Tem havido uma grande explosão de vídeos na internet, tanto em websites como em redes sociais, vídeos esses que estão a captar mais a atenção dos espetadores do que o conteúdo estático. Os conteúdos em vídeo são mais partilhados nas redes sociais do que qualquer texto ou imagem. Parecem, por isso, ser um dos elementos mais eficazes da estratégia de marketing digital. As pessoas gostam de entretenimento e preferem algo que possibilite a absorção de informação num período mais curto.

No branding, cada rejeição pode ser a centelha da reinvenção. É aqui que entra o rebranding: o renascer de uma identidade, o turning point em que uma marca decide deixar o passado para trás e regressar, mais forte, mais clara e, sobretudo, mais alinhada com quem realmente é.

Se não sabes exatamente o que é o branding não te preocupes! É um conceito um pouco vago e, se calhar, um pouco confuso, mas nós estamos aqui para ajudar. Se a explicação fosse simples não haveria tanta ambiguidade em torno deste conceito.

Vamos te explicar neste artigo os 12 princípios da animação que servem de base para trazer vida e realidade a qualquer objeto!

Já ouviste falar de UX e UI, termos que normalmente aparecem juntos? Confundi-los é bastante comum, uma vez que possuem caraterísticas muito próximas.

Estarmos constantemente insatisfeitos com alguma coisa, é intrínseco ao ser humano. Durante a nossa vida é bastante comum chegarmos a um ponto de encruzilhada em que não temos a certeza do caminho a seguir.

O outsourcing de marketing é a forma inteligente de crescer sem aumentar custos fixos. Com a BOOMER, ganhas um departamento completo de marketing — estratégia, design e resultados reais, tudo integrado.

2025 está a terminar e 2026 parece que ainda está longe... mas quem trabalha em marketing sabe que o tempo voa e já está a trabalhar no próximo ano! A verdade é que as regras do jogo mudaram e quem continua a fazer “o que sempre funcionou” vai ficar para trás.