Um texto alt de imagens de produtos útil indica ao cliente o que uma imagem específica acrescenta: o aspeto de um produto, um detalhe mostrado noutra vista ou a finalidade de um controlo baseado numa imagem. O texto alt é uma alternativa em texto que software como um leitor de ecrã pode usar para descrever uma imagem. Comece pela finalidade da imagem na página e, depois de guardar, verifique o texto na própria loja.
Uma galeria pode parecer clara, embora todas as imagens usem o mesmo título do produto como texto alt. Nesse caso, a vista frontal, o detalhe do fecho e a variante de cor perdem no texto aquilo que as distingue. Sugerimos que a galeria de um produto seja revista como uma pequena tarefa editorial: o editor do catálogo verifica o texto e o responsável pela manutenção da loja verifica o resultado.
Porque se perdem detalhes úteis no texto alt de imagens de produtos
A descrição útil depende da função da imagem e do conteúdo envolvente. As orientações do W3C sobre imagens informativas pedem aos autores que transmitam a informação relevante nesse contexto. Repetir um título, nome de ficheiro ou expressão de pesquisa em toda a galeria pode omitir a característica que uma fotografia específica pretendia mostrar. Preencher o campo é apenas parte do trabalho.
O nome do produto é considerado suficiente. Um nome identifica o artigo, mas um grande plano pode acrescentar um detalhe do fecho ou de um bolso. Veja o que a fotografia acrescenta para além do título e da descrição próxima.
A função da imagem é ignorada. Uma fotografia também pode ser uma ligação ou um botão da galeria. As orientações do W3C sobre imagens funcionais incluem a ação ou o destino na decisão. O nome acessível, ou seja, o rótulo que a tecnologia de apoio recebe para esse controlo, tem de tornar a sua finalidade compreensível.
O valor guardado é considerado o resultado final. Trate o campo administrativo e a página apresentada como pontos de verificação separados. Uma importação, uma imagem reutilizada ou uma lógica personalizada do tema justificam a inspeção do resultado apresentado, ou seja, aquilo que a página relevante da loja realmente disponibiliza, antes de alterar todo o catálogo.
As orientações da Google para imagens também alertam contra o preenchimento das alternativas com palavras-chave. Escreva para explicar o detalhe ou a ação de que o cliente precisa; uma lista de termos de pesquisa não fornece essa explicação.
Decidir o que cada imagem acrescenta
Reveja a imagem em conjunto com o texto envolvente e qualquer ligação ou botão a que pertença. Pergunte que informação ou ação ficaria pouco clara sem ela. A árvore de decisão do W3C distingue utilizações informativas, funcionais e decorativas; uma imagem reutilizada noutro local exige uma nova decisão contextual. Uma vista que aparece mais tarde na galeria não é automaticamente decorativa só porque o título do produto já apareceu.
Considere uma loja fictícia que vende uma mala de ombro azul. Estes exemplos de texto são inventados e não são descrições verificadas num catálogo real.
| Localização | Decisão a rever |
|---|---|
| Vista frontal | Descreva o aspeto visível relevante, como uma mala azul com uma aba curva. |
| Grande plano do fecho | Descreva o detalhe visível do fecho que esta vista acrescenta. |
| Cor diferente | Faça corresponder a descrição à fotografia e à variante selecionada. |
| Controlo da galeria composto apenas por uma imagem | Torne compreensível a ação do controlo, como abrir a vista do fecho. |
| Repetição meramente decorativa | Considere uma alternativa intencionalmente vazia depois de verificar a informação e a função. |
Uma alternativa vazia corresponde a um atributo alt="" intencional. As orientações do W3C sobre imagens decorativas distinguem esta opção da omissão do atributo. Numa imagem de cartão de produto que esteja dentro de uma ligação, a existência de texto adequado nessa mesma ligação pode tornar apropriada uma alternativa vazia. Um título de produto separado e próximo não dá automaticamente um nome a uma ligação composta apenas por uma imagem.
Mantenha as informações detalhadas sobre tamanhos ou montagem disponíveis como conteúdo de página acessível. As orientações do W3C sobre imagens complexas recomendam uma explicação em texto mais completa quando uma alternativa curta não consegue transmitir a informação. Evite comprimir as instruções de um diagrama numa descrição curta e eliminar o resto.
Escrever e guardar uma amostra revista
Prepare uma amostra que possa verificar antes de aplicar o método a todo o catálogo. Usaríamos um registo com o URL da página, idioma, variante selecionada, referência da imagem, finalidade, texto proposto e resultado da verificação. Uma miniatura ou uma referência clara ao conteúdo multimédia ajuda o revisor a associar a linha à imagem correta, em vez de tentar adivinhar a partir de um nome de ficheiro.
- Registe o contributo da imagem. Escreva aquilo de que o cliente precisa nesta vista e o que o texto próximo já fornece. Indique se a imagem faz parte de uma ligação ou de um botão.
- Redija uma alternativa breve. Mantenha o detalhe visível distintivo. Confirme a cor e outros factos relevantes com a fotografia e o registo de catálogo corretos; não presuma o material, a capacidade ou uma certificação a partir do aspeto.
- Reveja as sugestões antes de as aceitar. Uma descrição gerada é um rascunho. Peça ao editor do produto que verifique o que diz e a finalidade que cumpre, incluindo a variante selecionada e o idioma.
- Verifique valores existentes sem explicação. Se o campo contiver códigos de stock ou formatação invulgar, pergunte ao responsável pela manutenção se alguma lógica personalizada da galeria depende deles. Teste as alterações numa pré-visualização autorizada ou noutra amostra reversível antes de substituir esses valores em massa.
- Guarde através do campo de conteúdo multimédia relevante. A ajuda atual da Shopify para computador indica que deve aceder a Produtos, ao produto e, depois, ao respetivo item multimédia. Escolha Adicionar texto alternativo, introduza o texto revisto e selecione Guardar texto alternativo. Este caminho abrange conteúdo multimédia de produtos; as imagens em descrições ou secções do tema podem usar outro local de edição.
- Encaminhe os problemas de implementação para o responsável pela manutenção. Se o campo ou controlo não conseguir exprimir a finalidade necessária, forneça a página, a referência da imagem e o resultado pretendido. Na nossa proposta de trabalho em sites de comércio eletrónico, esta passagem separa a decisão sobre o conteúdo da alteração ao tema e da respetiva verificação.
Verificar a loja antes de alterar o catálogo
Depois de guardar, abra a página relevante da loja e verifique a localização exata que editou. Confirme a alternativa da imagem, o nome acessível de qualquer controlo a que pertença e o que acontece quando muda de variante ou de vista da galeria. Se não conseguir fazer estas verificações, peça ao responsável pela manutenção que mostre o resultado em comparação com o seu registo antes de alargar a edição.
- Faça corresponder a imagem real. Use as ferramentas de inspeção do navegador, ou peça ao responsável pela manutenção, para ler o atributo
altda imagem processada. Compare-o com o texto preparado e com a fotografia apresentada nesse momento. - Verifique o nome e a ação do controlo. Numa ligação ou num botão, inspecione o rótulo disponibilizado à tecnologia de apoio, além da alternativa da imagem. Confirme que a ação ou o destino indicado corresponde ao que acontece quando ativa o controlo. A descrição de uma imagem, por si só, pode não definir todo o nome do controlo.
- Mude a vista e a variante. Abra o detalhe do fecho, selecione outra cor visível e volte a verificar o resultado correspondente. Se uma descrição continuar associada à imagem errada, registe essa sequência exata para o responsável pela manutenção.
- Volte a abrir a página e o idioma relevante. Verifique se a alteração guardada continua presente na localização pretendida. Registe separadamente os casos por resolver, incluindo aqueles em que um processo de importação ou tradução precisa de ser investigado.
Uma inspeção no navegador verifica a implementação; uma revisão efetuada por uma pessoa experiente na utilização de leitores de ecrã pode analisar a tarefa de compra com essa tecnologia de apoio. Mantenha claro o âmbito de cada revisão. As Verificações Fáceis do W3C alertam que as verificações preliminares não são definitivas, pelo que nem um campo preenchido nem esta amostra demonstram a acessibilidade de toda a loja. As nossas primeiras verificações de acessibilidade para o seu site abrangem tarefas mais amplas, como a utilização do teclado e os formulários.
Manter as alternativas corretas após a edição
Atribua a responsabilidade pelo texto de origem e repita a verificação relevante quando a fotografia, variante, idioma, tema ou importação mudar. Se vários sistemas fornecerem o catálogo, determine qual é responsável pelo campo. Incluiríamos esse mapeamento num processo de integração do catálogo e CRM antes de alargar edições manuais que outro processo possa substituir.
Acompanhe as localizações revistas, o texto confirmado na loja e os casos por resolver. Estes registos mostram o trabalho concluído e aquilo que ainda precisa de atenção. Não medem um efeito nas vendas. Mantenha juntos a referência da imagem, o texto atual, o editor e o fator que desencadeia a próxima revisão, para que outra pessoa possa conservar a mesma decisão.
Onde intervimos
Começaríamos pelas vistas de um produto e chegaríamos a acordo sobre o que cada uma precisa de comunicar. A passagem liga depois o texto do editor ao local onde é guardado, ao resultado na loja e a qualquer comportamento de controlos ainda por resolver. Comece o seu próprio registo com um produto cuja galeria mostre detalhes distintos e verifique a amostra antes de a aplicar mais amplamente.
