Acessibilidade: práticas recomendadas para o CMS

Implementar práticas recomendadas de acessibilidade no seu CMS (sistema de gerenciamento de conteúdo) garante que seu site possa ser usado por todos, inclusive por quem depende de tecnologias assistivas. Essas práticas incluem adicionar nomes acessíveis a elementos, usar alt text eficaz para imagens e galerias e colocar elementos em seções ou contêineres com atributos ARIA. 

Ao seguir essas diretrizes, você pode criar um site mais inclusivo que atenda a todos os usuários, fazendo com que eles possam navegar e interagir com seu conteúdo com mais facilidade.

O alt text é essencial para fornecer contexto a imagens e galerias. Ao escrever alt text, você deve se concentrar em descrever a imagem como se a IA a estivesse interpretando. Mantenha-o conciso (menos de 125 caracteres) e evite termos como "imagem de". Para obter orientações mais detalhadas sobre como escrever alt text eficaz, consulte Acessibilidade: preparar imagens e galerias.

Em geral, recomendamos criar um campo da coleção para usar como alt text para as imagens e galerias conectadas ao CMS. Para manter sua coleção organizada, você pode colocar o campo de alt text ao lado da imagem ou galeria que ele representa e nomeá-lo "Alt text (nome da imagem/galeria)". Lembre-se de que imagens decorativas não precisam necessariamente de alt text. Veja a seção sobre imagens decorativas abaixo para obter mais informaçõ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.

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.