skills.rest
mgifford
mgiffordCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

svg

Apply titles, descriptions, and ARIA roles to SVG graphics.

39|2|Updated Mar 28, 2026
Search Tags:#accessibility#a11y#svg#aria#title#viewbox#desc
One-click install
npx skills add https://github.com/mgifford/accessibility-skills --skill svg-mgifford
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg
Source: https://github.com/mgifford/accessibility-skills/tree/main/skills/svg
Command: npx skills add https://github.com/mgifford/accessibility-skills --skill svg-mgifford

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SVG graphics in modern web projects often lack accessible naming, leaving screen reader users without essential context. This skill outlines how to ensure meaningful SVGs include titles, descriptions, and proper ARIA roles, and when to treat SVGs as decorative.

Core Features & Use Cases

  • Enforce inclusion of <title> and <desc> for meaningful SVGs and use role="img" with aria-labelledby for accessible naming.
  • Distinguish decorative SVGs with aria-hidden="true" and focusable="false" to prevent AT noise.
  • Applicable to inline SVGs, external files, icons, illustrations, and data visualizations across web projects.

Quick Start

Apply this skill to ensure all SVGs in your project include accessible titles and ARIA roles.

Frequently Asked Questions about svg

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make inline SVG graphics accessible for screen readers?▼

Make inline SVG graphics accessible by adding <title> and <desc> elements for meaningful context, applying role="img", and using aria-labelledby to target those elements for screen readers.

When should I use aria-hidden on SVG icons?▼

Use aria-hidden="true" and focusable="false" on SVG icons when they are purely decorative, preventing assistive technologies from announcing unnecessary visual noise to screen reader users.

Do SVG data visualizations need ARIA roles and descriptions?▼

SVG data visualizations require ARIA roles like role="img" alongside <title> and <desc> elements to ensure screen reader users receive essential data context and accessible naming.

What is the best way to provide accessible names for external SVG files?▼

Provide accessible names for external SVG files by embedding <title> and <desc> elements inside the SVG markup and referencing them with aria-labelledby to ensure proper accessibility.

How does preserving the viewBox affect SVG accessibility?▼

Preserving the viewBox ensures SVG graphics scale correctly without distorting visual context, which maintains the structural integrity necessary for meaningful accessible descriptions and screen reader interpretation.

Can I apply ARIA attributes to decorative SVG illustrations?▼

Decorative SVG illustrations should have aria-hidden="true" and focusable="false" applied to hide them from assistive technologies, ensuring screen readers skip non-essential visual content entirely.

Related Skills

Explore More Software Engineering Skills→
dz07dz07

SVG

Identifies and fixes common SVG pitfalls in design-system workflows.

Community
Intermediate
bipinksbipinks
3

accessibility-patterns

Apply WCAG 2.1 AA/AAA patterns to improve UI accessibility.

Community
Advanced
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
vvedantbvvedantb
99

svg-animations

Animate SVG graphics with SMIL, CSS, and path-based sequences.

Community
Advanced