Aprenda a fazer um site acessível desde o começo - Parte 2

Arte com ilustração de um monitor de computador, um smartphone, tablet mostrando a mesma imagem em suas respectivas telas.

A acessibilidade dos sites pode ser, sim, uma realidade. Para isso acontecer, acreditamos cada vez mais na conscientização da sociedade e na capacitação de profissionais da área. Em abril, nós começamos a nossa série de textos “Aprenda a fazer um site acessível desde o começo” com a parte 1 com os passos sobre Planejamento e Conteúdo (passos 1 e 2, respectivamente).

Hoje você vai aprender um pouco mais sobre design acessível, que é o passo 3 (Design), momento importante que vem após a construção do conteúdo do site. Em junho, vamos publicar a parte 3 da série com o passo 4 sobre programação acessível.

Acompanhe o material produzido por Reinaldo Ferraz, especialista em desenvolvimento web do W3C Brasil, e Odilon Gonçalves, líder de design do Movimento Web para Todos.

Passos 1 e 2: planejamento e conteúdo (relembrando)

Passo 3: design

Na primeira parte deste breve passo a passo, pudemos entender como o planejamento é fundamental para projetar um site acessível. Mas esse planejamento não se limita ao conteúdo. Planejar a acessibilidade do design de uma interface é importante para evitar correções desnecessárias quando a interface estiver pronta.

Ainda na fase de concepção de design, planejando wireframes e elementos interativos, é possível prever barreiras de acesso que podem trazer problemas para pessoas com deficiência. As barreiras de acessibilidade encontradas e eliminadas nesta fase do projeto tornam o desenvolvimento e a manutenção da acessibilidade mais fácil.

Planeje considerando zoom de 200%

Você definiu todas as áreas da sua aplicação, os blocos de texto, tamanho de fontes e elementos de cabeçalho. Agora considere que nem todos os usuários conseguem enxergar letras no tamanho padrão, seja devido ao tamanho da resolução ou por alguma deficiência visual. Esse usuário possivelmente vai utilizar recursos como “CTRL/OPTION +” e “CTRL/OPTION -” para ler a sua página.

A recomendação do zoom de 200% serve para que a página se comporte adequadamente quando o usuário necessitar aumentar o tamanho da tela.

O comportamento esperado é que os elementos não se sobreponham, o que dificultaria a leitura. A utilização de técnicas de design responsivo costumam solucionar bem essa barreira.

Contraste de cor acessível

Ao definir a paleta de cores da sua página ou aplicação, considere fazer testes relacionados à cor do texto versus cor de fundo da página. Isso beneficia pessoas que têm algum tipo de daltonismo, quando uma pessoa não enxerga certos tipos de cores. Algumas combinações, como fundo preto e texto em vermelho ou fundo verde e texto azul, podem ser invisíveis para quem não enxerga uma dessas cores.

Além disso, é necessário considerar que o tamanho de fonte vai ter relação direta com a cor do texto. Textos pequenos em cinza podem ser difíceis para ler. Para saber se sua combinação de cores e tamanho de texto estão de acordo com as recomendações, utilize ferramentas que medem esse contraste, como o Accessible Colors, Color Contrast Checker ou Colour Contrast Analyser.

Elementos interativos

Com a enorme variedade de resoluções e tamanhos de tela, é comum nos depararmos com botões ou elementos interativos difíceis de serem acionados em determinadas situações. Essa questão é mais delicada ainda em smartphones, já que não utilizamos um mouse (que tem uma área de toque pequena). O nosso dedo costuma fazer acionamentos acidentais quando esses elementos são muito pequenos.

Uma simples recomendação nesse caso é utilizar, no mínimo, a medida de 22 pixels de altura em aplicações exibidas no desktop e 44 pixels para o mobile.

A identificação de elementos interativos também é importante. Por padrão do HTML, elementos de âncora (hiperlink) são marcados como sublinhado e sua cor muda para azul. Quando acionados ou já visitados, as suas cores mudam. Todo esse comportamento pode ser alterado, mas leve em consideração como o usuário vai identificar os elementos interativos.

Tamanho do texto

Este item acaba por complementar o anterior, já que o tamanho do texto tem uma relação direta com a clareza com que o usuário consegue ler determinado conteúdo.

Um tamanho “mínimo” considerável pode ser algo entre 14px, desde as questões relacionadas ao contraste sejam respeitadas. Quando coloco a palavra mínimo entre aspas, quero dar ênfase de que isso não é uma regra, mas uma recomendação. Da mesma forma que o usuário pode aumentar o tamanho de fontes, ele também pode diminuir pelo próprio navegador, caso ache necessário.

Design responsivo sempre!

Pode parecer exagero lembrar isso, mas o design responsivo tem uma relação direta com a acessibilidade. Permitir que a aplicação se adapte à tela do usuário é algo importante, bem como evitar bloqueio de orientação (vertical e horizontal) e zoom.

Atualmente nem cogitamos desenvolver aplicações que não vão se adaptar à tela do usuário, mas a forma como o conteúdo vai ser exibido, o tamanho das fontes, botões e contraste de cor trabalham em conjunto para garantir que o design responsivo também seja acessível.

Primeiro, relembre as dicas que inserimos na parte do planejamento.

Em seguida, siga os critérios de:

Atenção para o zoom: o ideal é que um site funcione bem, tenha boa visualização com 200% de zoom.
Contraste de cor: utilize um software ou um site que faça a medição das cores.
Tamanho mínimo de elementos interativos: 22px no desktop e 44px no mobile.
Tratamento de links: ao menos duas características gráficas que diferencie o link dos outros elementos.
Tipografia: texto com, pelo menos, 14px de tamanho.
Design responsivo sempre!

Há outros itens para aplicar também. Quer aprender mais sobre a parte de design acessível? Então leia os seguintes materiais:

Com informações: equipe e site do Movimento Web para Todos; W3C Brasil; Reinaldo Ferraz, especialista em desenvolvimento web do W3C Brasil; Como tornar um conteúdo acessível; e os sites que inserimos ao longo da matéria.