SVG Accessibility: Validate title, desc and Structure Without Breaking Optimization

A "Delete" button with a trash SVG left of the text: SVG gets <code>aria-hidden="true"</code>, no title. validate-svg will show a title/desc warning — expected. Accessibility relies on button text, not the icon.

A success or error badge shown only as SVG needs <code>&lt;title&gt;Success&lt;/title&gt;</code> or an explicit <code>aria-label</code> on the component. validate-svg confirms text presence; then test keyboard and screen reader.

Add validate-svg to your asset review — especially for icons from designers without AT testing.

Aggressive preset may merge paths or strip IDs — rarely title/desc, but always compare visually. svg-to-jsx keeps markup; verify title/desc remain first children of <svg> in the React component.

FastMinify validate-svg is a structural safety net, not a substitute for a full page accessibility audit. Contrast, keyboard focus, tab order and long alternatives remain your responsibility or that of dedicated tools.

No need to install svgo-cli or a heavy a11y linter to check a Figma export before merge.

Automated page tests (Pa11y, axe-core in CI, Lighthouse accessibility) cover rendered DOM — not just the SVG source file. Keep validate-svg upstream on assets; add E2E tests with screen readers for critical flows.

Use the same SVGO preset in browser preview and CI. After pipeline optimize, sample icons and run validate-svg manually — see <a href="/en/blog/svgo-presets-optimize-svg-web" class="text-primary hover:underline">SVGO presets</a> and the <a href="/en/blog/svg-optimization-guide-web" class="text-primary hover:underline">SVG optimization guide</a>.

FastMinify validate-svg targets SVG source markup. Other tools cover rendered pages or broader standards.

An icon beside visible text ("Save", "Close") adds no extra information — it is purely visual. WCAG recommends hiding it from screen readers with <code>aria-hidden="true"</code> on <code>&lt;svg&gt;</code>, or an equivalent <code>role="presentation"</code>. In that case, <code>&lt;title&gt;</code> and <code>&lt;desc&gt;</code> are unnecessary — even counterproductive if they duplicate adjacent text.

A standalone pictogram (error status without text, inline chart, logo link without text alt) must convey meaning. Options: <code>&lt;title&gt;</code> and optionally <code>&lt;desc&gt;</code> as first children of <code>&lt;svg&gt;</code>, or <code>role="img"</code> + <code>aria-label</code> / <code>aria-labelledby</code> on the SVG element or its React wrapper.

The tool parses XML markup, requires an <code>&lt;svg&gt;</code> root, flags a missing <code>viewBox</code> (warning) and missing text in <code>&lt;title&gt;</code> or <code>&lt;desc&gt;</code> (warning). These are basic structural checks — not screen reader simulation, color contrast, or complex ARIA validation. For a full audit, pair with axe DevTools or WAVE alongside the browser validator.

Open the validate SVG tool, paste markup or load a .svg file. Errors block delivery (invalid XML); warnings invite you to add viewBox or descriptive text depending on use case.

For an informative icon, add e.g. <title>Error</title> right after opening <svg>. If width/height exist without viewBox, derive one (viewBox="0 0 24 24") or use resize-svg on the hub. The SVG beautifier helps read structure after edits.

Once structure is validated, use the SVGO optimizer (safe or default preset for UI icons). FastMinify preserves <title> and <desc> on all three presets — run validate-svg again after optimize to confirm. The quick SVG minifier only touches whitespace and comments.