Como um ótimo design afeta a acessibilidade do site

Você está procurando um ponto de partida na vasta disciplina da acessibilidade? Investigaremos práticas e ferramentas reais que você pode implementar em seu processo de design para melhorar seus produtos digitais, tornando-os inclusivos para mais usuários.

O que é acessibilidade?

Os sites acessíveis permitem que uma variedade maior de usuários se envolva com o conteúdo do seu site sem atrito. Quer estejamos abordando o tópico de uma perspectiva de interface do usuário ou UX, o foco está na criação de um produto de qualidade que se adapte a um público diversificado.

Este público diversificado "se estende a qualquer pessoa que esteja passando por qualquer deficiência permanente, temporária ou situacional, por exemplo, ter apenas um braço é uma condição permanente, ter um braço ferido é temporário e segurar um bebê em um braço é situacional - em cada caso, o o usuário é capaz de completar tarefas com apenas uma mão. ” (Avinash Kaur, 2018).

Por que a acessibilidade é importante?

Como designers, é nossa responsabilidade garantir que projetamos de uma forma que seja acessível a todos os usuários, independentemente de sua situação, habilidades ou contexto. Assim, a web pode ser um espaço inclusivo para todos, sejam eles portadores de deficiência cognitiva, visual ou física.

A criação de um site acessível não precisa exigir grandes quantias de orçamento ou mudanças. Como não exige recursos ou conteúdo adicionais, a acessibilidade pode ser alcançada por meio da educação e da conscientização no início de um projeto de design.

Também é indiscutivelmente importante para os negócios: estudos mostram que sites acessíveis têm melhores resultados de pesquisa, alcançam um público maior, são SEO amigáveis, têm tempos de download mais rápidos, incentivam boas práticas de codificação e sempre têm melhor usabilidade.

Como alcançamos acessibilidade?

Você precisará fazer alguns ajustes e seguir uma estrutura para garantir que está projetando para um conjunto diversificado de habilidades, idades e nível de experiência com dispositivos.

Acessibilidade é uma disciplina autônoma que está em constante evolução para se adequar a produtos digitais. Mas, da mesma forma, as soluções de software também estão crescendo. O que significa que não podemos cobrir tudo no tópico, mas se você achar este artigo útil, podemos fazer a parte 2!

Vamos mergulhar fundo em 5 grandes áreas:

1. Contraste de cor
2. Texto alternativo
3. Estados de foco
4. Formulários
5. Tipografia

Contraste de cor

Garantir que haja um contraste de cores suficiente entre o texto e o fundo ajuda os usuários com dificuldade de visão. Isso afeta um número maior de usuários do que o esperado e costuma ser ignorado como um problema. No entanto, cerca de 1 em 12 homens são daltônicos e muitos outros com baixa visão ou cegos.

Para começar, as diretrizes de acessibilidade determinam que a cor nunca deve ser a única forma de transmitir informações. Em outras palavras, deve haver uma sugestão adicional para aqueles usuários que percebem as cores de forma diferente e podem perder nossas instruções baseadas em cores.

Para manter um contraste decente entre o texto e o fundo, uma boa proporção a seguir é de no mínimo 4,5 para 1. Isso permite clareza para usuários com baixa visão ou daltonismo diferenciar os dois.

A taxa de contraste de 4,5 para 1 segue o nível de conformidade AA (dos três níveis: A, AA e AAA), mas isso muda com base no tamanho da fonte e no nível de conformidade que você deseja alcançar. Fontes maiores requerem uma taxa de contraste menor de apenas 3 para 1 se o tipo for 18 pt (ou 14 pt em negrito).

Essas proporções mínimas não se aplicam ao texto que está dentro de um logotipo ou nome de marca, mas é útil verificar sua proporção de contraste por si mesmo usando esta ferramenta útil.

Texto alternativo

Para usuários que acessam a web por meio de leitores de tela, o conteúdo exibido nem sempre é transmitido corretamente. Texto alternativo (alt) é o que o leitor de tela utiliza para informar ao usuário quais imagens estão na página.

Isso pode ser feito convertendo o texto alternativo em braille, uma descrição de áudio ou lendo o texto visualmente. Isso significa que é importante descrever com precisão o que está acontecendo na imagem para aqueles que não podem ver.

Às vezes, pode não ser necessário adicionar texto alternativo. Por exemplo, pode haver indicadores contextuais suficientes em torno da imagem ou a imagem não tem outra função além da estética.

Estados de foco

Você provavelmente já está familiarizado com os indicadores de foco sem perceber. Os estados de foco são os (frequentemente) contornos azuis que aparecem quando um elemento é selecionado, por exemplo, links, menus, botões e campos de formulário.

Eles sinalizam em qual elemento o usuário está focado no momento ao usar o teclado. Freqüentemente, esses indicadores são vistos como feios ou como se não servissem a um propósito, mas, na verdade, são muito importantes. Muitos usuários estão limitados ao uso apenas do teclado e os deficientes visuais que usam leitores de tela também precisam de indicadores de foco para ajudar na navegação nas páginas.

Os indicadores de foco são uma maneira simples de tornar a navegação da sua página clara e acessível com muito pouco esforço e, ainda assim, uma grande diferença para o usuário. Eles podem se conectar perfeitamente com a marca usando cores apropriadas, eles só precisam ser contrastantes para que os elementos se destaquem.

Formulários

Os formulários podem ser complexos para qualquer pessoa, mas aqueles com problemas de acessibilidade adicionais podem muitas vezes ter dificuldades quando os formulários são muito minimalistas e pouco claros. Abaixo estão listados alguns itens comuns que precisam ser tratados para lidar com a acessibilidade:

• Rótulos - usar texto de espaço reservado como rótulo em vez de texto fora do campo cria confusão, pois o texto desaparece quando o usuário começa a digitar. Omitir orientações cruciais para o usuário em favor do minimalismo ou da estética é um grande erro a ser evitado.
• Fronteiras - algo tão simples como uma fronteira ao redor de uma entrada de texto é importante para usuários com deficiências cognitivas, portanto, fica claro onde eles precisam clicar
• Instruções adicionais - muitas vezes os formulários usam uma abordagem minimalista na tentativa de organizar o design, no entanto, isso dificulta a usabilidade e, portanto, a acessibilidade.
• Mensagens de erro - devem ser indicadas por vários elementos, normalmente são usadas cores, mas, além disso, os erros devem ser indicados por meio de símbolos ou texto.
• Revisão - os formulários devem permitir um período de revisão antes do envio para permitir que o usuário corrija qualquer informação.

Tipografia

As informações são mais fáceis de digerir quando não estão desordenadas e demais em um único espaço. Isso também se aplica a sites acessíveis. Conforme mencionado anteriormente, o tamanho da fonte pode alterar os requisitos mínimos para a taxa de contraste, mas os tamanhos das fontes não devem ser inferiores a 10 pt.

Como você pode ver, é um desafio ler em 9 pontos.

Aumentar a quantidade de espaço em branco entre as linhas de texto e palavras individuais pode ajudar os usuários com deficiência visual ou dislexia. O seguinte espaçamento mínimo garante que os requisitos desses usuários sejam atendidos:

• Espaçamento entre letras : x0,12 o tamanho da fonte
• Espaçamento entre palavras : x 0,16 o tamanho da fonte
• Espaçamento entre linhas: x1,5 o tamanho da fonte
• Espaçamento de parágrafo : x2 o tamanho da fonte

Conclusão

Surpreendentemente, essas pequenas mudanças podem fazer uma grande diferença na acessibilidade. Não requer grandes orçamentos e muito tempo para fazer seu site se enquadrar nas Diretrizes de Acessibilidade de Conteúdo da Web, mas pode mudar drasticamente a experiência de um usuário e, portanto, impulsionar seus negócios também.

Adicionar essas sugestões ao seu processo de design pode se tornar uma segunda natureza, abrindo caminho para um futuro de sites mais acessíveis - depende de nós, como designers.

Se precisar de ajuda com o seu criativo, não hesite em nos contatar.