Criar recursos acessíveis: Tipografia

Um texto claro e legível é essencial para um sítio Web acessível. A tipografia afecta a facilidade com que os utilizadores podem ler, compreender e interagir com o seu conteúdo. Neste artigo, aprenderás a escolher tipos de letra acessíveis, a definir tamanhos e espaçamento entre linhas adequados e a estruturar o texto para facilitar a leitura. Segue estas diretrizes para garantir que a tua tipografia apoia uma experiência inclusiva para todos os visitantes.

Requisitos

• Quando utilizares linguagens de marcação que suportem determinadas propriedades de estilo de texto, o ajuste destas propriedades da seguinte forma não causará qualquer perda de conteúdo ou função:
  • Define a altura da linha (espaçamento entre linhas) para, pelo menos, 1,5 vezes o tamanho do tipo de letra;
  • Define o espaçamento após os parágrafos para, pelo menos, 2 vezes o tamanho da fonte;
  • Define o espaçamento entre letras (tracking) para, pelo menos, 0,12 vezes o tamanho do tipo de letra;
  • Define o espaçamento entre palavras para, pelo menos, 0,16 vezes o tamanho do tipo de letra.
• O texto pode ser redimensionado até 200% sem perda de conteúdo ou funcionalidade sem tecnologia de assistência.
• A página deve continuar a ser funcional.
• A página deve permitir que os utilizadores façam zoom em dispositivos móveis. O seguinte NÃO é permitido:
  <meta name="viewport" content="user-scalable=no">.
• O conteúdo pode ser apresentado sem perda de informação ou funcionalidade e sem necessidade de deslocação em duas dimensões para:
  • Conteúdo de rolagem vertical com uma largura equivalente a 320 pixels CSS;
  • Conteúdo de deslocação horizontal com uma altura equivalente a 256 píxeis CSS.
• Fornece uma alternativa de texto para conteúdo informativo gerado por CSS e considera a possibilidade de definir o texto gerado por CSS como aria-hidden="true".
• Não utilizes texto em imagens se puderes utilizar texto real, a menos que seja essencial (como um logótipo) ou que necessites de tipos de letra, tamanhos, cores ou fundos específicos.
• Se for necessário utilizar a imagem do texto, segue as diretrizes relativas à cor e ao contraste.
• O texto tem de seguir as diretrizes de cor e contraste.

Excepções

Deslocação em duas dimensões

É permitido para secções do conteúdo que necessitem de uma disposição bidimensional para facilitar a compreensão ou a utilização, por exemplo, tabelas grandes.

Espaçamento de texto para idiomas específicos

Algumas propriedades de estilo de texto podem não se aplicar a todas as línguas e scripts. Por exemplo, o espaçamento entre letras pode não se aplicar a línguas que utilizam logógrafos como o chinês. No entanto, o espaçamento entre palavras e a altura da linha continuam a ser relevantes nesses casos.

Exemplos

	FAZ: Quando utiliza o zoom geral no Chrome, a página não perde a sua funcionalidade e a disposição mantém-se útil e intacta. Além disso, a ordem dos elementos permanece a mesma.
	NÃO FAZ: Neste exemplo, a div que contém o texto é definida utilizando pixels (px), pelo que não se expande com o conteúdo. Se definires a altura da div em relação à altura do tipo de letra utilizando ’em’ ou se não definires a altura da div, evitarás que o texto transborde a div.