Como projetar conteúdo web acessível para pessoas com deficiências cognitivas – Parte 1


Foto de jovem negra em frente a um computador com tela grande, onde estão projetadas linhas de código. Ao lado dela há um jovem que olha para a tela enquanto ela toca no mouse.

Texto traduzido e adaptado por Caroline Fróes, Duda Derbli, Íngrid Oliveira, Jeniffer Deus e Victória Raupp Krupp*

As deficiências cognitivas estão entre as menos  compreendidas e discutidas por profissionais de desenvolvimento web. Como resultado, as aplicações raramente são projetadas para elas. Isso dificilmente mudará do dia para a noite, porque a quantidade de pesquisas relacionadas à acessibilidade de conteúdo web é relativamente pequena. 

Com a escassez de estudos nessa área, as informações sobre o design para pessoas com deficiências cognitivas são mais especulativas, mais vagas e mais difíceis de implementar. Para complicar ainda mais, muitas deficiências cognitivas são difíceis de se diagnosticar e caracterizar devido à grande variação de características em quem as possui..

Diante da natureza problemática de definir e categorizar essas deficiências, não surpreende o fato de ainda não se ter produzido um conjunto bem definido de recomendações para o desenvolvimento web focado nessas pessoas. Isso não quer dizer que não existam recomendações: algumas já foram incorporadas às Diretrizes de Acessibilidade para Conteúdo Web (WCAG) do W3C e outras foram sugeridas em outros lugares. O problema é que a escassez de pesquisa que apoie essas recomendações coloca em dúvida sua precisão e abrangência.

O primeiro propósito desse artigo, publicado originalmente pelo WebAIM (texto em inglês), é incentivar mais pesquisas no campo do design de conteúdo para pessoas com deficiências cognitivas.

O segundo é incentivar equipes de  desenvolvimento web a considerarem esse público de forma mais dedicada. Existem muito mais pessoas com deficiências cognitivas do que com todos os outros tipos de deficiência combinados (quando são incluídas deficiências de aprendizado, distúrbios de leitura, transtornos de déficit de atenção e outras condições comuns).

O terceiro propósito deste artigo é publicar e solicitar feedback sobre uma lista provisória de recomendações.

A lista de recomendações a seguir não é definitiva nem abrangente. Nem todas essas recomendações são fáceis de implementar, nem mesmo necessárias em todas as circunstâncias. Também não  são igualmente aplicáveis a todos os tipos de deficiências cognitivas. Para complicar ainda mais, algumas dessas recomendações podem parecer conflitar com outras recomendações de acessibilidade. Esses conflitos podem ser reais ou não, dependendo de como as recomendações são implementadas. 

Por fim, é possível que nem todos no campo das deficiências cognitivas concordem com a validade ou precisão dessas recomendações. Essas recomendações são baseadas em uma combinação de pesquisa existente, boas práticas frequentemente empregadas e especulações ponderadas.

Este material pode ser útil para as equipes de desenvolvimento em seu estado atual, mas a esperança é de que especialistas em pesquisa e desenvolvimento tratem essas recomendações como hipóteses a serem testadas. Por favor, coloque essas recomendações à prova! A Web Accessibility In Mind (WebAIM) está muito interessada em saber sobre qualquer pesquisa relacionada a esses tópicos.

Recomendações para tornar o conteúdo web acessível para pessoas com deficiências cognitivas

1. Crie conteúdo rico, multimodal e transformável

TRANSFORMÁVEL

  • Permita que as fontes sejam ampliadas.
    A capacidade de ampliar as fontes depende do navegador, mas é recomendado utilizar unidades relativas em vez de unidades absolutas.
  • Use texto real ou texto baseado em vetor, em vez de texto dentro de imagens, para permitir uma ampliação com qualidade, sem pixelização.
    O texto real é a melhor forma de transmitir um conteúdo textual. Quando ele é incorporado dentro de gráficos ou formatos baseados em vetor, podem ser ampliados com maior qualidade que os formatos matriciais, como JPG, GIF e BMP. 
  • Forneça todo o conteúdo em formato de texto para que ele possa ser lido em voz alta por sintetizadores de voz.
    O conteúdo pode ser em texto simples, HTML, em texto alternativo de imagens ou qualquer outro formato com texto verdadeiro que possa ser acessado por tecnologias assistivas. Em algumas circunstâncias, pode ser apropriado fornecer a versão em texto separada da rich media, como transcrições de texto para vídeos.

MULTIMODAL

  • Ilustre conceitos com desenhos, diagramas, fotos, arquivos de áudio, clipes de vídeo, animações e outras mídias não textuais.
    Comunique-se por meio de modalidades sensoriais e modos de entrada diferentes variados  (visão, audição, interação, leitura, etc.) para aumentar a chance de que o conteúdo seja compreendido.
  • Forneça legendas sincronizadas e transcrições para a parte de áudio da mídia baseada em tempo.
    Adicione legendas a arquivos de vídeo (por exemplo, usando SMIL ou SAMI) e forneça um link para uma transcrição de texto.
  • Forneça descrições de áudio de eventos visuais em mídias baseadas em tempo.
    Narre elementos visuais em vídeos para que a peça possa ser entendida por quem só conseguem ouvi-lo, mas não vê-lo.

2. Foque a atenção da pessoa usuária

FOCO SENSORIAL

  • Use cores mais suaves (como tons pastéis) para elementos gráficos, em vez de cores fortemente contrastantes. (Observação: isso não é amplamente aceito)
    Ao usar cores de fundo para diferenciar seções da mesma página, escolha cores mais suaves, em vez de cores de alto contraste.
  • Limite os tipos de fontes em um documento.
    Use apenas uma fonte, ou um número muito pequeno de fontes em um único documento.
  • Limite ou elimine o uso de itálicos ou CAIXA ALTA.
    Evite itálicos e termos com todas as letras maiúsculas na medida do possível, para melhorar a leitura.
  • Evite sons de fundo que distraiam a atenção (como  música de fundo).
    Permita que a pessoa se concentre no conteúdo principal sem distrações com sons.
  • Use sons para direcionar a atenção (como para dar instruções, alertar a pessoa sobre erros).
    Forneça pistas auditivas que ajudem a pessoa a se concentrar no conteúdo principal.
  • Inclua “espaço em branco” (sem conteúdo) entre parágrafos e entre títulos.
    Não sobrecarregue visualmente o design.
  • Evite fundos visuais complexos ou excessivamente decorados.
    Não inclua informações visuais desnecessárias que distraiam do conteúdo principal.

FOCO NO CONTEÚDO

  • Coloque as partes importantes de um parágrafo (pontos-chave) na primeira frase.
    Não esconda pontos importantes no meio dos parágrafos.
  • Organize o conteúdo em grupos ou blocos bem definidos, usando títulos, listas com marcadores e outros esquemas de organização visual e semântica.
    Torne a estrutura do documento o mais óbvia possível.
  • Destaque o texto conforme ele é lido em voz alta (ou permita que as pessoas  ativem essa opção).
    Essa recomendação é mais aplicável a rich media, como Flash e SVG, que não possuem capacidades nativas de legendagem, e onde as legendas são adicionadas por meio de programação ou script.
  • Enfatize o texto importante — ou os títulos das seções de texto — com fontes em negrito ou tamanho de texto maior.
    O estilo padrão dos cabeçalhos HTML é em negrito e grande, então não há necessidade de usar tags ou marcação extras para alcançar esse efeito em HTML.

FOCO NA INTERAÇÃO

  • Forneça pistas de navegação multimodais (por exemplo, texto + destaque gráfico/visual + instruções auditivas + demonstração animada).
    Ajude as pessoas a saberem o que fazer e como interagir com o conteúdo (por exemplo: crie uma voz audível que diga “clique no botão ‘próximo’ para ir para a próxima página”, ou um som para acompanhar mensagens de erro, ou destaque visualmente o botão “próximo” etc.).
  • Dê feedback sobre as ações da pessoa (por exemplo, confirme interações corretas, alerte sobre erros ou possíveis erros).
  • Forneça instruções para interfaces desconhecidas.

3. Projete um ambiente consistente

  • Garanta que elementos de interface semelhantes e interações semelhantes produzam resultados consistentes e previsíveis.
  • Crie um esquema de navegação consistente em todas as páginas dentro de um site ou em seções relacionadas de um site.

4. Crie conteúdo simples e conciso

  • Use uma linguagem simples e clara.
    Essa recomendação é difícil de avaliar, mas importante.
  • Evite informações secundárias.
    Mantenha-se no tópico principal.
  • Use gramática e ortografia corretas.
    Use um verificador ortográfico. Escreva bem.

5. Permita que a pessoa tenha tempo suficiente para acessar e interagir com o conteúdo

  • Não defina tempos curtos de “expiração” para o conteúdo.
    Na medida do possível, evite JavaScript dependente de tempo, atualizações automáticas de HTML e outros tipos de redirecionamentos temporizados.
  • Se os tempos de expiração forem necessários, permita que a pessoa solicite mais tempo.
    Permita a definição de preferências e/ou alerte quando o tempo estiver prestes a expirar e dê a opção de estender o prazo.

6. Permita a  recuperação de interações acidentais e equivocadas

  • Peça confirmação de escolhas.
  • Use formulários mais curtos e de vários passos para interações complexas, em vez de formulários longos e completos em um único passo.

Leia também a Parte 2 desse artigo que aborda várias considerações de design.

*Texto traduzido e adaptado por Caroline Fróes e Duda Derbli, pesquisadora e pesquisador em experiência do usuário; Íngrid Oliveira, analista de sistemas e aplicações web; Jeniffer Deus, profissional da área de qualidade de software e entusiasta de acessibilidade; e Victória Raupp Krupp, especialista em acessibilidade digital com foco em testes de software. Estas pessoas integram a Liga Voluntária do Movimento Web para Todos.

Outras novidades