Acessibilidade na web na visão do Product Designer

Acessibilidade é a qualidade do que é acessível. Tratando-se de acessibilidade web, é a ferramenta para que mais pessoas consigam utilizar um produto digital, independentemente das condições de uso. Cada vez mais fala-se sobre inclusão digital e acessibilidade, mas você sabe por quê?

 

Por que tornar acessível?

Tornar um site acessível não é uma questão de altruísmo. Segundo a Organização das Nações Unidas, atualmente cerca de um bilhão de pessoas vivem com algum tipo de deficiência. No Brasil, 4,6 milhões de pessoas têm algum tipo de necessidade especial (visual, auditiva, motora ou cognitiva), segundo o Instituto Brasileiro de Geografia e Estatística — o que equivale a ¼ da população.

Ou seja: ignorar a acessibilidade na construção de um produto digital pode significar que ¼ dos usuários não vão conseguir finalizar seus objetivos. No caso de um e-commerce, por exemplo, isso pode significar 25% a menos no número de vendas.

Além disso, ao ignorar questões de acessibilidade no desenvolvimento de produtos, podemos estar impedindo que pessoas com outros tipos de necessidades especiais como, por exemplo, uma deficiência temporária, um braço quebrado, um usuário idoso, um usuário com internet lenta, entre outros, cumpram seus objetivos em um site.

Para tornar um site acessível, contar com um Product Designer no projeto é essencial, pois esse profissional trabalhará para tornar o produto mais simples, intuitivo e condizente com as necessidades dos usuários — desde sua concepção até a interface. Pensar na acessibilidade faz parte do trabalho de facilitar o acesso a um site, e por isso é dever desse profissional verificar se boas práticas de acessibilidade estão sendo aplicadas por toda equipe.

 

Opinião dos Especialistas

Na opinião de Talita Pagani, especialista em acessibilidade, muitas vezes empresas enxergam a acessibilidade de sites como uma feature, um plugin, um “a mais” do projeto que será destinado somente a pessoas com deficiência (PCD), quando na verdade Product Designers deveriam projetar sites e outros materiais que estejam acessíveis a todos.

Para Talita, não deve existir um público-alvo exclusivo de PCD, pois essas pessoas estão inseridas dentro de outros públicos-alvos, segmentados por interesses e características. Ela compara a acessibilidade com a usabilidade na criação de projetos digitais: não é uma vantagem a ser acrescentada, mas sim algo que deve fazer parte do projeto desde sua concepção.

Se você já entendeu a importância da acessibilidade na web e quer saber como se aprofundar no assunto, confira os conteúdos a seguir.

 

Acessibilidade na Prática

A WCAG (Web Content Acessibility Guidelines) é um dos mais famosos guias de acessibilidade, utilizado internacionalmente. A última versão possui 4 princípios, 13 recomendações e 78 critérios para avaliar a usabilidade de um site. Para facilitar a compreensão e aplicação desses critérios, o projeto Todos por Acessibilidade criou o site Guia WCAG com cards explicando cada um dos critérios.

Ler e estudar as principais documentações de acessibilidade é um bom passo primeiro para quem quer entender melhor o tema, mas você pode seguir algumas dicas práticas para melhorar a usabilidade de um site desde já.

 

Foco Visível

Segundo princípios de usabilidade e acessibilidade, manter o usuário informado sobre o que está acontecendo é imprescindível. Para isso, é importante que a equipe preste atenção nas configurações do foco visível, que é a seleção de links através da tecla Tab. O ideal é que o foco visível tenha um contorno de pelo menos 2px ou 3px, como o exemplo abaixo:

 

 

O foco visível tem duas opções principais: individual, quando cada micro parte do conteúdo é selecionada, ou por grupo. Essa decisão dependerá do tipo e dos objetivos do projeto.

 

Contraste

Para além de usuários com baixa visão, um bom contraste é importante para usuários que utilizam monitores de baixa resolução, com defeito, em ambiente externo ou muito iluminado.

A WCAG recomenda que textos tenham uma relação de contraste entre primeiro e segundo plano de ao menos 4.5:1. O site Colorsafe.co oferece o valor de contraste com base no código da cor e da tipografia do texto.

Sempre que possível, deve-se evitar as combinações:

 

 

Além disso, combine o uso de cores com outros elementos visuais, como, por exemplo, ícones, símbolos, texturas e textos.

Links

Destaque o link com uma cor diferente do resto do texto e escreva os links com as ações que eles proporcionam, sem utilizar frases genéricas como “clique aqui”. Veja o exemplo abaixo:

Texto original:

Texto visualizado por um usuário com tritanopia:

Opções disponíveis para usuários que estão navegando por teclado ou leitor de tela:

Por isso, é imprescindível contextualizar os textos dos links.

 

Descrição de Imagens

Por último, mas não menos importante: ler imagens faz parte da experiência do uso da maioria dos sites, e pessoas com deficiências visuais devem experienciar os significados das imagens também. Por isso, o texto alternativo é essencial para essa inclusão. Além disso, uma boa descrição da imagem também é importante para SEO e para usuários com internet de baixa qualidade.

Esses textos devem passar o real significado da imagem e costumam ter até 100 caracteres na função alt. Para descrever, considere algumas questões:

  • O que é mais importante na imagem?
  • Qual é a sequência de leitura da imagem? (esquerda para direita?)
  • É uma ilustração, uma foto, ou um print?
  • O que relaciona a imagem com o conteúdo em que ela está inserida?

 

Elimine informações que não são tão relevantes, como um tipo de textura de uma parede de fundo. Foque em deixar o conteúdo enxuto, porém descritivo.

 

Avaliação Final

Após seguir essas dicas, seu site provavelmente já estará mais acessível e inclusivo. Ao final da revisão do site, é interessante utilizar ferramentas de avaliação de acessibilidade, como o AcessMonitor, do governo de Portugal.

Gostou da solução? Nós podemos ajudar!

Conheça nossos conteúdos gratuitos, direcionados aos assuntos de sua preferência!

Enviar

Receba nosso conteúdo

Gostaria de receber de forma gratuita mais conteúdos sobre este ou outros assuntos? Preencha o formulário abaixo e receba nosso conteúdo gratuito!

Parabéns!

Você receberá nosso conteúdo em breve!

Atenção

Tivemos um problema com seu formulário, tente novamente.