SVG em linha: role img e um title
Dê um nome significativo ao elemento gráfico para leitores de tela.
SVG em linha: role img e um title é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
A Picture With No Words
An inline SVG draws shapes the eye loves, but a screen reader sees a pile of paths and says nothing useful about it. 🖼️
Meaningful or Just Pretty?
Before naming anything, ask one question: is this graphic meaningful or purely decorative? Your whole markup choice flows from that answer.
Tell the Browser It Is an Image
For a meaningful graphic, add role="img" so assistive tech treats the whole SVG as one image instead of loose shapes.
<svg role="img" viewBox="0 0 24 24">
<path d="M12 2 L22 22 H2 Z" />
</svg>Give It a Name With title
A <title> inside the SVG supplies the accessible name a screen reader will read aloud for the graphic.
<svg role="img" viewBox="0 0 24 24">
<title>Warning</title>
<path d="M12 2 L22 22 H2 Z" />
</svg>Put title First
Place <title> as the very first child of the SVG. Some screen readers only pick it up reliably when it comes before the shapes.
Connect It With aria-labelledby
For rock-solid support, give the title an id and point to it with aria-labelledby on the svg element.
<svg role="img" aria-labelledby="t1">
<title id="t1">Search</title>
<path d="..." />
</svg>aria-label as a Shortcut
Short on markup? An aria-label on the svg names it directly, no child title needed. It also overrides any inner title text.
<svg role="img" aria-label="Home">
<path d="M3 11 L12 3 L21 11" />
</svg>Name the Meaning, Not the Shapes
Write the name as the graphic's purpose, like Download, not its visual parts like a down arrow over a line.
desc Adds Longer Detail
Need more than a short name? A <desc> element holds a longer description, paired via aria-describedby for extra context.
<svg role="img" aria-labelledby="t2" aria-describedby="d2">
<title id="t2">Sales chart</title>
<desc id="d2">Revenue rose each quarter in 2025.</desc>
</svg>focusable Trips Up IE Legacy
Old browsers let SVGs grab keyboard focus. Adding focusable="false" keeps a non-interactive graphic out of the tab order.
<svg role="img" focusable="false" aria-label="Star">
<path d="..." />
</svg>Verify in the Inspector
Open your browser's accessibility panel and confirm the SVG shows as an image with the exact name you intended.
Quick Check
You want a meaningful inline SVG to be announced as a single image with a spoken name. Which combination does that?
Recap: Name the Meaningful
Meaningful SVGs get role="img" plus a title or aria-label naming their purpose. Inspect to confirm, and your graphics finally speak. ✅
Perguntas Frequentes
A aula “SVG em linha: role img e um title” é grátis?
Sim — o texto completo de “SVG em linha: role img e um title” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “SVG em linha: role img e um title”?
Dê um nome significativo ao elemento gráfico para leitores de tela. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “SVG em linha: role img e um title”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- SVG em linha: role img e um title
- Ocultando ícones decorativos com aria-hidden
- Botões de ícone que ainda têm um nome
- Fontes de ícones e suas armadilhas de acessibilidade