Como abordamos em outro artigo, a acessibilidade digital tem a ver com derrubar barreiras e proporcionar acesso universal aos seus produtos e serviços.
Mas você pode estar se perguntando como gerenciar um projeto de acessibilidade com todos os requisitos adicionais que as diretrizes de acessibilidade implicam.
Resumindo: o design acessível não é difícil se você começar desde o início.
Um dos desafios mais comuns ao projetar para acessibilidade tem a ver com a universalidade do conceito.
Design acessível significa ser inclusivo e criar produtos para todos os tipos de pessoas.
Mas com uma gama tão ampla de pessoas e todas as suas particularidades, como você garante que não está excluindo nenhum de seus usuários?
Sempre que um site não é acessível por, digamos, uma pessoa com uma deficiência visual, tenho certeza que os designers e desenvolvedores por trás dele não o fizeram intencionalmente.
Eles provavelmente não compreendiam o objetivo.
Então, por onde você começa a garantir que seus produtos digitais não cometam o mesmo erro?
Você precisa começar com o entendimento de que a acessibilidade digital é a base para o objetivo de criar um produto para todos.
Portanto, todos na equipe devem se sentir responsáveis por ele.
Não é um recurso ou uma história de usuário e, portanto, qualquer aplicativo que você esteja construindo não deve dar um jeitinho.
A única maneira de ter um produto genuinamente acessível é garantir que todos tenham esse entendimento desde o momento em que você se senta com as partes interessadas e a equipe do projeto.
Mais importante ainda, ele deve permanecer com todos durante todo o desenvolvimento.
Não importa se foi uma decisão consciente da sua equipe ou um mandato dado de algum outro lugar.
Fazendo sua equipe se importar com a Acessibilidade Digital
Pode ser o caso de você ser obrigado a se tornar acessível.
Talvez os requisitos do governo ou da indústria o obriguem a cumprir as normas da Seção 508 da Lei de Reabilitação (nos EUA) ou um nível específico da norma WCAG 2.0/2.1.
Mas você também pode estar fazendo isso porque sabe que a acessibilidade pode trazer benefícios muito reais para o seu negócio.
Não importa o cenário, se você precisar ou decidir estar em conformidade com o Nível AA do WCAG, você deve comunicá-lo à equipe desde o primeiro dia, porque a conformidade com esse ou qualquer outro padrão afetará seus produtos desde o início.
Cada nível WCAG tem uma lista de regras para orientar o trabalho dos designers e desenvolvedores, e eles podem contar com vários plugins para projetar ferramentas e validadores automáticos para verificar continuamente se eles estão tomando decisões que atendam a essas regras.
Não espere que a equipe conheça “de cor” todas as regras do livro; no entanto, você deve deixar claro que todos devem incluir essas ferramentas de teste (e atividades como testes de usabilidade) em seus processos e que eles entreguem trabalhos que estejam de acordo com as diretrizes em cada sprint.
Mostre a sua expectativa e inclua estes testes.
E obtenha sua experiência inclusiva e interface de usuário desde o início.
8 Regras básicas de Acessibilidade do projeto
Seus designers UX/UI precisam criar uma experiência que suporte os padrões de acessibilidade alvo e seus objetivos de negócios, além das necessidades da base de usuários.
Além disso, os designers irão definir um processo que valida essas ambições através de atividades de pesquisa, testes de usabilidade e fluxos de validação.
Todo esse trabalho de design deve ser condicionado pelas seguintes regras:
1. Preste atenção ao contraste de cores
Thomas está envelhecendo e está perdendo a visão rapidamente, mas ele precisa acessar seu aplicativo para recuperar informações sobre um de seus serviços. O que você pode fazer para facilitar a vida dele?
O padrão diz que as cores de primeiro plano e do plano de fundo devem ter uma relação de contraste suficiente.
Essa relação deve ser de pelo menos 4,5:1 para texto padrão e 3:1 para texto grande (18px ou mais) para cumprir com o nível de conformidade AA.
Para chegar ao nível AAA, você precisaria de uma relação de contraste de 7:1 para texto padrão e 4,5:1 para texto grande.
Se os seus designers sabem que precisam atender ao AA, isso os ajuda a definir o melhor esquema de cores desde o início.
2. Não confie apenas nas cores
Harry é daltônico, e ele quer comprar algumas roupas. Ao visitar sua loja online, ele precisa ser capaz de distinguir as cores vermelho e verde. Como você pode ajudá-lo?
A cor pode ser uma forma útil de transmitir informações, mas não deve ser a única forma.
A percepção das cores pode ser diferente de usuário para usuário, e o designer deve fornecer orientação e assistência para que os usuários possam identificar as informações de que precisam.
A descrição de cores com rótulos pode resolver esta questão.
3. Tenha elementos interativos claros e transparentes
Pense em Edward, que tem tremores de mão e perda de memória a curto prazo, e precisa acessar seu aplicativo de comunicação online para estar em contato com sua família e amigos. Você pode preparar o seu aplicativo para tal condição?
O designer deve preparar o conteúdo e os elementos interativos para estilos e nomenclaturas, utilizando-os de forma consistente para que o usuário identifique claramente onde clicar para realizar uma ação específica.
Dicas de orientação, como menus, cabeçalhos e separadores de conteúdo, também podem ajudar na navegação.
Entretanto, esta história não termina na fase de design.
Você deve garantir que o desenvolvedor front-end inclua atalhos de teclado e atribua ao usuário a capacidade de pular o conteúdo à medida que o usuário começa a navegar através do aplicativo. (Imagine que Edward está usando um leitor de tela, e quando ele vai para uma página diferente dentro do aplicativo, ele tem que ouvir os itens do menu novamente).
4. Esclareça os rótulos de campo do formulário e forneça feedback de erros
Conheça Alaina, que trabalha em um supermercado e tem Síndrome de Down. Suas tarefas diárias incluem a coleta de pedidos e embalagem de produtos em conformidade, portanto ela precisa recuperar informações do seu aplicativo para que possa despachar cada pedido corretamente. O que você pode fazer para facilitar a vida dela?
Cada campo do formulário deve ter um rótulo adjacente, para que o usuário possa identificar claramente o que significa e como responder.
Em idiomas da esquerda para a direita, você deve posicionar as etiquetas no topo ou ao lado esquerdo do campo, e o designer deve evitar usar espaço excessivo entre a etiqueta e o campo para garantir que a relação entre as duas peças seja evidente.
As exceções são rótulos para caixas de seleção e botões de opção, geralmente posicionados ao lado direito do elemento.
O tratamento de erros é importante e deve alertar o usuário quando houver uma entrada de dados incorreta, ou quando algo está faltando, ali mesmo no contexto.
Evite esperar o momento da submissão do formulário para fazer validações de campo, ou Alaina ficará frustrada.
5. Seções relacionadas a grupos com espaço e cabeçalhos
Lara trabalha como contadora sênior em uma seguradora e tem que circular por muitas páginas de informações de produtos em seu aplicativo para fornecer a seus clientes as respostas certas mesmo durante ligações telefônicas rápidas. Como você pode exibir informações de uma maneira que a ajude?
Você deve exibir as informações, para que elas sejam estruturadas de uma forma que facilite a compreensão.
O uso de dois princípios de design, como espaço em branco e proximidade, pode relacionar partes do conteúdo.
Estilizar títulos para agrupar conteúdo ajuda a reduzir a desordem e tornar seu aplicativo fácil de escanear e entender.
Por outro lado, os usuários se beneficiam de ter uma tela identificada com mais clareza, onde as seções são autoexplicativas.
6. Design com diferentes tipos de tela (viewports) em mente
Conheça a Angela. Ela está andando pela rua e reservando um fim de semana com seu namorado no seu site de viagens. Você pode lidar com o fato de que seus usuários estão na maioria das vezes no celular?
Faça um design para diferentes tipos de telas, alinhado com as exigências e necessidades de seus usuários.
Pense como as informações da página devem ser exibidas em viewports de diferentes tamanhos; como a posição e apresentação de elementos como cabeçalhos e navegação podem ser adaptadas se ajustarem melhor a telas de diferentes tamanhos; e como o espaço disponível, tamanho do texto, altura e largura da linha devem ser definidos para garantir a melhor leitura e legibilidade.
Tudo isso é relevante para o design de uma infinidade de dispositivos disponíveis no mercado.
7. Forneça texto alternativo para imagens e mídias
Lembra-se de Thomas, nosso primeiro exemplo? Está ficando cada vez mais difícil para ele ver, então ele vai precisar começar a usar um leitor de tela para acessar seu aplicativo. Como você pode fazer essa transição um pouco mais fácil?
Os leitores de tela fazem uso de texto alt para ajudar os usuários a entender o que a tela está tentando transmitir.
Portanto, esta é provavelmente uma das regras mais importantes que você precisa se atentar.
Você está ajudando os usuários a obter contexto de um conteúdo específico, visualizando com palavras a ideia além de uma imagem (não há necessidade de fazer isso para figuras decorativas).
Juntamente com as imagens, os leitores de tela de vídeo usam legendas para traduzir imagens em palavras.
8. Tenha Controles para Conteúdo que Começa a ser reproduzido Automaticamente
De volta a Angela e sua viagem romântica. Ela está no 4G, e seu plano de dados está para estourar este mês. Você pode impedi-la de gastar mais dinheiro em vídeos de reprodução automática de Santorini?
Seu designer sabe que o controle do usuário é tão visível quanto o controle de conteúdo iniciado automaticamente, como carrosséis, controles de imagem, vídeos, animações ou sons, permitindo que os usuários tomem suas próprias decisões ao reproduzir ou parar um elemento específico.
Este pode ser um exemplo do vídeo de reprodução automática ou de um cenário mais caótico, com áudio de fundo em conflito com um leitor de tela.
O que os designers de experiência do usuário aprendem com a diversidade
Os designers de UX/UI vão fundo no entendimento de seus usuários; é isso que eles fazem.
Eles tentam entender seus diferentes papéis e seus principais objetivos.
Em seguida, eles se aprofundam no amplo cenário de habilidades e conhecimentos que precisam para se adequar às suas motivações, tarefas e execuções diárias, tudo no nível de AA que você definiu para o projeto.
Sua abordagem é lidar com usuários com diferentes habilidades durante sua pesquisa, para que eles tentem incluí-los no processo o mais rápido possível.
Não tenha medo disso.
Se você ampliar o seu espectro de pesquisa, você encontrará cada vez mais necessidades específicas.
O objetivo é garantir que os designers possam capturar as diferenças e semelhanças entre os grupos de usuários e chegar a uma interface que atenda a todos eles.
Considere que diferentes tipos de deficiências ou limitações situacionais requerem um conjunto de ingredientes digitais que permitam aos usuários completar suas tarefas.
Isso pode variar desde uma deficiência relacionada à idade que exige coisas como uma fonte maior ou um contraste maior até um usuário cego que ouve o conteúdo através de um leitor de tela.
Projetar para acessibilidade e atender aos padrões de acessibilidade significa que você tem que projetar o aplicativo para ter certeza que:
- Você escreve o conteúdo (cabeçalhos, textos, imagens, links…) em linguagem simples e direta, estrutura-o e rotula-o com precisão.
- A experiência do usuário atende à base de usuários alvo e é validada através de testes de usabilidade.
- A interface do usuário resultante é protegida contra o nível de acessibilidade pretendido, utilizando ferramentas automatizadas e testes manuais (com navegação por teclado e tecnologia assistiva, como leitores de tela).
E lembre-se de que a acessibilidade digital não é realmente um recurso; não é uma história de usuário, nem é apenas responsabilidade do designer.
Com tudo isso em mente, você e sua equipe estarão no caminho certo para a acessibilidade da web que beneficia a todos, não apenas aos deficientes.
A Prox é uma Consultoria de TI Independente, parceira e cliente da Outsystems.
Leia o artigo original no blog da Outsystems.
