Selecionar a Fonte Certa e sua Apresentação: Uma Chave para os Sites Acessíveis da ADA

A web é um local de alojamento público onde todos têm o mesmo direito de participar, aceder, apresentar e recuperar informações, apesar de qualquer deficiência. A Lei dos Americanos com Deficiência (ADA) foi aprovada para garantir a igualdade de oportunidades para os indivíduos com deficiência. Enquanto a internet ainda estava em sua infância na época, a realidade agora é que ela se aplica a todos os lugares virtuais, incluindo serviços digitais e conteúdo online.

Para cumprir suas obrigações legais e morais, todas as organizações e empresas são obrigadas a tornar seus sites e canais online acessíveis às pessoas com deficiência. Um dos principais pilares da concepção de um website acessível reside na legibilidade e legibilidade do seu conteúdo de texto. Isto só é possível utilizando fontes acessíveis.

Organizámos este guia para ajudar os nossos leitores a responder a perguntas como O que são fontes acessíveis e qual é a melhor fonte a utilizar para um website? Continue lendo para saber os detalhes das fontes aprovadas pela ADA e suas características. Também vamos cobrir algumas das características necessárias para tornar um website acessível a pessoas com deficiências visuais, dislexia e distúrbios de leitura.

Uma visão geral das famílias de fontes

Fontes e diferentes famílias de fontes ocupam um lugar importante na tipografia digital. Uma família de fontes é composta por um conjunto de diferentes fontes que compartilham características e atributos semelhantes relativos aos estilos de desenho. Entender suas propriedades pode ajudar os web designers a escolher as fontes mais acessíveis para seus sites. Embora existam muitas famílias de fontes, aqui estamos listando quatro delas, que também podem ser configuradas por um usuário em um navegador web:

• Serif: As fontes Serif têm decorações ou adornos no final de um traço em uma letra ou símbolo.
• Sans-Serif: Sans é a palavra francesa para “sem”. As fontes Sans-serif são mais simples e não têm as linhas ou recursos estendidos no final de cada traço em uma letra ou símbolo.
• Monospace: As fontes monoespaço têm a mesma largura para cada letra ou símbolo. Elas também são chamadas de largura fixa ou fontes não proporcionais.
• Cursivo: As fontes cursivas são escritas de uma forma fluida que se assemelha a palavras manuscritas. As letras individuais podem ser unidas para dar uma impressão artística.

Unidades de medida

Existem várias unidades para definir tamanhos de fontes:

• Ems (em): Esta unidade define um tamanho de fonte em relação ao tamanho do elemento pai em uma página HTML. Por exemplo, se o elemento pai em HTML é 14 px, então 2 em faria 28 px.
• Rems (ems raiz): Ao usar unidades rem, todas as fontes são definidas em relação ao tamanho da fonte do elemento raiz em HTML. Portanto, todo o texto no HTML é especificado em relação a uma fonte base e não depende de onde o texto é colocado na hierarquia HTML das páginas web.
• Pixels (px): Esta é uma unidade de medida absoluta e não se baseia na medida em relação a um elemento base.
• Pontos (pt): Os pontos também são uma métrica absoluta. WCAG usa valores CSS3, onde 1pt é 1,333 px. Portanto, 14pt e 18pt traduzem para 18,5px e 24px respectivamente.

O que torna uma fonte inacessível?

Fontes inacessíveis excluídas da lista de fontes compatíveis com ADA são as que:

• Dificultar a leitura do texto
• Dificultar a distinção entre as formas das diferentes letras e caracteres
• Diminuir a velocidade de leitura do usuário
• Disponibilizar letras ou caracteres sobrepostos, o que dificulta a distinção entre uma letra e outra.

Se uma letra é decorativa com ornamentos, torna-se difícil de ler. Todas as fontes com decorações no final de um traço podem ser mais difíceis de ler para alguns usuários. As fontes de estilo cursivo ou manuscrito também tornam o texto inacessível, e por isso não são as melhores fontes para usar num website.

O que são fontes acessíveis?

Ao desenhar um website, um dos aspectos mais importantes é a selecção da fonte certa e a sua apresentação. A grande maioria dos websites requer muito conteúdo textual, que deve ser perceptível e visualizável. A chave para um website acessível é, portanto, a legibilidade do texto dentro dele, que é expresso usando diferentes estilos de fonte e cores.

Quais as fontes padrão são acessíveis?

Felizmente, a opinião dos especialistas difere sobre a fonte mais legível para a web, e qual tipo de letra deve ser usado, já que diferentes usuários têm diferentes conjuntos de requisitos. Por exemplo, um público com baixa visão teria uma maior necessidade de um texto maior. Pessoas com baixa visão de campo mas com maior clareza de visão precisariam de mais caracteres para caber em seu campo de visão, mantendo o tamanho do texto pequeno. As pessoas com dislexia ou distúrbios de leitura também têm as suas próprias necessidades.

É melhor que os web designers ofereçam flexibilidade para que os utilizadores possam escolher as suas próprias fontes. Se uma página web usa a fonte padrão do navegador web, então o leitor não terá que mudar para uma fonte diferente toda vez que a página web for carregada.

Embora não haja um requisito fixo de tamanho de fonte ADA, as fontes acessíveis compatíveis com ADA são claras, limpas e distinguíveis, ao contrário dos estilos cursivo ou de escrita à mão. É geralmente aceite que as fontes sans-serif são mais fáceis de ler e mais acessíveis do que as suas equivalentes serif. A lista de fontes compatíveis com ADA inclui, mas não está limitada a Arial, Calibri, Century Gothic, Helvetica, Tahoma, e Verdana.

A importância das fontes acessíveis

A maior parte da informação na web é transmitida e divulgada através de conteúdo textual. Um método de apresentação de texto é através de imagens de texto .png ou .bmp. No entanto, esta não é uma opção viável por muitas razões. Por exemplo, quando as imagens são escalonadas, a sua legibilidade deteriora-se. Além disso, o texto dentro das imagens não pode ser lido em voz alta por leitores de tela. Assim, todo o texto de um site deve ser composto por fontes acessíveis, que são legíveis e visualizáveis.

Desenhar um site acessível usando fontes acessíveis agora não é mais apenas uma recomendação ou um recurso opcional. É obrigatório; se um website violar os princípios de acessibilidade, sua empresa ou negócio anfitrião corre o risco de enfrentar pesadas penalidades, multas ou processos judiciais. Essa multa pode chegar a $75.000 pela primeira violação e mais pela não conformidade subsequente.

Há uma estimativa de 32,2 milhões de adultos com deficiências visuais, de acordo com os dados da Pesquisa Nacional de Saúde (National Health Interview Survey – NHIS). Isso inclui não apenas pessoas cegas, mas também pessoas com visão subnormal, apesar de usarem óculos. O CDC prevê que esse número está crescendo rapidamente devido a deficiências visuais relacionadas à idade ou a doenças.

Ao projetar websites, empresas e negócios que atendam a essa grande minoria da população, naturalmente desfrutarão de um público mais amplo. É um fato conhecido que se o texto for mais difícil de ler em um website, ele terá um número menor de leitores e um número limitado de visitas às páginas. Portanto, adicionar fontes aprovadas pela ADA a um website é um aspecto essencial para gerir um negócio de sucesso.

Fontes especializadas

A British Dyslexia Association (BDA) aponta os seguintes aspectos importantes a ter em mente ao desenhar websites e seleccionar fontes acessíveis para indivíduos com dislexia:

• A fonte seleccionada deve ser desenhada de modo a que os utilizadores façam facilmente a diferença entre várias letras e números. Por exemplo, l (L pequeno), 1, e I (i maiúsculo), podem parecer todos iguais.
• As letras b e d, e p e q, são imagens espelhadas umas das outras. Os indivíduos disléxicos podem achar difícil distinguir entre elas. As letras devem ser renderizadas para que não sejam mais imagens espelhadas.
• A maioria dos indivíduos pesquisados pelo BDA preferiu um “g” arredondado e um “a” arredondado. No entanto, arredondar estas letras não deve resultar em confundi-las com um “o”.
• Espaçamento livre deve ser suficiente para distinguir entre vários caracteres, por exemplo, “rn” juntos pode ser confundido com a letra “m”, assim “aprender” pode ser confundido com “leam”.

Fontes especializadas foram concebidas para pessoas com dislexia, por exemplo, Dyslexie e OpenDyslexic. Ambas as fontes estão disponíveis gratuitamente e podem ser baixadas sem custo. Elas estão entre as melhores fontes para usar em um website quando se trata de pessoas disléxicas. Da mesma forma, a fonte Fs Me é para pessoas com dificuldades de aprendizagem e é apoiada pela organização britânica Mencap.

Conformidade com as diretrizes de acessibilidade de conteúdo web

As diretrizes de acessibilidade de conteúdo web (WCAG) foram desenvolvidas e publicadas pelo World Wide Web Consortium (W3C). Estas recomendações formam o padrão amplamente aceito para o design de sites acessíveis e conteúdo online. Nos Estados Unidos, a regra final da Secção 508 exige directamente que as WCAG sejam seguidas com pelo menos o nível de conformidade AA. Para processos relacionados com a ADA, o Departamento de Justiça e os tribunais dos EUA têm frequentemente consultado estas directrizes para avaliar a acessibilidade de websites públicos.

WCAG tem orientações claras sobre fontes acessíveis para utilizadores com deficiência visual, incluindo atributos e características de design como cor, contraste, tamanho e proporções de texto. Há também recomendações para o layout e estrutura do conteúdo textual que torna uma página web mais legível e acessível. É essencial incorporar esses recursos em um site para acomodar usuários com baixa visão, dislexia, distúrbios de leitura ou outras deficiências cognitivas.

Este guia discute as várias recomendações do W3C escolhendo as melhores fontes para acessibilidade, mantendo as fontes compatíveis com ADA, e suas importantes características.

Tamanho da fonte e proporções: deixe o usuário controlá-las

Quando se escreve um texto, a forma varia, e isso também depende da linguagem. Algumas formas do alfabeto são complexas enquanto outras são mais simples e fáceis de ler, mesmo em tamanhos menores. Esta é a principal razão pela qual o tamanho mínimo da fonte não é definido no WCAG. Os seguintes aspectos são importantes a considerar ao escolher as melhores fontes para acessibilidade e a melhor fonte para leitura na tela:

• Tamanhos e Unidades das Fontes: De acordo com as WCAG, o tamanho da fonte deve ser especificado usando ems e rems, ou seja, a diretriz favorece unidades de fonte relativas em vez de unidades absolutas. Os web designers devem evitar definir um tamanho de fonte base no elemento raiz. Em vez disso, o tamanho de fonte padrão do navegador pode ser usado, o que pode servir como um ponto de referência para definir todos os outros tamanhos de fonte. Se o usuário alterar o tamanho da fonte base, então a página inteira muda de acordo.
• Zoom feature: Os usuários devem ter controle sobre o tamanho da fonte, incluindo o zoom do texto até 200%. O texto deve permanecer legível quando ampliado, sem estar superlotado ou ter sobreposições. Esta ampliação deve ser possível sem o uso de tecnologia de assistência, por exemplo, um simples controlador como um controle deslizante pode ser adicionado ao site para aumentar ou diminuir o tamanho do texto. Este recurso deve ser acessível em todos os dispositivos, por exemplo mobile, desktop, tablet, etc.

Espaçamento de texto: faça-o em relação ao tamanho da fonte

WCAG 2.1 tem as seguintes recomendações de espaçamento de texto:

• Espaçamento de linha deve ser definido para pelo menos 1,5 vezes o tamanho da fonte.
• Espaço após um parágrafo deve ser pelo menos 2 vezes o tamanho da fonte.
• Espaçamento entre linhas deve ser de pelo menos 0,2 vezes o tamanho da fonte.
• Espaçamento entre palavras deve ser de pelo menos 0,16 vezes o tamanho da fonte.

Largura da linha: permitir o enrolamento do texto

Geralmente, a contagem de caracteres é usada como uma unidade de medida do comprimento da linha. Apesar de qualquer deficiência, é mais difícil para as pessoas lerem linhas mais longas do que linhas mais curtas, pois as quebras de linha permitem que os olhos descansem. Por fim, o comprimento da linha não deve exceder 80 caracteres.

Pessoas que têm um campo de visão menor requerem áreas de texto mais estreitas, onde podem facilmente perceber o fim de uma linha e o início da próxima. Portanto, o comprimento da linha deve ser controlável pelo usuário. Se eles ajustarem o viewport, as linhas de texto devem ser automaticamente enroladas e redirecionadas, permitindo ao usuário ler o texto sem rolagem horizontal.

Parágrafos: alinhar parágrafos à esquerda ou à direita

Todo o conteúdo da web deve ser estruturado e organizado em parágrafos curtos, e sentenças longas devem ser evitadas. Os parágrafos devem ser alinhados ou alinhados à esquerda ou à direita. Embora o texto justificado possa parecer visualmente mais apelativo, deve ser evitado, pois espaços extra dentro das linhas tornam-no inacessível. O mesmo vale para estilos de parágrafos centrados, o que pode tornar difícil para um leitor encontrar o início da próxima linha.

A sábia abordagem à cor da fonte

O uso efetivo da cor é importante para transmitir informações significativas ao usuário. Por exemplo, os campos obrigatórios nos formulários podem ser marcados por highlights coloridos, os erros podem ser mostrados em vermelho, o texto sublinhado em azul geralmente indica hiperlinks, e cinza pode ser aplicado para mostrar campos de formulários desabilitados.

Embora as cores aumentem o apelo estético de uma página web, deve-se ter cuidado para acomodar pessoas com baixa percepção de cor, que podem não ser capazes de perceber as diferenças de cor. O WCAG 2.1 afirma que as sugestões visuais alternativas devem ser usadas para distinguir várias características além de apenas cores.

O uso de cores está intimamente ligado a relações de contraste. É essencial ter um bom contraste de cor para texto legível e acessível. Os seguintes pontos são importantes ao considerar fontes acessíveis para usuários com deficiência visual:

• Contraste de cor deve permitir que o texto em primeiro plano seja distinguido do fundo. Não deve ser muito baixo ou muito duro.
• A cor do texto cinza (#777777) sobre um fundo branco é o mínimo para o nível AA WCAG. Para textos maiores, 52% de cinza (#828282) é aceitável.
• Texto invertido, que é a cor do texto em primeiro plano claro sobre um fundo escuro, deve ser evitado tanto quanto possível, pois é mais difícil de ler.

Rácio de contraste: faça tudo distinguir

As orientações WCAG 2.1 para o rácio de contraste são listadas abaixo:

1. 1. Cabeçalhos: A relação de contraste para cabeçalhos de texto e texto maior deve ser no mínimo de 3:1. Texto de 18 pontos ou texto de 14 pontos em negrito é considerado texto grande e deve satisfazer este requisito.
2. 2. Texto principal: Para texto que não seja cabeçalho, uma razão de contraste de pelo menos 4.5:1 deve ser mantida.
3. 3. Logótipo: Texto que é parte de um logotipo ou marca não tem nenhum requisito de contraste.
4. 4. Texto acidental: Texto que é parte de uma interface de usuário inativa, pura decoração, invisível, ou parte de uma imagem, e não transmite informações significativas, não tem requisito de contraste.

Existem várias formas recomendadas de manter a relação de contraste recomendada. Por exemplo, se uma letra ou símbolo de texto é mais leve na parte inferior, então pode violar a razão de contraste da letra inteira. Neste caso, um designer pode escurecer o fundo ou adicionar um contorno preto fino à letra para manter a relação de contraste necessária. A luminosidade relativa das letras do primeiro plano ou fundo também pode ser alterada para alcançar o resultado desejado. As várias ferramentas que podem ser usadas para verificar a relação de contraste estão listadas no site do WCAG

Apresentação de texto

Uma parte de incorporar fontes para usuários com deficiência visual, também é importante prestar atenção ao layout e estrutura do texto. Quando se trata da apresentação geral do texto em uma página web, os seguintes pontos-chave devem ser seguidos:

• Documentos devem ser escritos usando a mesma fonte ou o menor número possível de fontes. Uma página contendo várias fontes, mesmo que sejam compatíveis com ADA, é mais difícil de ler.
• Tipas HTML de cabeçalho, por exemplo <h1>, <h2>, etc. devem ser usadas para transmitir a estrutura e hierarquia do documento e não devem ser aplicadas apenas porque um certo tamanho de fonte foi necessário para destacar visualmente um elemento.
• Texto animizado e móvel deve ser evitado completamente.
• Conteúdo textual deve ser apresentado através de dados de texto e não com imagens ou gráficos. As fontes de texto quando ampliadas geralmente não perdem sua legibilidade e mantêm sua qualidade. Imagens de texto tendem a exibir o comportamento oposto e sua qualidade pode se deteriorar quando ampliadas.
• Caso de frase deve ser usado e pequenas maiúsculas devem ser evitadas.
• O negrito e itálico não devem ser combinados.
• Blocos de texto com itálico não são acessíveis e são mais difíceis de ler.
• Evite texto sublinhado a menos que seja um link.

Conclusão

Remover barreiras digitais e proporcionar a mesma experiência de internet para todos os indivíduos, com ou sem deficiência, deve ser a principal prioridade de todas as empresas e organizações. Para conseguir isso, o WCAG fornece recomendações valiosas para a escolha das melhores fontes para um website, que tornam o texto legível para todos os usuários, incluindo aqueles com baixa visão, dislexia ou distúrbios de leitura.

As empresas com pouca ou nenhuma experiência em ADA podem recorrer a especialistas ao projetar e criar novos websites ou remediando seus sites já existentes. Ser proativo para garantir a acessibilidade de todos os conteúdos web e serviços on-line ajudará a evitar pesadas multas e danos monetários.

É prudente adquirir ajuda de uma equipe de desenvolvedores, designers e engenheiros que tenham a experiência e o conhecimento para desenvolver sites compatíveis com ADA e 508. Como parte dos nossos serviços de acessibilidade web, oferecemos pacotes completos para o desenvolvimento de websites baseados nos padrões WCAG, remediando websites antigos e realizando auditorias regulares para garantir a acessibilidade do seu website.