Inline-SVG: role img und ein title
Geben Sie einer aussagekräftigen Grafik einen Namen, den Screenreader vorlesen können.
Inline-SVG: role img und ein title ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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. ✅
Häufig gestellte Fragen
Ist die Lektion „Inline-SVG: role img und ein title“ kostenlos?
Ja — der vollständige Text von „Inline-SVG: role img und ein title“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Inline-SVG: role img und ein title“?
Geben Sie einer aussagekräftigen Grafik einen Namen, den Screenreader vorlesen können. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Inline-SVG: role img und ein title“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Inline-SVG: role img und ein title
- Dekorative Symbole mit aria-hidden ausblenden
- Symbolschaltflächen mit zugänglichem Namen
- Icon-Fonts und ihre Zugänglichkeitsprobleme