Alternativas textuais

Imagens SVG precisam de nome

Regra: svg-img-alt
Gravidade: Grave
Nível WCAG A

Por que isso importa

Um <svg> marcado com role="img" é anunciado como imagem sem descrição, então um ícone em linha ou um gráfico não transmite nada.

Como corrigir

Acrescente um elemento <title> como primeiro filho do <svg>.
Ou use aria-label no próprio <svg>.
Num ícone decorativo ao lado de texto visível, remova role="img" e acrescente aria-hidden="true".

Na marcação

Falha

<svg role="img" viewBox="0 0 24 24">
  <path d="..."/>
</svg>

Passa

<svg role="img" viewBox="0 0 24 24">
  <title>Download</title>
  <path d="..."/>
</svg>

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

1.1.1 Conteúdo não textual (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre svg-img-alt (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.