Como posso tornar meu site do Website Builder mais acessível?
Um site acessível garante que todos os usuários, incluindo pessoas com deficiência, possam navegar, entender e interagir com seu conteúdo. Se você estiver usando o Website Builder, pode melhorar a acessibilidade ajustando elementos-chave e seguindo as melhores práticas, como adicionar texto alternativo às imagens e garantir que o design e o conteúdo do seu site estejam claramente estruturados. Você encontra uma checklist de recomendações e recursos neste artigo.
Se você tiver alguma dúvida geral sobre acessibilidade de sites, pode conferir nosso guia: FAQ sobre Website Accessibility.
Observação: Na one.com, a gente faz o possível pra fornecer as ferramentas necessárias pra garantir que você consiga criar e manter um site que siga os requisitos de acessibilidade. Mas, no fim das contas, a responsabilidade total é sua. Então, a gente recomenda fortemente que você se familiarize com as leis locais ou regionais de acessibilidade, porque pode ter exigências pra você que não estão cobertas neste artigo.
Elementos visuais
Textos alternativos para imagens, ícones e gráficos
O texto alternativo serve como uma descrição legível de uma imagem e pode funcionar como um stand-in se o visitante do site não puder vê-la. O texto alternativo pode ser captado e lido por um leitor de tela. Você pode encontrar instruções sobre onde adicionar texto alternativo a imagens ou outros elementos visuais nestes guias:
- Imagens (também se aplica a SVGs e ícones): Como faço para adicionar uma imagem ao meu site do Website Builder?
- Usando o componente de logotipo no Website Builder
- Imagens de produto (Loja virtual): Gerencie produtos na sua Loja virtual
- Galeria e controle deslizante de imagem: Como usar os componentes galeria e controle deslizante de imagem no Website Builder
- Imagens de Blogues: Começando com Blogues no Website Builder
Tu não necessidade de adicionar texto alternativo para imagens de fundo, pois estas muitas vezes servem apenas para fins decorativos. O texto alternativo só deve ser adicionado a imagens que transmitam conteúdo importante, sirvam para fins informativos ou exijam interação do visitante do site.
Para indicar que uma imagem serve como uma imagem que as ferramentas de apoio podem ignorar, você pode ir para SEO nas configurações da imagem e deslize o botão Conjunto como elemento decorativo alternar para EM.
Para garantir a conformidade total, recomendamos que você revise todas as imagens do seu site e dê a elas texto alternativo ou defina-as como elementos decorativos.
Idioma da página
Definir o idioma de cada página do seu site garante que os leitores de tela possam ler a página em voz alta corretamente. Consulte este guia para obter instruções passo a passo: Como posso definir o idioma de uma página no Website Builder?
Elementos auditivos
Legendas e transcrições para áudio e vídeo
Não é possível adicionar legendas ou gerar transcrições com a opção de vídeo auto-hospedado no Website Builder. No entanto, há duas soluções alternativas para isso:
- Em vez disso, carregue vídeos através do YouTube. Isso garantirá que os vídeos possam ser exibidos com legendas. Você pode ler mais sobre esse recurso em nosso guia: Adicionar um vídeo do YouTube ao seu site.
- Adicione transcrições separadamente como um arquivo facilmente acessível no seu site. Você pode usar o documento para isso, e pode ler mais sobre isso no nosso guia: Como posso incorporar um documento no meu site do Website Builder?
Estrutura e design
Títulos semânticos
Use a hierarquia de cabeçalhos semânticos (H1, H2, H3, parágrafo) no layout de texto do seu site. Esta hierarquia reflete uma forma de organizar o conteúdo de forma lógica e significativa através de tags em sites HTML. É usado por tecnologias assistivas, como leitores de tela, para dar sentido ao conteúdo e transmiti-lo na ordem correta para o visitante do site.
No editor do Website Builder, cada heading é marcado claramente (heading 1, heading 2, etc.) quando você usa um componente de texto. Você pode selecionar um heading no painel lateral ao adicionar um novo componente de texto ao seu site ou Editar o heading no painel de propriedades para componentes de texto existentes.
Os modelos do Website Builder incluem títulos e rótulos claros e, por padrão, seguem a lógica descrita acima.
Relação de contraste para texto
Quando se trata de texto do site, estes são os requisitos mínimos para a relação de contraste:
- Títulos: 3:1
- Parágrafos: 4.5:1
Você pode ajustar a proporção de cores do texto no Website Builder da seguinte forma:
Se a função do tema de cor estiver definida como ATIVADO:
Se você estiver usando um tema de cor no seu site, você deve editar a relação de contraste pelas configurações do tema de cor. Este guia explica como fazer isso: Usando um tema de cor no Website Builder.
Se a função do tema de cor estiver definida como OFF:
Quando a função de tema de cor estiver desativada, deve editar a relação de contraste através das definições globais:
- Ir para Configurações do modelo no canto inferior direito do editor do Website Builder.
- Clique em Editar estilos de modelo no menu que aparece.
- Agora você verá uma visão geral de todos os estilos de texto usados no seu site (texto, links, menu, botão e tabela). Clique no ícone cor do texto para acessar as configurações de cor. Você pode selecionar uma cor pelo seletor de cores ou digitar um código hexadecimal.
Observação: O Website Builder não consegue te dizer as proporções exatas do seu site, mas você pode usar ferramentas externas para analisar e pegar os valores que precisa. Por exemplo, você pode tentar essa ferramenta do WebAIM. Aqui, você pode colocar os códigos hex para o fundo e o texto, e aí ajustar a cor até chegar na relação de contraste certa e nos códigos hex que precisa. Depois, é só copiar e colar esses códigos no Website Builder.
Contraste sem texto
Os elementos coloridos no seu site que não incluam texto, como cores de fundo em secções ou cores de botões, podem ser totalmente ajustados pelas configurações do tema de cor ou pelas configurações globais do modelo, como explicado acima.
O estilo de cada elemento pode ser ajustado pelas configurações do componente. Por exemplo, se você clicar numa secção, cabeçalho ou rodapé, vai ver a opção para mudar a cor ou o estilo do item.
Navegação
Acesso pelo teclado
Recomendamos que você mantenha o conteúdo claro no seu site e evite itens complexos, como conteúdo ativado por foco ou . Este último pode ser substituído por imagens e links normais.
Vale notar que os menus suspensos são acessíveis pelo teclado.
Pausar, parar ou ocultar conteúdo
Deve ser possível controlar ou ocultar manualmente todos os elementos móveis ou interativos no seu site. Aqui estão alguns itens que você deve verificar se você os tem em seu site:
- Slider de imagem: A função de autoplay desse componente está ativada por padrão, mas você pode desativar e adicionar controles manuais. Vá até o seu componente de slider de imagem, clique em Configurações do slider de imagem e depois selecione Navegação para acessar essas configurações.
- GIFs: Evite carregar GIFs através do componente de imagem se eles não incluírem controles.
- Imagens de fundo e vídeos: Esses itens atualmente não têm uma função de reprodução/pausa, mas estamos trabalhando em uma solução para acomodar esse requisito. Enquanto isso, recomendamos evitar imagens de fundo em movimento ou fundos de vídeo em movimento.
- Vídeos: Certifique-se de que você tem controles visíveis nos vídeos e que o autoplay está desativado. Você pode ler mais sobre configurações de vídeo em nosso guia: Como faço para adicionar um vídeo ao meu site do Website Builder?
Conteúdo intermitente
Conteúdo que inclua mais de três flashes por segundo deve ser evitado. O Website Builder não contém conteúdo intermitente padrão, mas você pode carregá-lo. No entanto, recomendamos que você evite fazer isso ou, no mínimo, possibilite que o visitante controle e pule esse conteúdo manualmente.
Artigos Relacionados: