O sucesso ou fracasso de um produto é amplamente determinado pela experiência do usuário (UX) e Interface do usuário (UI).

Se um produto é utilizável e intuitivo, os usuários podem navegar facilmente pelo site ou aplicativo e se tornarem clientes.

Por outro lado, se a experiência for difícil, é improvável que os usuários continuem usando-o.

O objetivo do design UX é criar produtos que possam ser usados com sucesso por todos os usuários potenciais, independentemente de sua capacidade. Em outras palavras, a melhor UX é acessível a todos. Além disso, o nosso amigo de UI é responsável pela leitura e inclusão de todos também.

O que torna a acessibilidade única?

É necessária uma equipe para criar uma experiência acessível, normalmente composta por design UX, desenvolvimento web, garantia de qualidade (QA) e criação de conteúdo.

Se qualquer uma dessas funções negligenciar a acessibilidade durante sua contribuição, o resultado pode não ser acessível.

Por exemplo, se um desenvolvedor segue todas as práticas recomendadas de acessibilidade ao codificar uma página, mas o design com o qual ele está trabalhando tem problemas de acessibilidade, a página desenvolvida ainda pode ter esses problemas.

É por isso que o design UX é tão importante para a acessibilidade da web: os designers de UX descrevem como os usuários podem atingir seus diferentes objetivos ao visitar seu site. Qualquer deficiência de acessibilidade introduzida aqui corre o risco de persistir até o produto final e exigirá retrabalho antes que o produto seja lançado.

1 • Começar com uma lista de verificação de melhores práticas de acessibilidade em UX

Revise uma lista de verificação de acessibilidade útil antes de iniciar seus designs UX para ter os requisitos básicos em mente antes de começar a trabalhar.

Em seguida, revise seu trabalho em relação à lista de verificação para garantir que você não tenha perdido nada.

Uma lista de verificação de acessibilidade deve incluir etapas básicas para garantir que a acessibilidade seja incorporada nas fases de design, construção e teste de QA do seu site.

Uma lista de verificação simples pode ajudá-lo a se manter no alvo para as melhores práticas de acessibilidade UX e garantir que nada escape.

2 • Habilitar a navegação por teclado

A acessibilidade do teclado é um dos aspectos mais críticos da acessibilidade web que os designers de UX frequentemente ignoram.

Com um mouse, os usuários podem mover-se diretamente para o elemento da página da web com o qual desejam interagir, independentemente de outros elementos da página.

Mas com a navegação pelo teclado, os usuários podem tocar uma única tecla (geralmente a tecla tab) para peneirar os diferentes elementos interativos da página. Cada elemento também deve exibir um indicador de foco para qual elemento da página tem o foco do teclado.

Para a navegação pelo teclado, a ordenação dos elementos é essencial, pois é mais intuitivo navegar por itens relacionados juntos. Além disso, os elementos interativos devem ser selecionáveis com um teclado, caso contrário, os usuários não podem escolher realizar essa ação se o teclado não puder pousar nela.

Como designer UX, pergunte-se: alguém pode explorar este conteúdo se usar apenas um teclado - ou apenas a tecla tab? Fará sentido para eles?

Para entender melhor como funciona a navegação pelo teclado e as frustrações comuns do usuário, experimente o HOCUS: FOCUS, um jogo interativo que depende apenas do teclado para navegação.

3 • Projetar estados de foco usáveis

Os indicadores de foco dentro de uma página da web identificam qual elemento possui o foco do teclado. Eles geralmente são vistos como contornos azuis ao redor do texto e elementos interativos.

Quando os elementos interativos em sua página da web não possuem estados de foco, os usuários do teclado não podem dizer onde estão na página nem com quais elementos da página podem interagir.

Os designers UX podem ajudar seus colegas desenvolvedores incluindo estados de foco em seus designs.

Isso remove qualquer ambiguidade sobre como o estado de foco deve ser e também pode ajudar a lembrar os desenvolvedores de incluir estados de foco em toda a página desenvolvida.

4 • Priorizar a clareza do texto

A legibilidade do texto é um dos obstáculos de navegação mais significativos enfrentados por adultos idosos e usuários com deficiência visual.

Os designers UX devem usar fontes e estilos claros para melhorar a clareza e a legibilidade do texto.

Algumas fontes comuns com decoração mínima e boa altura, largura e peso incluem:

• Arial (sans serif)

• Book Antiqua (serif)

• Poppins (sans serif)

• Inter (sans serif)

• Montserrat (sans serif)

• Georgia (serif) — fonte do corpo da marca UNCG

• Helvetica (sans serif)

• Lucida Sans (sans serif—Windows)/Lucida Grande (sans serif—Mac)

• Palatino (serif) — fonte do corpo da marca UNCG

• Tahoma (sans serif)

• Verdana (sans serif) — Usado por muitos sites em acessibilidade

ART IT

17 junho 2024 ° 3 min

Por Rodrigo Alexandre

Designer UX/UI na ART IT

5 • Verifique o contraste de cores

Outro problema comum enfrentado por usuários com deficiência visual é o contraste insuficiente de cores entre o texto e o plano de fundo ou o texto dentro de gráficos.

A Organização Mundial da Saúde (OMS) estima que existam 217 milhões de pessoas com deficiência visual moderada a severa.

Para ajudar esses usuários a lerem seu conteúdo com mais facilidade, use uma ferramenta de verificação de contraste para garantir que as cores e fontes forneçam legibilidade suficiente.

Mais recentemente, alguns sites como o hubspot.com começaram a oferecer opções de alto contraste para seus sites. Isso permite que as marcas mantenham as cores conhecidas de sua identidade de marca, ao mesmo tempo que oferecem uma experiência mais acessível.

6 • Não confie apenas na cor para fazer dinstinções

Embora a codificação por cores possa ser uma maneira rápida de fornecer informações contextuais, não confie nela como o único indicador de diferença.

Usuários daltônicos podem não conseguir perceber elementos codificados por cores em seu site.

Adicionar rótulos também pode ser útil para esses usuários.

7 • Certifique-se de que seu conteúdo esteja ordenado corretamente em HTML

Usuários visualmente habilitados possam escanear seu site e identificar onde clicar, usuários com leitores de tela precisam esperar que sua tecnologia assistiva leia cada elemento da página.

É crucial rotular e ordenar o conteúdo adequadamente em seu HTML para que os leitores de tela e outras tecnologias assistivas possam ler o conteúdo mais importante primeiro e todo o resto na ordem correta.

Por exemplo, imagine a frustração de carregar um artigo que você gostaria de ler e esperar para vasculhar todo o menu de navegação antes de poder começar a ler.

8 • Forneça texto explicativo para link e imagens

O texto alternativo para imagens e links ajuda usuários com contexto limitado a entender o propósito desses elementos.

Para links, certifique-se de que as descrições possam ser entendidas de forma independente, fora do contexto (por exemplo, "gráfico do Wall Street Journal mostrando a taxa de desemprego dos EUA para pessoas com deficiência, 2010-2019").

Para imagens, descreva o que está acontecendo e mostre como isso é importante para o contexto da página. "Imagem de pessoa" não é uma boa descrição se a identidade da pessoa ou a ação que ela está realizando for importante para a compreensão do conteúdo.

9 • Otimize conteúdo dinâmico e interativo

Ao adicionar slideshows, carrosséis, vídeos e outros elementos interativos ao seu site, certifique-se de que esses elementos sejam acessíveis individualmente.

Por exemplo:

• O conteúdo de áudio e vídeo deve ser legendado e a transcrição deve estar facilmente disponível.

• A reprodução automática de vídeos não é recomendada.

• Cada imagem dentro de uma apresentação de slides deve ser legendada e os slides devem ser navegáveis pelo teclado.

• O Flash também não é recomendado porque é mais difícil de tornar acessível.

• As animações não devem piscar três ou mais vezes por segundo para evitar riscos a usuários com transtornos convulsivos e outros usuários sensíveis.

10 • Use marcações adequadas para texto

É essencial garantir que o estilo e o design do seu conteúdo sejam fáceis de usar e entender.

Títulos e cabeçalhos de seção devem ser facilmente identificados com tamanhos de fonte maiores para ajudar os leitores a entender o conteúdo.

11 • Use labels ou instruções para campos de formulário

Para garantir que os usuários entendam as regras e diretrizes para entradas de campos de formulário, os labels não devem desaparecer quando eles começam a digitar. Caso contrário, os usuários podem perder o contexto do que estão escrevendo. Víamos isso acontecer nos componentes do Google (Material Design).

Pode ser útil localizar o label do campo do formulário fora da caixa de entrada, em vez de dentro da caixa de entrada como texto de placeholder.

Lembrete: Design Universal é bom Design

Você obtém o que investe em acessibilidade.

Se você abordar a acessibilidade UX desde o início do design do seu site, integrá-la a todos os aspectos do site será mais fácil.

Profissionais de UX e web design podem priorizar e otimizar a acessibilidade UX seguindo métodos comprovados, como os compartilhados neste artigo.

Curioso para saber qual solução de acessibilidade web é melhor para você?