design

Acessível não significa feio

Quando você está desenvolvendo um website ou um aplicativo, é fácil esquecer que está fazendo isso para pessoas com necessidades diferentes para você. Quando você finalmente lança um produto bom, brilhante e digno de ser dribbble no mundo, você pode pensar que será a mesma grande experiência para todos. No entanto, as coisas não são tão simples assim como a vida. As pessoas são diferentes, elas têm necessidades que variam e, se você planeja que todos possam usar seu site, certifique-se de ter tempo para torná-las acessíveis a eles.

Aqui estão algumas coisas que você pode fazer agora para melhorar a acessibilidade em seu site:

Contornos
Às vezes, um usuário pode não conseguir navegar em seu site com um mouse convencional. Alguns usuários dependem da navegação com o uso da tecla tab, acessando o botão ou a entrada de que precisam e continuando com a jornada.

No entanto, quando um usuário acessa um elemento, ele geralmente vê um esboço de foco bastante feio, o que estraga a estética que o site cuidadosamente projetado está tentando usar. No entanto, podemos melhorar isso.

Um ótimo design arruinado por um halo feio (cortesia de Dribbble)
A propriedade outline no CSS é bastante restritiva, mas na verdade existe uma boa alternativa a ela; a caixa-sombra. As sombras de caixa são suportadas em todos os navegadores (exceto no Opera Mini) e, quando aplicadas a um elemento em foco, têm um impacto muito semelhante ao contorno.

Suporte para sombras de caixa nos navegadores (via Can I Use)
O que é ainda melhor na propriedade box-shadow é que ela realmente envolve seu elemento com firmeza (digamos que você tivesse um botão com um raio de 4px, um contorno produziria um halo retangular em volta dele, mas uma shadow box abraça todos as curvas). Uma sombra de caixa também pode ser personalizada um pouco mais que um contorno. Na verdade, há um ótimo site para isso. Adicionando uma transição (novamente – suportado em tudo, exceto o Opera Mini) é a cereja no topo do bolo visual. Veja um exemplo:

Estados de focalização
Quando o cursor precisa passar por cima de um elemento antes que um conjunto de ações ou informações possa se tornar visível, isso é problemático para usuários que precisam usar ampliadores de tela que seguem o cursor. Considere esta interação:

Você precisa que um usuário passe o mouse sobre um elemento para ver algumas informações em uma lista
A informação pop-up é exibida, mas para lê-lo o usuário precisa rolar o cursor sobre ela
Mover o cursor significa que o pop-up desaparece e, inadvertidamente, o cursor faz com que outro pop-up apareça
Este é um ciclo infernal para qualquer pessoa que precise usar um computador desse tipo. No entanto, poderia ser melhorado.

Se você planejar a hierarquia de informações que deseja exibir, talvez uma lista de linha única não seja a melhor maneira de apresentar seus dados. Talvez um cartão possa funcionar melhor.

Os cartões podem ser uma boa solução ao procurar exibir muitas informações relacionadas na tela ao mesmo tempo
Se você precisa ter um pop-up em seu design, é recomendável permitir que o usuário role até o pop-up sem que ele desapareça. Isso significa que, se uma pessoa precisar usar uma ferramenta de ampliação, ela poderá se mover pelo pop-up e lê-la totalmente sem que ela desapareça.

Legibilidade

Menu de hambúrguer com pouca legibilidade
Ao tentar projetar uma interface elegante, pode ser tentador ter tipos de letra com cores semelhantes – no entanto, como você pode ver no exemplo acima, mesmo com ótima visão, você mal consegue distinguir o texto na barra lateral.

Há uma maneira de melhorar isso. Você pode usar ferramentas como o analisador de contraste de cores do WebAIM para garantir que suas opções de cores sejam apropriadas para seu público.

Exemplos de legibilidade do texto (7: 1 te daria um passe no WCAG AAA em texto normal)
Há também outra ótima ferramenta que uso ao projetar para acessibilidade. É um plug-in que você pode obter para o Sketch chamado Color Contrast Analyzer. É ótimo para tornar o fluxo de trabalho um pouco mais rápido, pois você pode selecionar duas camadas (o plano de fundo e o texto) e clicar nesse plug-in, informando se ele passou ou falhou nas verificações de acessibilidade, além da proporção.

Analisador de contraste de cores para esboço
Outra coisa a ter em mente ao escolher um tipo de letra é usar ou não uma fonte serif ou sans-serif. Algumas pessoas com pouca visão lutam para ler fontes com serifa, pois incluem algumas decorações que distraem a forma da letra. Alguns tipos de letra sem serifa populares e comuns incluem Arial, Calibri e Helvetica.

Uma versão mais legível da barra lateral que vimos anteriormente
Daltonismo
O daltonismo afeta cerca de 300 milhões de pessoas em todo o mundo, o que significa cerca de 1 em 12 homens e 1 em 200 mulheres. A razão para os homens serem mais suscetíveis ao daltonismo é devido aos genes para o daltonismo mais comumente hereditário, oriundo do cromossomo X. Um homem terá um cromossomo X enquanto uma mulher terá dois. Para as mulheres, isso significa que, mesmo que elas herdem o daltonismo em um cromossomo X, o fato de o outro cromossomo X não ter esse traço genético significará que ele não sofrerá de daltonismo.

Então, como isso se aplica a você, desenvolvendo seu novo produto digital?

Bem, considere que você está fazendo algum tipo de aplicativo de teste. No momento, a única maneira de dizer ao usuário se a resposta escolhida é certa ou errada é usar uma cor de texto verde ou vermelha na resposta.

Um exemplo de uma interface de teste
Ótimo, mas considere se o usuário é daltônico. Qual resposta está correta agora? É difícil dizer (talvez até impossível).

Um exemplo de como a interface aparece para alguém com acromatopsia (daltonismo parcial ou total)
No entanto, existem soluções para esse problema de design.

Em primeiro lugar, considere o uso de iconografia ou texto para enfatizar diferentes significados. Por exemplo, com o aplicativo de teste, se uma pergunta estivesse correta, você poderia colocar uma marca de seleção ao lado dela e torná-la em negrito.

Um novo visual para o aplicativo de teste
Isso permitiria agora que um usuário daltônico entendesse que essa resposta está correta.

Como alguém com acromatopsia agora veria essa interface
Em segundo lugar, pense em padrões e formas. Imagine que você esteja exibindo um gráfico com cores diferentes para itens diferentes. Isso seria muito difícil para um usuário daltônico compreender, no entanto, se adicionássemos um padrão único a cada seção, ficaria claro quais rótulos se relacionam com quais seções.

Um gráfico que é difícil de interpretar se você tiver acromatopsia (à direita)
O uso de padrões e formas neste gráfico pode facilitar muito a compreensão, não apenas dos usuários daltônicos, mas de todos os usuários.

Um design gráfico mais acessível incorporando formas e pequenos padrões
Aqui está uma ferramenta útil que eu uso para verificar meus projetos de problemas de acessibilidade ao considerar o daltonismo: Coblis

Conclusão
Em geral, há muitas maneiras de melhorar a acessibilidade do seu produto digital – muitas para mencionar aqui de uma só vez. No entanto, a implementação dessas pequenas melhorias no seu site ou aplicativo não apenas permite que um conjunto de usuários completamente novo interaja com ele, como também melhora a usabilidade para a maioria das pessoas. Tornar as coisas mais fáceis de usar não significa que você precise torná-las mais feias e valorizar a função em relação à forma, isso significa tomar melhores decisões de design para resolver a ampla gama de cenários com os quais as pessoas precisam lidar.

Se a única maneira de tornar seu site ou aplicativo mais acessível é sacrificar a forma, talvez a forma nunca tenha sido ótima para começar.

Tem algum outro problema de design acessível? Deixe um comentário e eu posso tentar resolvê-los na minha próxima postagem com foco em acessibilidade.