SVG Accessibility: Validate title, desc and Structure Without Breaking Optimization
Decorative vs informative icons: WCAG rules, title/desc tags and quick online validation without breaking SVG optimization.
Why SVG accessibility matters before optimization
An SVG optimized by 60% is useless if a screen reader announces “image” with no context, or if a decorative icon clutters voice navigation. WCAG distinguishes decorative SVG, which is hidden from assistive technology, from informative SVG, which needs a title or description. FastMinify's online SVG validator checks syntax, the presence of viewBox and a missing <title> / <desc>, with advisory warnings and not a full WCAG audit. Everything runs in the browser on the online SVG tools hub, before or after optimize SVG. For the SVGO preset context, see SVGO presets explained.
Concrete examples with UI icons and inline SVG
A “Delete” button with a trash SVG left of the text: the SVG gets aria-hidden="true" and no title. validate-svg will show a title/desc warning, which is expected. Accessibility relies on the button text, not on the icon.
Before optimization
- File size
- SVG with Figma-export title (~2.1 KB)
After optimization
- File size
- aria-hidden + optimize default (~0.9 KB)
A success or error badge shown only as SVG needs <title>Success</title> or an explicit aria-label on the component. validate-svg confirms the text is present. Then test with the keyboard and a screen reader.
Best practices for WCAG, optimize and design systems
Add validate-svg to your asset review, especially for icons from designers without assistive-technology testing.
The default and aggressive presets run cleanupIds, which can remove or shorten ids, so check that the id used by aria-labelledby survives (safe leaves ids alone). Aggressive also merges paths, so always compare visually. svg-to-jsx keeps markup, but 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.
When the browser tool is enough
No need to install svgo-cli or a heavy a11y linter to check a Figma export before merge.
Complement with CI and AT audits
Automated page tests (Pa11y, axe-core in CI, Lighthouse accessibility) cover the rendered DOM, beyond the SVG source file. Keep validate-svg upstream on assets, and add E2E tests with screen readers for critical flows.
Use the same SVGO preset in the browser preview and in CI. After the pipeline's optimize step, sample icons and run validate-svg manually. See SVGO presets and the SVG optimization guide.
Complementary tools
FastMinify validate-svg targets SVG source markup. Other tools cover rendered pages or broader standards.
FastMinify validate-svg
XML syntax, viewBox, title/desc: runs in the browser, no account.
Pros:
Cons:
axe DevTools / WAVE
Browser extensions for DOM accessibility audit.
Pros:
Cons:
SVGO + manual validate
Classic CLI pipeline without validate-svg.
Pros:
Cons:
Decorative and informative SVG, the basics
An icon beside visible text (“Save”, “Close”) adds no extra information: it is purely visual. Accessibility guidance recommends hiding it from screen readers with aria-hidden="true" on <svg>, or with role="presentation". In that case <title> and <desc> are unnecessary, and 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: <title> and optionally <desc> as first children of <svg>, or role="img" + aria-label / aria-labelledby on the SVG element or its React wrapper.
The tool parses XML markup, requires an <svg> root, flags a missing viewBox as a warning, and warns when neither <title> nor <desc> contains text. These are basic structural checks, not screen reader simulation, color contrast or complex ARIA validation. For a full audit, pair it with axe DevTools or WAVE.
A workflow to validate, fix and optimize
Open the validate SVG tool, paste markup or load a .svg file. Errors block delivery (invalid XML), while warnings invite you to add a viewBox or descriptive text depending on the use case.
For an informative icon, add for example <title>Error</title> right after the opening <svg>. If width and height exist without a viewBox, derive one (viewBox="0 0 24 24") or use resize-svg on the hub. The SVG beautifier helps you read the structure after edits.
Once the structure is validated, use the SVGO optimizer (safe or default preset for UI icons). FastMinify preserves <title> and <desc> on all three presets, so run validate-svg again after optimizing to confirm. The quick SVG minifier only touches whitespace and comments.
Conclusion
SVG accessibility starts with a clear decision. A decorative icon gets aria-hidden and no title, while an informative one gets a title, a desc or an aria-label. validate-svg helps secure syntax and structure before SVGO optimization, without claiming to replace a full audit. Chain validation, optimization and re-validation on the SVG hub to ship lightweight icons that everyone can use.
Validate your SVG now
Related Articles
Paste a token and a JWKS to check an RS256, ES256 or HS256 signature in your browser. How kid picks the key, measured errors and the claims to check.
HTTP/2 and HTTP/3 change how files travel, not how big they are. Measured sizes, compile times and bundling tests show what minification still saves.
Convert a Unix epoch to a readable date and back, tell seconds from milliseconds, and avoid time zone, JWT and clock change traps, all in your browser.