SVGs acessíveis: padrões perfeitos para usuários de leitores de tela

Embora os Scalable Vector Graphics (SVGs) tenham sido introduzidos pela primeira vez no final dos anos 90, eles viram um grande ressurgimento em popularidade na última década devido à sua extrema flexibilidade, alta fidelidade e relativa leveza em um mundo onde a largura de banda e o desempenho são mais importantes do que nunca . Os avanços em JavaScript e a introdução de consultas de mídia CSS, como @prefers-color-scheme e @prefers-reduced-motion, estenderam a funcionalidade dos SVGs muito além de seu caso de uso inicial de simplesmente exibir imagens vetoriais em um site.

À medida que a tecnologia SVG avança, nossa compreensão de como projetamos e desenvolvemos SVGs também precisa avançar. Parte desse avanço inclui considerar o impacto de tais designs e códigos em humanos reais, também conhecidos como nossos usuários finais.

Este artigo descreve doze padrões SVG distintos encontrados “na natureza” e cada descrição alternativa anunciada quando acessada por diferentes combinações de sistemas operacionais, navegadores e leitores de tela.

É claro que os exemplos a seguir não pretendem ser uma lista exaustiva de todos os padrões possíveis usados ​​na esfera digital, mas destacam alguns dos padrões SVG mais populares ou onipresentes que você pode encontrar. Continue lendo para descobrir quais padrões SVG você deve evitar e quais são os mais inclusivos!

Descrições alternativas básicas usando a tag <img>

O primeiro grupo de quatro padrões utiliza a tag <img> vinculada a um arquivo SVG. Essa é uma boa opção para imagens básicas e descomplicadas em seu site, aplicativo ou outro produto digital. Embora a desvantagem de usar esse padrão seja que você não pode controlar facilmente muitos elementos visuais ou animações como um SVG embutido, esse padrão deve renderizar imagens mais leves e rápidas em geral e permitir uma manutenção mais fácil em SVGs que você usa em vários locais.

Padrão #1: <img> + alt="[words]"

 <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Padrão #2: <img> + role="img" + alt="[words]"

 <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Padrão #3: <img> + role="img" + aria-label="[words]"

 <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Padrão #4: <img> + role="img" + aria-labelledby="[ID]"

 <p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Descrições alternativas básicas usando a tag <svg>

O segundo grupo de quatro padrões utiliza a tag <svg> com um arquivo SVG embutido. Embora adicionar o código SVG diretamente na marcação possa tornar a página um pouco mais lenta para carregar, essa pequena ineficiência será compensada por ter mais controle sobre os elementos visuais ou animações de suas imagens. Ao adicionar seu SVG diretamente ao HTML, você também tem mais opções quando se trata de fornecer informações de imagem para seus usuários de leitores de tela.

Padrão nº 5: <svg> + role="img" + <title>

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

Padrão nº 6: <svg> + role="img" + <text>

 <svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg>

Padrão #7: <svg> + role="img" + <title> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

Padrão #8: <svg> + role="img" + <title> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg>

Descrições alternativas estendidas usando a tag <svg>

O último grupo de quatro padrões utiliza a tag <svg> com um arquivo SVG embutido, muito parecido com o segundo grupo. No entanto, neste caso, estamos estendendo as descrições alternativas simples com informações adicionais devido à complexidade da imagem.

Esta seria uma boa escolha de padrão para imagens mais complicadas que precisam de mais explicações. No entanto, é importante ter em mente que existem algumas pessoas com deficiências – como distúrbios cognitivos – que podem se beneficiar de ter essas informações de imagem adicionais prontamente disponíveis na tela, em vez de enterradas no código SVG.

Dependendo do tipo e da quantidade de informações que você precisa adicionar ao seu SVG, você pode considerar uma abordagem totalmente diferente.

Padrão #9: <svg> + role="img" + <title> + <text>

 <svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg>

Padrão #10: <svg> + role="img" + <title> + <desc>

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

Padrão #11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

Padrão #12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> 

Vencedores e perdedores do padrão SVG

Ao executar vários leitores de tela em diferentes combinações de sistemas operacionais e navegadores, vemos padrões definidos surgindo na tabela de resultados finais. Existem alguns vencedores e perdedores de padrões SVG claros , além de alguns padrões em algum lugar no meio que você pode implementar desde que esteja ciente e possa aceitar suas limitações. Analisando a tabela de resultados, podemos concluir o seguinte:

Descrições alternativas básicas usando a tag <img> (Grupo 1)

Melhor em exibição

• Padrão 2 : <img> + role="img" + alt="[words]"
• Padrão 3 : <img> + role="img" + aria-label="[words]"

Cuidado

• Padrão 4 : <img> + role="img" + aria-labelledby="[ID]"

Não recomendado

• Padrão 1 : <img> + alt="[words]"

Descrições alternativas básicas usando a tag <svg> (grupo 2)

Melhor em exibição

• Padrão 5 : <svg> + role="img" + <title>
• Padrão 8 : <svg> + role="img" + <title> + aria-labelledby="[ID]"

Cuidado

• Padrão 7 : <svg> + role="img" + <title> + aria-describedby="[ID]"

Não recomendado

• Padrão 6 : <svg> + role="img" + <text>

Descrições alternativas estendidas usando a tag <svg> (grupo 3)

Melhor em exibição

• Padrão 11 : <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

Nota : Embora esse padrão não seja perfeito, pois repetiu descrições alternativas, ele não ignorou nenhum dos elementos do teste, ao contrário dos padrões “use cautela”.

Cuidado

• Padrão 9 : <svg> + role="img" + <title> + <text>
• Padrão 10 : <svg> + role="img" + <title> + <desc>
• Padrão 12 : <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

Não recomendado

• Nenhum dos padrões neste grupo falhou completamente nos testes.

Resultados do teste

Empacotando

É importante observar que parte da interpretação dos resultados dos testes de padrão SVG é entender que os criadores de cada leitor de tela têm navegadores recomendados aos quais são totalmente compatíveis. Isso não significa que você não deve ou não pode usar um leitor de tela em um navegador diferente, isso significa apenas que, se o fizer, os resultados podem não ser tão precisos quanto se você usasse o(s) recomendado(s).

O teste de padrão para este artigo incluiu algumas combinações de navegadores e leitores de tela que podem se enquadrar na categoria “franja”, mas também há notas sobre quais combinações de sistemas operacionais, navegadores e leitores de tela são recomendadas para seu próprio teste. Os resultados desses testes devem ajudá-lo a tomar a melhor decisão possível sobre o padrão SVG, com base nas suas necessidades e restrições de padrão.

Um lembrete de que, antes de se decidir por um padrão, certifique-se de conhecer os fundamentos de como e quando criar imagens acessíveis e de compreender completamente as informações alternativas necessárias para os diferentes tipos de imagem.

Se você precisar de ajuda adicional para decidir qual padrão usar para seu ambiente, confira o artigo Bom, melhor, melhor: desvendando o mundo complexo dos padrões acessíveis para ajudá-lo a navegar nas águas complicadas dos padrões acessíveis. Armado com todas essas informações e apenas um pouco de esforço, seus SVGs estão a caminho de serem mais inclusivos para todos.

Nota do editor : Você pode aprender as melhores práticas de acessibilidade com Carie em seu próximo workshop online sobre padrões de front-end acessíveis — com diretrizes, ferramentas de teste, tecnologia assistiva e padrões de design inclusivos. Online e ao vivo.