header-logo
Confira como usar o Wix para construir seu site e negócio.
Personalize e gerencie seu site com os recursos do Wix.
Gerencie assinaturas, planos e faturas.
Administre seu negócio e conecte-se com os membros.
Compre, conecte ou transfira um domínio para o seu site.
Expanda seu negócio e presença online.
Aumente sua visibilidade com recursos de SEO e marketing.
Acesse recursos avançados e otimize sua produtividade.
Encontre soluções, problemas conhecidos ou contate-nos.
placeholder-preview-image
Domine novas habilidades com nossos cursos e tutoriais.
Confira nossas dicas de web design, marketing e mais.
Aumente o tráfego orgânico vindo dos motores de busca.
Desenvolva um site único com a nossa plataforma full-stack.
Alcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image

CMS: práticas recomendadas de acessibilidade

13 min
Neste artigo
  • Práticas recomendadas de alt text do CMS
  • Para imagens não decorativas
  • Para imagens decorativas
  • Para imagens que funcionam como botões clicáveis
  • Para galerias conectadas a tipos de campo "Imagem"
  • Para galerias conectadas aos tipos de campo "Galeria de mídia"
  • Nomes acessíveis para botões
  • (Apenas para o Editor do Wix Studio) Anexar elementos para separar seções ao usar os botões "Ver mais"
  • (Apenas para páginas estáticas) Anexar botões "Item seguinte/anterior" a contêineres
  • Anexar o texto "contagem de itens" a um contêiner
  • Tornar elementos de entrada acessíveis
  • Tornar as barras de paginação acessíveis
  • Perguntas frequentes
Implemente as práticas recomendadas de acessibilidade no seu CMS (sistema de gerenciamento de conteúdo) para tornar seu site acessível a todos os visitantes, incluindo aqueles que usam tecnologias assistivas. Essas práticas incluem adicionar nomes acessíveis aos botões, usar textos alternativos eficazes para toda a mídia e organizar elementos em seções ou contêineres com atributos ARIA. Siga essas diretrizes para ajudar todas as pessoas a navegar e interagir mais facilmente com o seu conteúdo.

Práticas recomendadas de alt text do CMS

O alt text é essencial para fornecer contexto a imagens, vídeos e formas vetoriais. Ao escrever o alt text, descreva a mídia de forma clara e concisa, como se fosse interpretada por IA ou leitores de tela. Mantenha o alt text com menos de 125 caracteres e evite frases como "imagem de". Para obter orientações mais detalhadas sobre como escrever um alt text eficaz, consulte Acessibilidade: preparar suas imagens e galerias.

Recomendamos criar um campo de texto na sua coleção do CMS para usar como alt text para cada item de mídia. Para manter sua coleção organizada, coloque esse campo ao lado do campo de mídia que ele representa e nomeie-o claramente, como "Alt text [nome da imagem/galeria]".
Captura de tela de um campo de alt text ao lado do campo de imagem que ele representa.
Para elementos de vídeo, a propriedade de alt text é chamada de Descrição do vídeo no painel de conexão do conjunto de dados. Para imagens ou formas vetoriais, use a opção Alt text se conecta a. Para imagens de background em seções, faixas, colunas ou itens do repetidor (somente no Editor Wix), use O alt text de background se conecta a.

Imagens e mídia decorativas que não apresentam um conteúdo significativo podem ficar com o alt text em branco. Isso permite que os leitores de tela os ignorem e reduz as distrações.

Para imagens não decorativas

Ao adicionar imagens não decorativas ao seu CMS, é crucial fornecer alt text descritivo. Recomendamos adicionar um tipo de campo "Texto" separado na sua coleção do CMS que representa o alt text das imagens. Concentre-se em usar uma linguagem específica e descritiva no seu alt text. Por exemplo, em vez de escrever o alt text como "uma mulher", use "uma mulher cuidando de suas plantas". 

Quando você conectar a imagem no seu editor ao conjunto de dados, clique no campo Alt text se conecta a e selecione o campo de alt text que você criou. Isso permite que os leitores de tela descrevam a imagem e seu propósito, tornando seu site mais inclusivo. 
Captura de tela do alt text de uma imagem sendo conectado a um campo da coleção.

Para imagens decorativas

Imagens decorativas geralmente não transmitem um conteúdo significativo e não exigem alt text. Se uma imagem tiver um propósito meramente decorativo, você pode deixar o alt text desconectado do conjunto de dados. Isso ajuda os leitores de tela a pular a imagem, evitando distrações desnecessárias.

Para imagens que funcionam como botões clicáveis

Se um link de imagem se conectar a uma ação do conjunto de dados, como abrir a página dinâmica de item, seu alt text deve descrever a ação, ao invés de apenas a imagem em si. Por exemplo, se clicar em uma imagem levar os visitantes para uma página de perfil, o alt text pode ser "Leia mais sobre Willis McSmoot" 

Com expressões, você pode combinar texto estático (por exemplo: "Leia mais sobre") com valores dinâmicos de campo de coleção (por exemplo: "Willis McSmoot") para garantir que o alt text varie por imagem. Dessa forma, os visitantes podem entender o propósito da imagem ao usar tecnologias assistivas. 
Para usar expressões para criar alt text personalizado: 
  1. Conecte a imagem relevante ao conjunto de dados que se conecta à sua coleção. 
  2. Clique no dropdown Alt text se conecta a no painel Conectar imagem e selecione Expressão
alt
  1. Clique no campo Expressão e insira uma função que cria o alt text que você precisa. Por exemplo, você pode inserir a seguinte função para combinar "Leia mais sobre" com um campo "título" que contém os nomes:
1CONCAT("Leia mais sobre ",título)

Para galerias conectadas a tipos de campo "Imagem"

Para galerias que se conectam a tipos de campo "Imagem", é importante fornecer alt text para cada imagem. Crie um tipo de campo "Texto" separado na sua coleção do CMS especificamente para o alt text das imagens. Ao conectar a galeria ao seu conjunto de dados, conecte o dropdown Os alt texts se conectam a ao campo de alt text correspondente. Isso garante que os leitores de tela possam fornecer descrições das imagens dentro da galeria, melhorando a acessibilidade.
Conectar uma galeria ao campo "Galeria de mídia" é uma ótima maneira de exibir várias imagens ou vídeos sobre um item em uma página dinâmica de item. Ao fazer isso, adicione alt text para cada arquivo de mídia diretamente dentro do campo "Galeria de mídia" na sua coleção. Clique no campo "Galeria de mídia" ao lado do item relevante em sua coleção para adicionar alt text a cada arquivo de mídia. Lá, você também pode inserir o título e a descrição de cada arquivo. Isso permite que os leitores de tela transmitam o contexto para imagens e vídeos, garantindo que todo o conteúdo de mídia da sua galeria esteja acessível.

Nomes acessíveis para botões

Você pode adicionar nomes acessíveis aos botões que se conectam ao seu CMS. Os nomes acessíveis funcionam como alt text, mas são específicos dos botões. Eles ajudam os leitores de tela a descrever o que o botão faz ou para onde ele direciona. Adicionar nomes acessíveis aos botões melhora a acessibilidade do seu site e ajuda todos os visitantes a navegar no seu conteúdo com mais facilidade.

Quando você conectar um botão ao seu conjunto de dados, use o dropdown O nome acessível se conecta a para conectar o nome acessível a um campo "Texto" na sua coleção. Esse campo deve descrever a ação ou o destino do botão de forma clara e concisa.

Por exemplo, em vez de um nome genérico como "Clique aqui", use "Leia mais sobre nossos serviços" ou "Envie sua inscrição". 

Se necessário, você pode usar expressões para combinar texto estático com valores dos campos da coleção. Dessa forma, os leitores de tela fornecem descrições significativas para cada botão com base no conteúdo. Por exemplo, você pode criar um nome acessível como:
1CONCAT("Leia mais sobre ", título)

(Apenas para o Editor do Wix Studio) Anexar elementos para separar seções ao usar os botões "Ver mais"

Ao adicionar um botão "Ver mais" no Editor do Wix Studio, mantenha tudo o que está posicionado abaixo do repetidor ou galeria em uma seção separada. Se você colocar quaisquer elementos na mesma seção que o repetidor ou a galeria, e diretamente abaixo do repetidor ou galeria, os elementos se sobrepõe quando o botão "Ver mais" é clicado. Essa sobreposição pode causar confusão para os visitantes, pois afeta a visibilidade e a acessibilidade.

Para evitar esse problema, certifique-se sempre de que todos os elementos que você deseja inserir abaixo do repetidor ou galeria, incluindo o botão "Ver mais", estão anexados a uma seção separada. Dessa forma, quando os usuários clicam no botão "Ver mais", a galeria ou repetidor se expande corretamente sem qualquer sobreposição, fornecendo uma experiência mais clara e fácil de usar.
Captura de tela de elementos sendo anexados a uma seção separada de um repetidor que tem um botão
Saiba mais sobre como adicionar um botão "Ver mais":

(Apenas para páginas estáticas) Anexar botões "Item seguinte/anterior" a contêineres

Em páginas estáticas, se os visitantes puderem clicar nos botões "Item seguinte/anterior" que fazem com que os elementos conectados ao CMS alterem o conteúdo, anexe os elementos de exibição a um único contêiner. Em seguida, defina os atributos ARIA (Aplicações para a Internet Ricas em Acessibilidade) do contêiner para que os leitores de tela possam anunciar o conteúdo alterado quando os visitantes clicarem nos botões.

Você só precisa anexar os elementos que exibem o conteúdo sendo alterado. Os botões "Item seguinte/anterior" não precisam estar anexados a um contêiner.
Editor Wix
Editor do Wix Studio
  1. Vá para o seu editor.
  2. Adicione um contêiner
  3. Clique em CMS  no lado esquerdo do editor.
  4. Clique em Suas coleções.
  5. Clique e arraste os elementos que exibem conteúdo do CMS para o contêiner para anexá-los.  
Captura de tela de elementos sendo anexados a um contêiner.
  1. Ative a codificação se você ainda não o fez:
    1. Clique em Modo avançado na parte superior.
    2. Clique em Ativar modo avançado
  2. Ative as ferramentas avançadas de acessibilidade:
    1. Clique em Configurações na parte superior do seu editor. 
    2. Selecione Assistente de acessibilidade
    3. Clique em Ferramentas avançadas de acessibilidade no painel à direita.
    4. Ative a alavanca ao lado de Ativar configurações avançadas de acessibilidade no Editor
  3. Clique com o botão direito do mouse no contêiner com elementos anexados que exibem o conteúdo da coleção do CMS.
  4. Selecione Acessibilidade.
Captura de tela de um contêiner sendo clicado com o botão direito do mouse e selecionado Acessibilidade.
  1. Clique em Adicionar atributo.
  2. Clique no dropdown Atributo e selecione aria-live.
  3. Clique no dropdown Atribuir valor e selecione polite
  4. Clique em Adicionar.
  5. Publique seu site quando as alterações estiverem prontas para serem publicadas.

Anexar o texto "contagem de itens" a um contêiner

Se você exibir a contagem de itens do conjunto de dados em um elemento de texto e os visitantes puderem clicar em um elemento de entrada para alterar a contagem de itens, anexe o texto a um contêiner. Em seguida, defina os atributos ARIA (Aplicações para a Internet Ricas em Acessibilidade) do contêiner para que os leitores de tela possam anunciar a contagem de itens quando ela mudar.

Isso pode ser relevante quando os visitantes clicam em entradas que filtram conteúdo ou em entradas que coletam conteúdo. Sempre que os visitantes puderem alterar a contagem de itens exibida, anexe o texto que mostra a contagem de itens a um contêiner para que os leitores de tela possam anunciar a alteração.
Editor Wix
Editor do Wix Studio
  1. Vá para o seu editor.
  2. Adicione um contêiner
  3. Clique e arraste o elemento de texto que exibe a contagem de itens do conjunto de dados para o contêiner para anexá-lo. Se você tiver outro elemento de texto que explica o que a contagem de itens representa, anexe-o ao contêiner também (por exemplo: "Resultados"). 
  4. Ative a codificação se você ainda não o fez:
    1. Clique em Modo avançado na parte superior.
    2. Clique em Ativar modo avançado
  5. Ative as ferramentas avançadas de acessibilidade:
    1. Clique em Configurações na parte superior do seu editor. 
    2. Selecione Assistente de acessibilidade
    3. Clique em Ferramentas avançadas de acessibilidade no painel à direita.
    4. Ative a alavanca ao lado de Ativar configurações avançadas de acessibilidade no Editor
  6. Clique com o botão direito do mouse no contêiner com os elementos de texto anexados.
  7. Selecione Acessibilidade.
Captura de tela de um contêiner sendo clicado com o botão direito do mouse e selecionado Acessibilidade.
  1. Adicione o primeiro atributo: 
    1. Clique em Adicionar atributo.
    2. Clique no dropdown Atributo e selecione aria-atomic.
    3. Clique no dropdown Atribuir valor e selecione true
    4. Clique em Adicionar.
  2. Adicione o segundo atributo:
    1. Clique em Adicionar atributo.
    2. Clique no dropdown Atributo e selecione aria-live.
    3. Clique no dropdown Atribuir valor e selecione polite
    4. Clique em Adicionar.
  3. Publique seu site quando as alterações estiverem prontas para serem publicadas.

Tornar elementos de entrada acessíveis

Quando você tem elementos de entrada que estão definidos para filtrar conteúdo, os filtros são aplicados assim que um visitante faz uma seleção por padrão. Você pode alterar esse comportamento ao adicionar um botão "Aplicar filtros"

Para facilitar a acessibilidade, é melhor adicionar um botão "Aplicar filtros". Com esse botão, o conteúdo não é filtrado até que os visitantes cliquem nele. Isso cria uma experiência melhor, especialmente se os usuários quiserem definir vários filtros antes de aplicá-los todos de uma vez. 
Captura de tela de um botão
Ao exibir a contagem de itens do conjunto de dados:
Se os visitantes puderem clicar em entradas que alteram a contagem de itens, certifique-se de anexar o texto que exibe a contagem de itens a um contêiner. Veja a seção acima desta para mais informações

Tornar as barras de paginação acessíveis

Para tornar as barras de paginação mais acessíveis, adicione nomes acessíveis à barra em si e aos seus botões. Esses nomes não ficam visíveis na tela, mas são essenciais para os leitores de tela, ajudando os usuários a entender como navegar pelas páginas. Por exemplo, você pode nomear a barra de paginação "Navegação da página" e atribuir nomes claros a botões como "Página seguinte", "Página anterior" ou personalizá-los com base no seu conteúdo (por exemplo: "Próximo" ou "Produto anterior").
Captura de tela dos nomes acessíveis nas configurações da barra de paginação.
Dica:
No Editor do Wix Studio, se você tiver um botão "Ver mais", certifique-se de colocar sua barra de paginação e qualquer outro item exibido abaixo do repetidor ou galeria em uma seção separada

Perguntas frequentes

Clique abaixo para ler as respostas às perguntas comuns de acessibilidade.