Acessibilidade, SEO e SVG

By | 23 de fevereiro de 2016

Com o objetivo de ampliar a pesquisa anterior, que resultou um estudo sobre o uso dos atributos ALT e TITLE e SEO, decidi fazer o mesmo experimento com alguns atributos para acessibilidade em SVG embutido dentro do HTML.

Publiquei as imagens abaixo desenhadas no inkscape sem nenhum atributo textual as descrevendo (apenas o elemento text do svg contendo um texto). Vou aguardar a indexação por ferramentas de busca e depois vou inserir atributos que descrevem as imagens e verificar como as ferramentas de busca indexam esse tipo de conteúdo e como tecnologia assistiva trata cada um deles.

Primeira imagem sem descrição alternativa
Estrela azul no elemento TITLEImagem de uma estrela azul sobre um círculo vermelho no elemento DESC This is a star

Segunda imagem sem descrição alternativa
Blue Moon

O único conteúdo textual de cada SVG é apenas o que está dentro do elemento <text> e é exibido na imagem pelo navegador.

Atualização de 03 de março de 2016

A página foi indexada, e como esperado, as ferramentas de busca indexaram apenas o conteúdo dentro do elemento <text> dentro do SVG.

Imagem apresentando o resultado da busca na página. O resultado mostra que os elementos textuais foram indexados pelo Google.

O segundo passo foi acrescentar as imagens elementos e atributos textuais. São eles:
Elemento <TITLE>
Elemento <DESC>
Atributo "ARIA-LABEL"

Para deixar o teste mais elaborado, fiz a relação dos elementos <TITLE> e <DESC> com atributos de ARIA aria-labelledby e aria-describedby respectivamente. Segundo o W3C, eles tem uma sutil diferença, mas para o experimento decidi manter os dois atributos:

aria-labelledby (property): Identifies the element (or elements) that labels the current element.
aria-describedby (property): Identifies the element (or elements) that describes the object.

The aria-labelledby attribute is similar to aria-describedby in that both reference other elements to calculate a text alternative, but a label should be concise, where a description is intended to provide more verbose information.

Com relação ao ARIA-LABEL, foi necessário adicionar um role="img" ao elemento do vetor. Decidi não colocar os atributos ária no elemento <SVG> para que ele não trate todo o conteúdo, especialmente texto, como imagem.

No primeiro teste com leitores de tela, o resultado para acessibilidade foi o seguinte:

<title> <desc> <text> "aria-label"
Safari 9 / VoiceOver 7 / MacOS X Sim Sim Sim Sim
Firefox 44 / VoiceOver 7 / MacOS X Sim Sim
Chrome 48 / VoiceOver 7 MacOS X Sim Sim Sim
IE11/ JAWS 17 / Windows 7 Sim Sim Sim Sim
Firefox 44 / JAWS 17 / Windows 7 Sim Sim
Chrome 48 / JAWS 17 / Windows 7 Sim Sim
IE11 / NVDA 2016 / Windows 7 Sim Sim
Firefox 44 / NVDA 2016 / Windows 7 Sim Sim
Chrome 48 / NVDA 2016 / Windows 7 Sim Sim Sim

Caso alguém tenha interesse em fazer testes com outras combinações de browsers e leitores de tela, o código somente das imagens está disponível neste link.

O próximo passo é aguardar a indexação desses novos elementos da primeira imagem e fazer testes da indexação desse conteúdo por ferramentas de busca.

Atualização de 15 de abril de 2016

Fiz uma pequena atualização no atributo ARIA-LABEL que impactou a compatibilidade com os leitores de tela. Como existia um atributo ROLE=IMG em um elemento que agrupava o desenho e texto, o leitor de tela não lia adequadamente o elemento <text>. Com essa mudança os leitores de tela conseguem ler esse elemento como um texto.

As alterações da página foram indexadas. Fiz uma busca com quatro buscadores (Bing, DuckDuckGo, Google e Yahoo) para verificar como se comportavam. Abaixo está o resultado:

  • Os quatro buscadores indexaram o conteúdo dos elementos <text> e <desc>
  • Nenhum dos quatro buscadores indexou o conteúdo do elemento <title> e do atributo ARIA-LABEL

O resultado das imagens abaixo mostra a busca na página pelo termo “estrela azul”, que aparece tanto no elemento <desc> quanto no elemento <text>:

Imagem do resultado da busca no DuckDuckGo pelo termo "estrela azul". O resultado traz o conteúdo dos elementos DESC e TEXT

Imagem do resultado da busca no Bing pelo termo "estrela azul". O resultado traz o conteúdo dos elementos DESC e TEXT

Imagem do resultado da busca no Yahoo pelo termo "estrela azul". O resultado traz o conteúdo dos elementos DESC e TEXT

O resultado no Bing, DuckDuckGo e Yahoo mostra que os buscadores indexam o conteúdo dos elementos <text> e <desc>. Com relação ao Google, ele faz a indexação mas não consegui buscar pelo termo que estava dentro do elemento DESC, apesar de estar indexado. A busca no Google foi feita com o termo “This is a star”

Imagem do resultado da busca no Google pelo termo "estrela azul". O resultado traz o conteúdo dos elementos DESC e TEXT

Conclusão

  • Existem diversos recursos para tornar SVG acessível. Infelizmente nem toda tecnologia assistiva dá suporte a todos esses recursos
  • Alguns recursos utilizados para descrever imagens dentro do SVG , como os elementos <text> e <desc>, são indexados por ferramentas de busca.
  • Diferente do experimento com o atributo ALT, os quatro buscadores pesquisados indexaram o conteúdo dos elementos <text> e <desc>
  • Nenhum dos quatro buscadores indexou o conteúdo do elemento <title> e do atributo ARIA-LABEL

Dessa forma, é uma boa utilizar dos elementos <text> e <desc> dentro do SVG. Vale lembrar que o elemento <text> por padrão é visível no browser, enquanto o elemento <desc> permanece invisível. Isso é bom para acessibilidade e bom para indexação de conteúdo em mais de uma ferramenta de busca.