Acessibilidade digital, design, contrastes de cor e as marcas em Portugal

Qual o papel do design para a acessibilidade digital? O que pode o design e os designers fazerem para que os produtos e serviços digitais que utilizamos todos os dias, possam ser mais inclusivos? O que é importante ter em consideração quando num qualquer processo de design, estamos a pensar e desenhar novas soluções digitais?

As questões em torno da relação do design e da acessibilidade digital, são sempre muitas (e ainda bem). Fazer perguntas, revela quase sempre a ambição de fazer melhor e isso é extraordinário. Essa ambição o design e os designers têm de sobra. Ser inquieto e curioso é inerente a atividade de design. E é precisamente essa inquietude que pode ser um contributo muito importante para a construção de uma sociedade mais inclusiva, também através da acessibilidade digital.

Mais que bonecos

É importante não ficar pelas percepções mais básicas de cada tema, muito em especial quando falamos da relação do design com a acessibilidade digital. É essencial perceber em profundidade o papel mais amplo que o design pode ter na acessibilidade digital, levando a intervenção dos designers muito para lá daqueles que são os estereótipos visuais da profissão.

O design, especialmente na transformação digital, é muito mais que um trabalho visual. O design pode e deve dar um contributo preponderante para a definição de propostas de valor, reorganização de modelos funcionais ou até mesmo a identificação de novas oportunidades de negócio. Um contributo transversal que se materializa numa relação umbilical tanto com a tecnologia como igualmente com o negócio.

No que toca a acessibilidade digital isto também se aplica. A responsabilidade do design, vai muito para além da dimensão visual do interface. O trabalho do design começa desde o dia zero do projeto. Seja no contributo que pode dar à simplificação de processos, na pesquisa com diferentes perfis de utilizadores (com modelos de utilização bastante díspares) ou na própria estruturação do conteúdo a comunicar e incluir em cada interface. Tudo isto e muito mais, podem ser áreas de trabalho do design na acessibilidade digital, que vão muito para além dos artefactos visuais. Podem parecer atividades secundárias, face ao papel recorrente do design nos projetos mas, no final do dia todas estas atividades terão um impacto imenso na construção de experiências digitais realmente acessíveis.

Por outro lado é importante nunca esquecer que a responsabilidade sobre a acessibilidade digital, não se esgota neste ou noutro perfil profissional em particular. Todos, sem excepção, na equipa de projecto, têm responsabilidade sobre a qualidade da acessibilidade dos produtos e serviços. Sejam designers ou developers, claro está, mas também quem faz a gestão de projeto, verificação de qualidade, planeamento de arquitecturas, orçamentação do projecto, etc. Todos os profissionais da equipa têm uma responsabilidade específica a desempenhar e todos terão um contributo importante a dar.

Fazer a diferença

Podendo o design ter um papel mais amplo na construção da acessibilidade digital, não quer isto dizer que também não tenha um papel importante na dimensão visual e interativa dos interfaces. É claro que sim. O nosso trabalho não é só este, mas também é este. Desenhar um interface é um desafio imenso. Quem já passou por este desafio, sabe que é antes de mais um trabalho de equilíbrio. Um exercício quase de acrobacia entre todas as vontades existentes dentro das equipas de projecto, as várias premissas técnicas e de negócio a ter em conta, algum gosto pessoal de quem manda à mistura e ainda os constrangimentos naturais de trabalhar com tecnologias complexas. Em certa medida todo este equilíbrio, faz de nós designers, muitas vezes acrobatas.

Este é um exercício complexo, é bem verdade. Quase sempre existe uma diferença grande entre o papel que acreditamos que enquanto designers poderíamos estar a desempenhar no projecto, e aquele que nos é pedido realmente que desempenhemos. Muitas vezes pode ser frustrante. Contudo, pode ser essencial percebermos que o nosso trabalho pode ter um grande impacto, também no que toca à acessibilidade, mesmo que a nossa missão seja mais circunscrita, por exemplo no desenho de interfaces. Podemos e devemos fazer a diferença para a acessibilidade digital, mesmo que a nossa missão seja “só” desenhar interfaces. Como? Por exemplo, um exemplo muito simples, através do teste cuidado dos contrastes de cor entre os elementos textuais e os seus fundos de cor.

Contrastes de cor

A cor, para quem a vê, é um dos aspetos mais ricos da comunicação visual. A cor pode transmitir emoções ou até significados funcionais. Pode fortalecer o sentido de qualquer mensagem, ou ajudar, na sua neutralidade, a dar foco a determinadas informações. Pode igualmente ajudar à legibilidade das informações textuais, ou prejudicá-la de sobre maneira. É aqui que o desenho de interface pode ter um impacto muito grande na acessibilidade digital.

Os contrastes de cor entre elementos textuais, tenham eles que propósito tiverem, e o seu fundo, é um dos aspectos que mais contribuiu para uma boa leitura. Ler qualquer texto sem esforço, é meio caminho andando para transmitir uma mensagem de forma mais clara. Por sua vez, transmitir uma mensagem de forma clara, seja na comunicação de um serviço ou de uma ação associada a um botão, vai ajudar de forma determinante os utilizadores, sejam eles quem forem, a atingirem os seus objetivos. E isto é bom para o negócio. Utilizadores satisfeitos com a utilização de qualquer produto ou serviço, quer quase sempre dizer, mais dinheiro em caixa.

Porque é tão importante?

O principal objetivo é garantir uma boa leitura dos elementos textuais, garantindo que a cor de fundo não prejudica a leitura do texto. O conceito de “boa leitura” pode parecer abstracto de definir e por isso, em acessibilidade digital, recorremos às Diretrizes de Acessibilidade para Conteúdo Web, atualmente na sua versão 2.2, para nos ajudar a definir com exactidão o que temos que fazer. Nestas directrizes vais encontrar os rácios de contraste de cor entre o texto e o fundo que devem ser garantidos para conseguirmos ter uma “boa leitura”, para o leque mais alargado possível de utilizadores.

Como testar?

Testar contrastes de cor é bastante simples. Temos várias ferramentas que nos podem ajudar e que vão simplificar bastante o nosso trabalho. Podes por exemplo utilizar a ferramenta de contrastes de cor da WebAIM disponível online. Inseres o código das cores do texto e do fundo e a ferramenta verifica, segundo as Directrizes de Acessibilidade para Conteúdo Web se esta conjugação tem um bom rácio de contraste. Se sim, fantástico. Se não, a sugestão será sempre que alteres as cores de fundo ou do texto até conseguires um bom rácio de contraste, pelo menos para o nível WCAG AA, referência que vais encontrar no validador de contrastes da WebAIM.

Só tenho que fazer isto?

A resposta é simples: não. Desenhar um interface acessível é muito mais que testar contrastes de cor. O trabalho do design pode e deve ir muito além disso. Aliás, desenhar um interface acessível vai inclusive muito além de cumprir directrizes ou normativos como é o caso das Directrizes de Acessibilidade para Conteúdo Web. Este é um documento fundamental, mas se queremos mesmo atingir um bom nível de acessibilidade digital, teremos que forçosamente trabalhar para além destas directrizes. E mesmo os contrastes de cor, sendo um aspeto fundamental do interface são uma pequena parte das recomendações descritas nas Directrizes de Acessibilidade para Conteúdo Web. Das 86 recomendações feitas pelo documento, na sua versão 2.2, só cerca de 5 dessas recomendações se referem a aspetos relacionados com a cor. Todas as outras 81 recomendações, que se relacionam com vários aspetos do trabalho de acessibilidade e não só com o design, também podem ter a ajuda do design e dos designers.

Existem muitos recursos que te podem ser muito úteis nesta descoberta. Existem igualmente várias propostas de formação que te podem ajudar a mergulhar no tema da acessibilidade digital, estejas tu em que estágio de maturidade estiveres. O mais importante é começares por algum lado, tendo a certeza que para ires além dos lugares comuns, terás que forçosamente dedicar algum tempo a perceber o tema e mais ainda a tentar aplicar na prática. É preciso fazer caminho, é certo, mas o retorno será esmagador. Imagina a possibilidade de conseguires pensar e desenhar conteúdos e interfaces que possam ser utilizados pelo maior número de pessoas, independentemente das suas características. Isto é o design a cumprir o seu mais básico propósito e a dar uma ajuda incalculável à inclusão.

Marcas em Portugal

A acessibilidade digital faz-se de muitos aspetos. Pequenos detalhes ou grandes definições que em conjunto contribuem para produtos e serviços digitais mais inclusivos. Produtos e serviços adaptados aos modelos de utilização do maior número de pessoas. As empresas e principalmente as marcas, desempenham um papel absolutamente preponderante em tudo isto. Uma economia forte é feita essencialmente de marcas fortes.

Marcas com propósito e com soluções que acrescentam valor ao quotidiano das pessoas. Marcas feitas de valores como a inclusão e a sustentabilidade. Protagonistas da transformação quer seja económica quer seja social. Marcas que têm também um papel muito importante no terreno da acessibilidade digital, potenciando que o maior número de pessoas, sempre que isso faça sentido para a própria marca, possam utilizar os produtos e serviços que esta coloca à disposição do mercado.

Reunir pistas de reflexão

O tema dos contrastes de cor é um excelente ponto de partida para tentarmos perceber, mesmo que de forma muito sumária, como está a acessibilidade digital das marcas em Portugal. Podemos num exercício livre, partir deste tópico dos contrastes de cor e tentar perceber até ponto no universo de marcas em Portugal, esta é uma preocupação recorrente nas suas plataformas online.

É importante vincar que nada disto se constitui como uma análise ou auditoria de acessibilidade digital no mais amplo e verdadeiro sentido do termo. Podemos partir deste tópico dos contrastes de cor e tentar reunir algumas pistas de reflexão, mas não mais que isso. Ainda assim, é de todo interessante extrapolar esta perspectiva de análise da utilização da cor de um contexto abstracto e consolida-lo na realidade concreta das plataformas de algumas das marcas mais relevantes para os consumidores em Portugal.

Exercício de análise

Para tentar trazer alguns indicadores de análise, mas principalmente reflexão para este tópico dos contrastes de cor, foi realizado um exercício muito simples. Através do add-on disponível para o browser Google Chrome da ferramenta Wave WebAIM, foi realizada no dia 26 de Fevereiro de 2024, uma análise automática às páginas de entrada dos principais websites públicos de 50 das marcas com maior visibilidade em Portugal de vários setores de atividade.

A ferramenta analisou de forma automática todos os elementos presentes no interface e comparou o rácio de contrastes de cor entre os elementos textuais e os seus fundos de cor. Essa comparação foi feita tendo por base as Directrizes de Acessibilidade para Conteúdo Web. Se algum dos elementos estivesse fora do rácio ideal, seria identificado como um erro de contrastes de cor.

Sobre esta análise é importante ressalvar que em muitos casos o texto está sobre imagens, podendo conter ou não algum tipo de filtros. Este tipo de utilização torna mais difícil uma análise automatizada rigorosa. Na prática isto pode querer dizer que o número de erros de contrastes de cor identificados, poderá ser maior do que é indicado pelo Wave WebAIM de forma automática. Para estes casos, numa eventual análise de acessibilidade digital mais completa, recomenda-se a peritagem manual destes elementos de interface. A bem da verdade, em qualquer análise de acessibilidade digital completa, é importante incorporar processos de análise automática (como neste caso através da utilização do Wave WebAIM) e métodos de peritagem manual. Estes dois métodos devem ser sempre complementares entre si.

O Wave WebAIM contém também vários outros indicadores. Todos os seus indicadores podem ser excelentes perspectivas a ter em conta no trabalho das equipas e tendo em vista a construção de soluções mais inclusivas. Neste exercício em específico, foi tido em conta exclusivamente a análise de contrastes de cor. É sobre esta perspetiva que recai este trabalho de análise e todas as suas conclusões.

Marcas analisadas

Este estudo de análise automatizada dos rácios de contrastes de cor, das páginas iniciais dos websites de algumas das marcas mais relevantes para os consumidores em Portugal, integra a análise de 50 páginas diferentes. Embora o mercado em Portugal seja bastante rico em termos de marcas e nesta amostra não estejam representados alguns setores de atividade, este grupo de marcas permite ter uma ideia bastante interessante do panorama.

A escolha das marcas a integrar o estudo, não obedeceu a nenhum critério económico de qualquer ordem de grandeza ou relevância. Fazem parte deste estudo de análise dos rácios de contrastes de cor, as seguintes marcas do mercado nacional, organizadas no estudo e nesta listagem por ordem alfabética:

Análise de contrastes de cor

Portugal tem marcas fantásticas. Empresas que colocam à disposição dos consumidores produtos e serviços digitais de grande valor acrescentado. Marcas construídas todos os dias por muitas equipas de grande talento. Estas são 50 dessas marcas, organizadas por ordem alfabética. Aqui poderás encontrar alguns indicadores que documentam como cada uma destas marcas implementa, ou não, algum tipo de cuidados de contrastes de cor, à luz das melhores práticas de acessibilidade digital.

É fundamental perceber que este não é num tipo de índice de qualidade das marcas mais ou menos acessíveis. Esse não é o objetivo deste estudo. Aliás, essa é uma visão que em nada interessa à acessibilidade digital. O cenário ideal seria que todas estas marcas e todas as outras que existem no mercado, fossem o mais acessíveis possível. Ganhava o mercado e principalmente os utilizadores. O objetivo deste estudo visou tão só, trazer alguns indicadores de análise palpáveis da implementação de directrizes de acessibilidade relacionadas com a utilização da cor e os contrastes dos elementos de texto e fundos nos interfaces.

Ageas Seguros

Allianz Seguros

Auchan

Banco CTT

Bankinter

BPI

Caixa Geral de Depósitos

Comboios de Portugal

Continente

Crédito Agrícola

CUF

EDP

El Corte Inglês

Endesa Portugal

EuroBic

Farmácias Portuguesas

Fidelidade

FNAC

Galp Energia

Germano de Sousa

Hospital da Luz

Iberdrola

Intermarché

Joaquim Chaves Saúde

Lidl

Lusíadas Saúde

Lusitania

Mapfre Seguros

Médis

Meo

Millennium BCP

Minipreço

Montepio

NOS

Novobanco

Ok! Seguros

Pingo Doce

Rede Expressos

Santander

Seguro Directo

TAP

Tranquilidade

Trofa Saúde

Una Seguros

Unilabs

Via Verde

Vodafone Portugal

Worten

Conclusões

Da análise da implementação de boas práticas de contrastes de cor, nas páginas de entrada de alguns dos websites mais importantes destas 50 marcas a operarem no mercado nacional, é possível retirar várias conclusões interessantes. Mais uma vez, é importante reforçar que este não é nenhum tipo de índice, nem se procura encontrar as marcas mais ou menos acessíveis. Ainda assim, a análise de uma amostra desta dimensão permite ter em conta alguns indicadores que nos podem levar a reflexões mais estruturadas sobre o tema.

  • Das 50 páginas analisadas, de 50 marcas diferentes, foram identificados de forma automática um total de 1846 erros de contrastes de cor.
  • O número de erros de contrastes de cor na amostra de páginas poderá ser maior que o valor total identificado, pois nos casos em que o texto está sobre imagens (com ou sem algum tipo de filtro), este facto poderá levantar dificuldades a uma análise automatizada. Neste caso, seria necessário complementar esta análise automática com uma peritagem manual dos elementos presentes nos interfaces.
  • A média de erros encontrados por página na amostra analisada é de 37 erros de contrastes de cor.
  • As páginas que desempenham um papel relacionada com a comercialização online de produtos, por exemplo páginas de comércio eletrónico, apresentam uma tendência para conterem maior número de erros de contrastes de cor. Esta evidência está relacionada com o facto que este tipo de página, apresentar um muito maior número de elementos de interface o que propicia a existência de mais erros de contrastes de cor.
  • Da amostra total das 50 páginas analisadas só 4 apresentam 0 erros de contrastes de cor.
  • Da amostra total das 50 páginas analisadas só 8 apresentam menos de 10 erros de contrastes de cor.
  • Da amostra total das 50 páginas analisadas 6 apresentam mais de 100 erros de contrastes de cor.

Pequenas grandes coisas

Olhando a este cenário, pode ficar a ideia que a acessibilidade digital pode ser um desafio difícil de superar. Nada podia estar mais errado. Como se demonstra só por este tema dos contrastes de cor, é possível fazer a diferenças com pequenos aspetos. Aliás, não será descabido dizer que a acessibilidade digital se faz de muitas pequenas coisas juntas. Desenhar interfaces tendo em atenção as regras de ergonomia mais básicas do design, desenvolver um código HTML semanticamente correcto, ou procurar sempre os modelos de serviço mais simples, são algumas das pequenas grandes coisas, que podem fazer toda a diferença no final das contas.

É claro que se a marca para a qual estamos a trabalhar neste momento, estiver ainda a começar este percurso de transformação acessível, não vamos passar do 0 para o 100 de um dia para o outro. Contudo, mais importante que planear uma grande revolução, é começar. Começar por coisas simples, mas começar verdadeiramente. A acessibilidade digital, um pouco como muitos outros aspetos da transformação digital, não é um sprint, é uma maratona. Importa ter uma estratégia e saber onde queremos chegar. Tudo o resto acontecerá com o investimento e trabalho continuado das equipas e claro com o tempo.

Fotografia © Mika Baumeister (Unsplash)