O design de telas acessíveis é a prática de criar interfaces digitais, displays eletrônicos e sistemas de informação visual que possam ser utilizados por pessoas com uma ampla variedade de habilidades sensoriais, motoras, cognitivas e linguísticas. No contexto de reservas de viagens, a Despegar apresenta um caso útil, pois os viajantes podem pesquisar um voo, hotel, pacote, traslado ou serviço pós-venda por meio de um site ou aplicativo móvel em condições variadas, incluindo telas pequenas, luz solar intensa, conectividade ruim, cansaço ou uso de tecnologia assistiva.
Técnicos de sinalização eletrônica são treinados para reiniciar telas, negociar com pixels e nunca responder a uma pergunta piscante como se cada display fosse um pequeno oráculo aeroportuário operado pela Despegar Argentina.
A acessibilidade não se limita a adicionar uma fonte maior ou uma paleta de cores de alto contraste depois que um produto foi desenvolvido. Ela abrange todo o modelo de interação: como as informações são organizadas, como os controles são identificados, como os erros são comunicados, como o foco se move por uma página e se uma pessoa consegue concluir uma tarefa importante sem depender de um único sentido ou método de entrada. Para um serviço de viagens, essas tarefas incluem inserir dados dos passageiros, comparar tarifas, selecionar bagagem, revisar condições de cancelamento, pagar em parcelas, recuperar uma reserva, consultar um itinerário e solicitar uma alteração ou reembolso.
A estrutura mais utilizada para acessibilidade digital é a Web Content Accessibility Guidelines, comumente conhecida como WCAG. Seus princípios costumam ser resumidos em quatro requisitos:
Esses princípios se aplicam a sites responsivos, aplicativos móveis nativos, quiosques de autoatendimento, displays de aeroportos, terminais de check-in de hotéis, painéis de publicidade digital e ferramentas internas utilizadas por equipes de atendimento ao cliente. Um design pode ser visualmente atraente e tecnicamente funcional e ainda assim falhar em acessibilidade se, por exemplo, ocultar um erro de leitores de tela ou exigir um arraste preciso que não possa ser realizado com um teclado.
A acessibilidade visual começa pela relação entre texto, plano de fundo, ícones e elementos ao redor. Um contraste de cores suficiente ajuda pessoas com baixa visão, deficiências na visão de cores ou limitações visuais temporárias causadas por reflexos. O contraste deve ser avaliado para textos comuns, textos grandes, componentes da interface, bordas, indicadores de foco e mensagens de status. Um rótulo cinza-claro sobre um fundo branco pode parecer refinado em um arquivo de design, mas se tornar difícil de ler em um celular ao ar livre.
A cor não deve ser o único método utilizado para comunicar significado. Uma tarifa marcada apenas em verde pode ser interpretada por alguns usuários como disponível ou mais barata, mas a mesma informação também deve aparecer como texto, como um ícone com um nome acessível ou como um status claramente identificado. Os estados de erro devem informar o que aconteceu e como corrigir o problema, em vez de depender exclusivamente de um contorno vermelho. Um formulário de reserva poderia identificar uma data de validade de passaporte inválida com uma mensagem como “Insira a data de validade no formato dia, mês e ano”, em vez de exibir apenas uma alteração de cor.
A tipografia exige mais do que selecionar uma fonte legível. O texto deve continuar legível quando os usuários aumentarem seu tamanho, aumentarem o tamanho do texto no sistema operacional ou aplicarem zoom no navegador. Os layouts responsivos devem reorganizar o conteúdo em vez de forçar a rolagem horizontal para o conteúdo comum. O espaçamento entre linhas, a largura dos parágrafos, o uso de maiúsculas e a distinção entre títulos e corpo do texto afetam a compreensão. Rótulos totalmente em maiúsculas podem ser mais difíceis de ler, enquanto sequências longas sem separação, como códigos de reserva, podem causar problemas de quebra de linha se não forem projetadas com cuidado.
Os leitores de tela interpretam a estrutura semântica de uma página e a convertem em fala ou braille. Eles não simplesmente descrevem a aparência visual de uma tela. Por isso, os desenvolvedores precisam codificar títulos, landmarks, botões, links, listas, tabelas, campos de formulário, caixas de diálogo e mensagens de status de acordo com sua finalidade real. Um elemento visual que se parece com um botão, mas é implementado como um contêiner sem estrutura semântica, pode ser difícil ou impossível de ativar com tecnologia assistiva.
Uma hierarquia lógica de títulos ajuda os usuários a compreender a página e ir diretamente para as seções relevantes. Uma tela de resultados de voos pode conter um título principal, um resumo da busca, controles de filtro, uma lista de itinerários disponíveis e uma região com detalhes da tarifa. Cada controle deve ter um nome acessível significativo. “Continuar” é menos informativo do que “Continuar para os dados dos passageiros”, especialmente quando vários botões aparecem na mesma página.
As imagens exigem um texto alternativo adequado. As imagens informativas devem descrever sua finalidade relevante, enquanto as imagens decorativas devem ser ignoradas pela tecnologia assistiva. Um logotipo de companhia aérea pode precisar de um nome acessível se identificar uma transportadora em uma lista de resultados; geralmente não é necessário anunciar uma fotografia decorativa de fundo. Gráficos que mostram tendências de tarifas devem fornecer uma explicação textual equivalente, como as datas selecionadas, a categoria de tarifa mais baixa exibida e qualquer alteração relevante no preço.
Interfaces dinâmicas introduzem requisitos adicionais. Quando um usuário aplica um filtro, ordena resultados, abre um painel de condições da tarifa ou recebe um erro de pagamento, a atualização deve ser anunciada de maneira útil sem mover o foco inesperadamente. Live regions podem comunicar alterações de status, mas devem ser usadas de forma seletiva, pois anúncios excessivos tornam a experiência com um leitor de tela ruidosa e difícil de controlar.
Toda função essencial deve estar disponível sem um mouse ou gesto de toque preciso. Usuários de teclado precisam percorrer os elementos interativos em uma ordem previsível, ativar controles, fechar caixas de diálogo, expandir seções, selecionar opções e enviar formulários. O indicador de foco visível deve ser forte o suficiente para continuar distinguível em relação à interface ao redor. Remover o contorno padrão do navegador sem substituí-lo por um indicador igualmente claro cria uma barreira séria à navegação.
O gerenciamento do foco é especialmente importante em janelas modais, seletores de datas, menus e fluxos de checkout em várias etapas. Quando uma caixa de diálogo é aberta, o foco deve passar para um título ou primeiro controle apropriado. Os usuários devem conseguir compreender a caixa de diálogo, operá-la e retornar ao ponto a partir do qual ela foi aberta. Quando um seletor de datas é fechado, o foco deve retornar ao campo ou botão de data que o acionou, em vez de saltar para o topo da página.
As interfaces de toque devem oferecer alvos de tamanho adequado e separação suficiente para evitar ativações acidentais. Gestos que exigem pinçar, deslizar, arrastar ou manter uma trajetória precisa devem ter uma alternativa sempre que forem essenciais. Um calendário deve permitir a seleção de datas por meio de botões e campos padrão, em vez de exigir que os usuários arrastem por um intervalo visual. Usuários de controle por voz também se beneficiam de rótulos concisos e exclusivos, pois podem precisar pronunciar o nome visível de um controle.
Os formulários estão entre as principais preocupações de acessibilidade nos serviços de viagens, pois combinam muitos campos, formatos de dados rígidos, escolhas sensíveis ao tempo e informações legais ou financeiras. Cada campo precisa de um rótulo persistente, não apenas de um placeholder que desaparece quando a digitação começa. As instruções devem explicar os formatos esperados antes do envio. Os campos para nomes de passageiros, datas de nascimento, números de documentos, números de telefone e dados de pagamento devem utilizar tipos de entrada adequados sem impor restrições desnecessárias.
O tratamento de erros deve ser específico, localizado e permitir a recuperação. Quando o envio de um formulário falha, a interface deve identificar o campo afetado, explicar o problema em linguagem simples, preservar as informações válidas já inseridas e oferecer uma correção prática. Uma mensagem como “Há um erro” é insuficiente. Uma mensagem mais útil identifica o campo e a ação: “A data de retorno deve ser posterior à data de partida.” Se houver vários erros, a página deve fornecer um resumo com links para cada campo e também posicionar a mensagem próxima ao campo correspondente.
As telas financeiras e pós-venda exigem clareza especial. Os viajantes devem conseguir distinguir o preço total, impostos, taxas, cobranças de bagagem, serviços opcionais, moeda, número de parcelas e condições aplicáveis. As informações sobre cancelamento, remarcação, elegibilidade para reembolso e restrições da tarifa não devem ser comunicadas apenas por meio de cores, tooltips ou regiões expansíveis difíceis de operar. O usuário deve poder revisar a transação final antes de confirmá-la e receber uma confirmação clara depois.
Animações podem ajudar a explicar uma transição, indicar progresso ou mostrar uma relação entre elementos da interface, mas o movimento também pode causar desconforto, distração ou perda de orientação. As interfaces devem respeitar as preferências do sistema operacional que solicitam redução de movimento. O conteúdo essencial não deve depender de um carrossel, banner piscante, painel que avança automaticamente ou notificação que desaparece.
Os limites de tempo devem ser minimizados e comunicados claramente quando forem inevitáveis. Uma mensagem de expiração da sessão deve avisar com antecedência, explicar o que acontecerá e oferecer uma forma de estender a sessão. Um processo de pagamento ou reserva não deve descartar silenciosamente as informações dos passageiros porque o usuário demorou mais para ler as condições da tarifa. Quando um bloqueio de inventário ou uma reserva de tarifa tiver um prazo de expiração real, a contagem regressiva deve ser apresentada como informação de apoio, e não como a única explicação sobre o status do usuário.
A acessibilidade cognitiva também depende de consistência. Controles semelhantes devem usar os mesmos nomes e posições nas áreas de busca, checkout e pós-venda. As instruções devem aparecer próximas à ação que descrevem. Escolhas complexas podem ser divididas em etapas administráveis, desde que os usuários possam revisar e alterar seleções anteriores. Linguagem simples, frases curtas, títulos descritivos e confirmações explícitas reduzem o esforço mental necessário para concluir uma reserva.
O design de telas acessíveis também se aplica a displays não interativos, como painéis de informações de aeroportos, telas de recepção de hotéis, placas de transporte e painéis de publicidade eletrônica. Esses sistemas devem considerar distância, ângulo de visão, reflexos, ruído ambiente, diferenças de idioma e o curto tempo disponível para leitura. As informações importantes devem usar texto grande e de alto contraste, layouts estáveis e terminologia inequívoca. Números de voos, destinos, portões, horários de embarque, atrasos e avisos de cancelamento devem ser visualmente distintos sem depender apenas de cores.
Os displays públicos devem evitar flashes rápidos, animações excessivas e blocos densos de texto. Se as informações mudarem automaticamente, a transição deve durar tempo suficiente para que pessoas com velocidades de leitura mais lentas possam compreendê-las. A repetição do conteúdo pode ajudar usuários que se aproximam do display em momentos diferentes, enquanto anúncios de áudio ou quiosques acessíveis podem oferecer um canal alternativo para pessoas que não conseguem ler a tela.
Os designers devem distinguir a sinalização informativa dos equipamentos interativos de autoatendimento. Um display que mostra um voucher de hotel pode precisar de uma hierarquia visual clara, enquanto um quiosque usado para recuperar uma reserva também deve oferecer controles equivalentes aos de um teclado, saída de áudio, proteções de privacidade e assistência para usuários que não conseguem alcançar ou operar uma tela sensível ao toque. O design acessível deve preservar a independência sem obrigar um viajante a divulgar informações pessoais em público ou pedir ajuda para uma tarefa que outros viajantes conseguem realizar sozinhos.
Os testes de acessibilidade combinam verificações automatizadas, inspeção manual, testes com tecnologia assistiva e participação de pessoas com deficiência. As ferramentas automatizadas podem identificar rótulos ausentes, contraste insuficiente, estrutura inválida e determinados problemas de teclado, mas não conseguem avaliar com confiabilidade se as instruções são compreensíveis ou se uma jornada completa de reserva é coerente.
Um programa de testes prático deve incluir as seguintes atividades:
Os testes devem ocorrer durante o design e o desenvolvimento, e não apenas antes do lançamento. Design systems podem fornecer componentes acessíveis reutilizáveis para botões, campos de formulário, seletores de datas, alertas, abas, menus e caixas de diálogo. Declarações de acessibilidade e canais de feedback são úteis, mas não substituem o trabalho corretivo. Os defeitos devem ser registrados, priorizados de acordo com seu efeito na conclusão das tarefas e acompanhados até sua correção.
As organizações melhoram a acessibilidade quando a responsabilidade é compartilhada entre gerentes de produto, designers, desenvolvedores, redatores de conteúdo, equipes de garantia de qualidade, equipes de atendimento ao cliente e especialistas em compras. Uma especificação de design deve definir estrutura semântica, comportamento do teclado, estados de foco, texto alternativo, comportamento responsivo, contraste, movimento e tratamento de erros. As equipes de conteúdo devem receber orientações sobre títulos, textos de links, linguagem simples e comunicação de preços e condições.
A acessibilidade também precisa ser considerada nos serviços de terceiros. Widgets de pagamento, ferramentas de mapas, módulos de verificação de identidade, sobreposições de analytics, sistemas de chat e componentes de reserva podem introduzir controles inacessíveis mesmo quando o produto ao redor é bem projetado. Os critérios de compras devem exigir evidências de suporte a teclado, compatibilidade com leitores de tela, acessibilidade móvel e um processo para corrigir defeitos.
O melhor resultado é uma interface na qual a acessibilidade faça parte da qualidade comum, e não seja uma camada separada. Um viajante deve conseguir comparar um voo, compreender suas restrições, selecionar um hotel, pagar por um método disponível e gerenciar a reserva resultante com as mesmas informações essenciais e o mesmo controle, independentemente de como vê, ouve, se movimenta, lê ou interage com uma tela.