Central de AjudaAcessibilidade digital
Uma visão geral da acessibilidade dos blocos nos sites Tilda e os recursos dos blocos para melhorá-la
A maioria dos blocos da Biblioteca de Blocos da Tilda já está otimizada para ser usada por pessoas com deficiências constantes, temporárias ou situacionais. Neste artigo, explicaremos quais são as possibilidades existentes e quais configurações você pode querer fazer para melhorar a acessibilidade do seu site.
Uma breve lista de verificação para melhorar a acessibilidade do site
- 1Verifique se os títulos de SEO estão definidos para os blocos de cabeçalhos
- 2Definir textos alternativos para imagens e garantir que eles revelem o conteúdo da imagem
- 3Verifique se os blocos de menu estão localizados na página de cabeçalho e se o rodapé está na página de rodapé
- 4Nas configurações de conteúdo dos blocos com formulários on-line, verifique se cada campo tem um título de campo e se a mensagem de sucesso após o envio do formulário está especificada
- 5Verifique o contraste das fontes do site e certifique-se de que não haja textos contra um plano de fundo de cor semelhante ou imagens que os tornem menos legíveis
- 6Verifique se o idioma do projeto está definido nas Configurações do site → Mais
- 7Verifique as diretrizes de acessibilidade para elementos no Zero Block
Otimização de leitores de tela
Um leitor de tela é um software que dá voz ao que é exibido na tela. Muitas vezes, os leitores de tela já estão pré-instalados e são usados por meio de configurações de acessibilidade no sistema operacional.
Os blocos do Tilda são otimizados automaticamente para funcionar com leitores de tela ou incluem as configurações necessárias para marcar o conteúdo de modo que ele seja corretamente expresso pelo leitor de tela.
Os blocos do Tilda são otimizados automaticamente para funcionar com leitores de tela ou incluem as configurações necessárias para marcar o conteúdo de modo que ele seja corretamente expresso pelo leitor de tela.
Tags de título H1-H6
Se o conteúdo do site tiver uma estrutura clara, você poderá definir as tags H1, H2 e H3 como títulos. Os títulos de diferentes níveis ajudarão o leitor de tela a interpretar melhor a estrutura da página, bem como a alternar entre o conteúdo usando o teclado.
Você pode definir as tags H1-H3 nas configurações de qualquer bloco que tenha um título em "SEO: Title Tag". Em outros blocos, por exemplo, em subtítulos de cartões, você pode definir títulos de outros níveis até H6.
Você pode definir as tags H1-H3 nas configurações de qualquer bloco que tenha um título em "SEO: Title Tag". Em outros blocos, por exemplo, em subtítulos de cartões, você pode definir títulos de outros níveis até H6.
Importante. Só pode haver uma única tag H1 em cada página. Você pode ter qualquer número de tags de outros níveis, desde que a hierarquia seja respeitada (por exemplo, nenhum título H2 dentro de H3).
Texto alternativo (Alt) para imagens
O texto alternativo para imagens pode ser lido pelo leitor de tela, portanto, vale a pena defini-lo para que as pessoas com deficiência visual possam entender do que se trata a imagem. O texto alternativo também é exibido em caso de outras limitações de acessibilidade, como conexão lenta.
Para definir o texto alternativo de uma imagem, abra a guia Content (Conteúdo) do bloco e clique nos três pontos ao lado da imagem carregada.
Para definir o texto alternativo de uma imagem, abra a guia Content (Conteúdo) do bloco e clique nos três pontos ao lado da imagem carregada.
Se a imagem for simplesmente decorativa, como um plano de fundo para algum elemento da página, talvez ela não precise de um texto alternativo, leve isso em consideração.
Para adicionar uma tag alt para imagens em blocos da categoria "Gallery" (Galeria), abra a guia Content (Conteúdo) e clique em "Text" (Texto) ao lado da imagem carregada. Em seguida, no campo "Image alt for SEO", especifique a descrição da imagem.
Veja como especificar o texto alternativo de uma imagem na guia Conteúdo de um bloco no Tilda
Para aumentar a acessibilidade, o texto alternativo deve comunicar com precisão o conteúdo da imagem e abordar os visitantes que talvez não consigam ver a imagem por um motivo ou outro.
Vejamos esta foto como exemplo:
Exemplos ruins de textos alternativos:
"Dog"
"Poodle."
Um bom exemplo de texto alternativo:
"Um filhote de poodle está sentado na grama no quintal de uma casa de tijolos"
Exemplos ruins de textos alternativos:
"Dog"
"Poodle."
Um bom exemplo de texto alternativo:
"Um filhote de poodle está sentado na grama no quintal de uma casa de tijolos"
Dicas para projetar rodapés e cabeçalhos
Os blocos no cabeçalho e no rodapé são marcados automaticamente de forma a permitir que o leitor de tela reconheça que o visitante está nesse bloco. Por exemplo, no cabeçalho, você pode pular a leitura de todos os itens de menu e ir direto para o conteúdo principal da página.
Os blocos que contêm o cabeçalho e o rodapé devem necessariamente estar em páginas separadas de cabeçalho e rodapé para que a marcação seja adequada.
Os blocos que contêm o cabeçalho e o rodapé devem necessariamente estar em páginas separadas de cabeçalho e rodapé para que a marcação seja adequada.
Para configurá-lo corretamente, assista a este tutorial em vídeo ou consulte o artigo sobre cabeçalho e rodapé na Central de Ajuda.
Dicas para o preenchimento de formulários on-line
A maioria dos campos de entrada em blocos da categoria "Formulários" é acessível ao leitor de tela. As mensagens de sucesso ou de erro são expressas pelo leitor de tela.
Além disso, certifique-se de especificar os títulos dos campos de entrada, para que fique claro para cada campo exatamente o que precisa ser digitado nele.
Além disso, certifique-se de especificar os títulos dos campos de entrada, para que fique claro para cada campo exatamente o que precisa ser digitado nele.
O processo de personalização dos campos do formulário e das mensagens pop-up sobre o preenchimento bem-sucedido do formulário é descrito em nosso tutorial em vídeo sobre a configuração de formulários on-line.
Dicas sobre contraste e tamanho da fonte
Um contraste de fonte suficiente ajuda os visitantes a perceber o texto no site com mais facilidade. Não é importante apenas seguir as diretrizes de contraste porque você pode ter visitantes com deficiência visual, mas o contraste adequado melhora a experiência do usuário em geral.
Há um padrão na Web para determinar o contraste do texto e do plano de fundo, que se baseia nas WCAG (Diretrizes de Acessibilidade ao Conteúdo da Web). De acordo com esse padrão, o contraste é definido como o número de vezes que o brilho da cor mais clara e da mais escura difere e é escrito como a proporção desse brilho: 3:1, 4.5:1, 10:1. Quanto menor o valor, menor o contraste (a taxa máxima de contraste é de 21:1).
Para tornar o site acessível a pessoas com deficiência visual, você deve aumentar o contraste das fontes. Alguns intervalos específicos de valores para elementos estão descritos abaixo.
Você pode usar a ferramenta de contraste de fundo e cor da fonte para derivar o valor do contraste e compará-lo com os valores abaixo. Para isso, basta copiar os valores de fundo e de cor dos blocos pré-projetados ou do Zero Block, adicioná-los ao serviço especificado abaixo e obter a taxa de contraste.
Há um padrão na Web para determinar o contraste do texto e do plano de fundo, que se baseia nas WCAG (Diretrizes de Acessibilidade ao Conteúdo da Web). De acordo com esse padrão, o contraste é definido como o número de vezes que o brilho da cor mais clara e da mais escura difere e é escrito como a proporção desse brilho: 3:1, 4.5:1, 10:1. Quanto menor o valor, menor o contraste (a taxa máxima de contraste é de 21:1).
Para tornar o site acessível a pessoas com deficiência visual, você deve aumentar o contraste das fontes. Alguns intervalos específicos de valores para elementos estão descritos abaixo.
Você pode usar a ferramenta de contraste de fundo e cor da fonte para derivar o valor do contraste e compará-lo com os valores abaixo. Para isso, basta copiar os valores de fundo e de cor dos blocos pré-projetados ou do Zero Block, adicioná-los ao serviço especificado abaixo e obter a taxa de contraste.
Para texto normal, o valor mínimo de contraste necessário para tornar o texto distinguível é 4,5:1. Valores de 7:1 e acima já significam que o texto tem contraste aumentado (nas categorias padrão - AAA).
Para textos maiores (como títulos), o valor mínimo de contraste é 3:1. A partir de 4,5:1, o texto é considerado aprimorado, ou seja, adequado para uso por pessoas com deficiência visual.
Para elementos não textuais (botões, controles de navegação etc.), é necessário e suficiente manter uma relação de contraste maior que 3:1.
Para textos maiores (como títulos), o valor mínimo de contraste é 3:1. A partir de 4,5:1, o texto é considerado aprimorado, ou seja, adequado para uso por pessoas com deficiência visual.
Para elementos não textuais (botões, controles de navegação etc.), é necessário e suficiente manter uma relação de contraste maior que 3:1.
Você também pode usar o serviço on-line Wave (Web Accessibility Evaluation Tools) para verificar o contraste e a acessibilidade de uma página. Ele mostra visualmente possíveis problemas com o contraste e a acessibilidade dos elementos do site. Entretanto, nem todas as recomendações fornecidas por esse serviço podem ser relevantes e corretas; em particular, nem todos os elementos podem exigir texto alternativo.
Como especificar o idioma do site
Para melhorar a acessibilidade, certifique-se de especificar o idioma do site em Site Settings → More. Isso ajudará o software de terceiros a interagir melhor com o site.
Navegação entre blocos do site usando o teclado
Para alguns tipos de limitações, é mais conveniente usar o teclado para navegar pelo conteúdo do site. Os blocos Tilda são projetados para ajudar na navegação pelo teclado, especificamente:
- Ao navegar com o teclado, há um quadro de foco colorido para entender com qual elemento está sendo interagido no momento
- Blocos com menus, submenus, formulários, blocos, players de vídeo, guias e controles deslizantes são rotulados automaticamente para que possam ser navegados usando o teclado
Dicas de acessibilidade para o Zero Block
Atualmente, o trabalho sobre a acessibilidade de todos os elementos Zero Block ainda está em andamento. Entretanto, é importante seguir as diretrizes gerais descritas abaixo.
Mantenha as camadas na ordem correta. Para os visitantes que interagem com a página usando o teclado, a ordem correta dos pontos de foco é essencial.
Ao mover-se pelos elementos usando a tecla Tab, os elementos serão selecionados na ordem em que aparecem no layout da página. Para garantir que essa ordem esteja correta, coloque os elementos na ordem correta. A navegação ocorrerá na ordem inversa da especificada nas camadas, do último elemento para o primeiro.
Ao mover-se pelos elementos usando a tecla Tab, os elementos serão selecionados na ordem em que aparecem no layout da página. Para garantir que essa ordem esteja correta, coloque os elementos na ordem correta. A navegação ocorrerá na ordem inversa da especificada nas camadas, do último elemento para o primeiro.
Não deixe elementos vazios, especialmente se eles tiverem uma função semântica, como a tag H1. Inclua links, tags de SEO e texto dentro dos elementos. Para imagens que não são decorativas, use texto alternativo (alt).
