CMS: práticas recomendadas de acessibilidade

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.

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]".

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.

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. 

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.

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 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.

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:

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.

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.

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.

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. 

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").

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