Acessibilidade

A acessibilidade web está ganhando mais espaço no contexto de desenvolvimento de software. Dada a natureza colaborativa da web e sua importância no processo de facilitar a comunicação, precisamos assegurar o acesso à informação e promover a mesma experiência a todos os usuários, independentemente das habilidades físicas e cognitivas ou da plataforma e tecnologias utilizadas.

Deficiência não é apenas um problema de saúde. É um fenômeno complexo, refletindo a interação entre as características do corpo de uma pessoa e as características da sociedade em que vive.

Ainda não está convencido?

De acordo com dados do Relatório Mundial de Deficiência 2011 um bilhão de pessoas em todo o mundo vivem com algum tipo de deficiência (10% da população mundial). No Brasil, o acesso a informação é um direito garantido pela Constituição Federal. Além disso, o último Censo mostrou que 45.6 milhões de pessoas (23,9% da população total) possuem alguma deficiência.

Componentes acessíveis

Os componentes do Lemonade são construídos seguindo as especificações da WCAG, em conformidade com o nível AA. O Lemonade permite o desenvolvimento acessível, fornecendo componentes semanticamente corretos, cada um com uma marcação ARIA apropriada, para que possam ser corretamente identificados por tecnologias assistivas. No entanto, é importante ter em mente que o design system é apenas a base para o desenvolvimento de aplicações acessíveis. Recomendamos que você analise e teste seus produtos para garantir que estejam em conformidade com as Normas WCAG no nível AA.

Como foram feitos os testes de acessibilidade?

Os componentes e princípios que compõem o design system do Lemonade foram testados para garantir que estivessem adequados à acessibilidade. O processo contou com duas etapas de teste, a primeira com ferramentas automatizadas e a segunda com usuários.

Teste com ferramentas automatizadas: foram realizadas a verificação de contrastes e de adequação à versão 2.1 da WCAG, adequação à e-mag, e ferramentas de testes automatizados (pós-desenvolvimento): Lighthouse do Google e Axe da Deque.

Teste com usuários: foram testadas a eficiência, eficácia e satisfação dos componentes através de um teste de usabilidade com o público específico:

• 1 usuário com limitação visual (cego);
• 4 usuários com limitação visual (baixa visão, daltonismo);
• 2 usuários com limitação motora temporária (apenas uso de teclado).

Tanto o teste com ferramentas quanto com usuários forneceram dados utilizados para a melhoria dos componentes e das soluções implementadas no Lemonade.

Melhores práticas

Cores

• A cor não deve ser usada como o único meio visual de transmitir informações, indicar ação, solicitar resposta ou distinguir elementos visuais;
• Limite o uso de vermelhos e verdes, porque estes são facilmente confundidos no tipo mais comum de daltonismo;
• O plug-in Stark do Sketch possibilita ver como os protótipos são vistos por diferentes tipos de daltonismo.

Contraste

Em geral, o texto e as imagens devem atingir o contraste mínimo ideal de 4,5: 1 (para fontes iguais ou menores que 14 pt), exceto:

• Textos grandes (18,6px ou 14pt) devem manter o contraste de pelo menos 3: 1;
• Texto/imagens decorativas e estados desativados não têm requisitos de contraste;
• O logotipo ou texto que compõe uma marca não precisa estar dentro da razão de contraste.

Foco

O componente focado pelo teclado deve estar claramente marcado e a área de seleção deve ser clicável. Por padrão, links e elementos de formulário já exibem a borda destacada quando recebem o foco do teclado. Essa borda pode ser modificada via CSS para aprimorar o realce, mas não deve ser removida.

Usamos e recomendamos que a espessura mínima da borda seja de 2px.

Tecnologias assistivas

Quando as pessoas começam a desenvolver com a acessibilidade em mente, é um erro comum adicionar foco a todos os elementos da página, incluindo texto e títulos. Isso dificulta a navegação de usuários que podem ver e ainda dificulta a navegação para quem depende de um leitor de tela, porque as tecnologias assistivas já fornecem foco para esses elementos.

Títulos, blocos de texto e campos desabilitados não devem receber foco.