Tornar a sua página acessível

Uma página acessível pode ser usada por todos: por quem usa um leitor de ecrã, por quem vê mal, por quem evita movimento no ecrã ou simplesmente por quem olha para o telemóvel ao sol. O LinkHarbor trata de muita coisa automaticamente; algumas dependem de si. Este artigo mostra a que deve estar atento.

#O que o LinkHarbor faz automaticamente

• Se um visitante tiver ativado «Reduzir movimento» no sistema, os vídeos de fundo não são reproduzidos e os efeitos de deslocamento e parallax, bem como as animações ao passar o cursor, ficam desligados
• O bloco «Título» é apresentado como um título verdadeiro, que os leitores de ecrã usam para se orientar
• As imagens dos blocos «Imagem» e «Galeria» recebem o seu texto alternativo como descrição
• Se não tiver escolhido uma cor de texto própria para os botões, o LinkHarbor escolhe uma que combine com a cor do botão

#Textos alternativos para imagens

Um texto alternativo descreve o que se vê numa imagem. Os leitores de ecrã leem-no em voz alta e ele aparece quando uma imagem não carrega.

Bloco «Imagem»

O campo «Texto alternativo» no editor do bloco.

Bloco «Galeria»

Um «Texto alternativo» de até 200 caracteres por imagem.

• Descreva o conteúdo, não o ficheiro: «Cappuccino com latte art numa mesa de madeira» em vez de «IMG_2041»
• Nas imagens com texto, o texto pertence ao texto alternativo
• Seja breve – normalmente basta uma frase

Onde encontrar os campos está explicado em Os blocos gratuitos em pormenor e Blocos de conteúdo.

#Estrutura com títulos

Divida as páginas mais longas com o bloco «Título» em vez de texto grande. Os utilizadores de leitores de ecrã saltam de título em título e encontram assim depressa o que procuram – como «Horário de funcionamento» ou «Contacto».

#Títulos de links claros

• Cada link deve fazer sentido sozinho: «Menu em PDF» em vez de «Clique aqui»
• Evite títulos iguais para destinos diferentes
• Os emojis no início de um título são lidos em voz alta; use-os com moderação

Mais sobre links em Adicionar e formatar links.

#Contraste e legibilidade

• Garanta contraste suficiente entre o texto e o fundo, sobretudo com cores pastel claras
• Se o texto estiver sobre uma imagem ou um vídeo de fundo, use a «Opacidade da sobreposição» no tema para que continue legível
• Nenhum texto importante apenas numa imagem – os visitantes com leitor de ecrã não o conseguem ler
• Escolha um tipo de letra fácil de ler e um tamanho de letra que não seja demasiado pequeno nos blocos de texto

As cores, o fundo e o tipo de letra são definidos no tema, veja Design.

#Usar CSS personalizado com cuidado

Com CSS personalizado pode alterar quase tudo – incluindo coisas importantes para a acessibilidade. Não oculte os contornos de foco, não reduza demasiado o texto e, depois de fazer alterações, teste a página também com o teclado. Veja CSS personalizado.

#Testar por si

1. Ative o leitor de ecrã no telemóvel (VoiceOver no iPhone, TalkBack no Android) e ouça a sua página
2. Aumente o tamanho do texto nas definições do sistema e verifique se tudo continua legível
3. Veja a página com muita luz e no modo escuro