Datenschutz & Speicher

Wir nutzen notwendige Browser-Speicher fuer Sprache, Login-Zustand und Editor-Ablauf. Zuletzt verwendete Schriften und Symbole speichern wir nur, wenn du Komfortspeicher erlaubst.

Kein Marketing-Tracking, keine Werbe-Cookies.

SVG & Barrierefreiheit: Zugängliche Grafiken erstellen

ARIA, title, desc und mehr für inklusive SVGs

SVG & Vektorgrafik

SVG bietet exzellente Möglichkeiten für barrierefreie Grafiken — wenn man sie richtig nutzt. Für Logos ist Accessibility besonders wichtig, da sie oft die zentrale Navigation beinhalten.

Generierte Grafik zum Artikel SVG & Barrierefreiheit: Zugängliche Grafiken erstellen

title und desc — Die Basics

<svg role="img" aria-labelledby="logo-title logo-desc">
  <title id="logo-title">LogoDesigner</title>
  <desc id="logo-desc">Kostenloses Logo-Design-Tool</desc>
  ...
</svg>

<title> ist das Äquivalent zum alt-Attribut bei Bildern. <desc> bietet eine längere Beschreibung. Beide werden von Screen-Readern vorgelesen.

ARIA-Rollen für SVGs

  • role="img" — Für informative Grafiken (Logo, Illustration)
  • role="presentation" oder aria-hidden="true" — Für dekorative Grafiken

Faustregel: Wenn die Grafik Information transportiert → role="img". Wenn sie rein dekorativ ist → ausblenden.

Farbkontraste prüfen

WCAG 2.1 fordert Mindestkontraste:

  • AA Normal Text — 4.5:1 Kontrastverhältnis
  • AA Großer Text — 3:1 Kontrastverhältnis
  • AAA — 7:1 bzw. 4.5:1

Prüfe dein Logo-SVG mit Tools wie WebAIM Contrast Checker oder der axe DevTools-Extension.

Interaktive SVGs barrierefrei machen

Wenn SVG-Elemente klickbar sind:

  • Tastatur-Fokus ermöglichen (tabindex="0")
  • role="button" oder role="link" zuweisen
  • Focus-Styles definieren (:focus-visible)
  • Key-Events (Enter/Space) behandeln

Barrierefreie SVGs sind kein Extra — sie sind eine Grundanforderung. Unser Logo Editor gibt dir die Werkzeuge, ein Logo zu erstellen, das für alle zugänglich ist.

Bereit, dein Logo zu erstellen?

Kostenloser visueller Editor mit SVG-Export.

Verwandte Artikel