Privacy & storage

We use necessary browser storage for language, login persistence and editor flow. Recently used fonts and symbols are only stored if you allow convenience storage.

No marketing tracking and no advertising cookies.

SVG & Accessibility: Creating Accessible Graphics

ARIA, title, desc and more for inclusive SVGs

SVG & Vector Graphics

SVG offers excellent capabilities for accessible graphics — when used correctly. For logos, accessibility is especially important since they often contain core navigation.

Generated graphic for article SVG & Accessibility: Creating Accessible Graphics

title and desc — The Basics

<svg role="img" aria-labelledby="logo-title logo-desc">
  <title id="logo-title">LogoDesigner</title>
  <desc id="logo-desc">Free logo design tool</desc>
  ...
</svg>

<title> is the equivalent of the alt attribute for images. <desc> provides a longer description. Both are read by screen readers.

ARIA Roles for SVGs

  • role="img" — For informative graphics (logo, illustration)
  • role="presentation" or aria-hidden="true" — For decorative graphics

Rule of thumb: If the graphic conveys information → role="img". If purely decorative → hide it.

Checking Color Contrasts

WCAG 2.1 requires minimum contrasts:

  • AA Normal Text — 4.5:1 contrast ratio
  • AA Large Text — 3:1 contrast ratio
  • AAA — 7:1 or 4.5:1

Check your logo SVG with tools like WebAIM Contrast Checker or the axe DevTools extension.

Making Interactive SVGs Accessible

When SVG elements are clickable:

  • Enable keyboard focus (tabindex="0")
  • Assign role="button" or role="link"
  • Define focus styles (:focus-visible)
  • Handle key events (Enter/Space)

Accessible SVGs aren't a bonus — they're a baseline requirement. Our logo editor gives you the tools to create a logo accessible to everyone.

Ready to create your logo?

Free visual editor with SVG export.

Related Articles