Meaningful SVGs must have an accessible name
Rule svg-img-name · Images & non-text content · impact serious · Static + live
↩ Back to the rules index · WCAG cross-reference
Why it matters#
An SVG that conveys information (especially one with role="img") must expose a name. A nested
element or aria-label gives screen-reader users the equivalent text. An SVG named only by a <title> child but missing role="img" still has a text alternative, so it passes — though adding role="img" is recommended so every screen reader reliably exposes it as an image. A roleless, unnamed SVG inside a link/button that is already named by its other content is decorative by context and is not flagged.</p>
<h2 id="how-to-fix">How to fix<a class="heading-anchor" href="#how-to-fix" aria-hidden="true">#</a></h2>
<p>Add role="img" plus a <title> child or aria-label. If the SVG is purely decorative, add aria-hidden="true" and focusable="false".</p>
<h2 id="example">Example<a class="heading-anchor" href="#example" aria-hidden="true">#</a></h2>
<figure class="example example-bad"><figcaption>✕ Fails</figcaption><pre><code class="language-html"><svg role="img" viewBox="0 0 10 10"><path d="M0 0h10v10H0z"/></svg>
</code></pre></figure>
<figure class="example example-good"><figcaption>✓ Passes</figcaption><pre><code class="language-html"><svg role="img" viewBox="0 0 10 10"><title>Company logo</title><path d="M0 0h10v10H0z"/></svg>
</code></pre></figure>
<h2 id="example-1">Example<a class="heading-anchor" href="#example-1" aria-hidden="true">#</a></h2>
<figure class="example example-bad"><figcaption>✕ Fails</figcaption><pre><code class="language-html"><svg viewBox="0 0 10 10"><path d="M0 0h10v10H0z"/></svg>
</code></pre></figure>
<figure class="example example-good"><figcaption>✓ Passes</figcaption><pre><code class="language-html"><svg viewBox="0 0 10 10"><title>Company logo</title><path d="M0 0h10v10H0z"/></svg>
</code></pre></figure>
<p>A <title> child gives the SVG a text alternative even without role="img"; adding role="img" additionally makes screen readers expose it as an image.</p>
<h2 id="example-2">Example<a class="heading-anchor" href="#example-2" aria-hidden="true">#</a></h2>
<figure class="example example-bad"><figcaption>✕ Fails</figcaption><pre><code class="language-html"><svg viewBox="0 0 24 24"><path d="M12 2L22 20H2z"/></svg>
</code></pre></figure>
<figure class="example example-good"><figcaption>✓ Passes</figcaption><pre><code class="language-html"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M12 2L22 20H2z"/></svg>
</code></pre></figure>
<h2 id="example-3">Example<a class="heading-anchor" href="#example-3" aria-hidden="true">#</a></h2>
<figure class="example example-bad"><figcaption>✕ Fails</figcaption><pre><code class="language-html"><button><svg viewBox="0 0 10 10"><path d="M0 0h10v10H0z"/></svg></button>
</code></pre></figure>
<figure class="example example-good"><figcaption>✓ Passes</figcaption><pre><code class="language-html"><button>Save <svg viewBox="0 0 10 10"><path d="M0 0h10v10H0z"/></svg></button>
</code></pre></figure>
<p>An unnamed decorative SVG inside a control already named by its text is not flagged; icon-only controls still are (the host has no name).</p>
<h2 id="wcag-success-criteria">WCAG success criteria<a class="heading-anchor" href="#wcag-success-criteria" aria-hidden="true">#</a></h2>
<h3 id="1-1-1-non-text-content-level-a">1.1.1 Non-text Content — Level A<a class="heading-anchor" href="#1-1-1-non-text-content-level-a" aria-hidden="true">#</a></h3>
<p>All non-text content (images, icons, controls) needs a text alternative that conveys the same purpose, or be marked decorative so assistive tech can ignore it.</p>
<p><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html">Understanding 1.1.1</a></p>
<h2 id="standards">Standards<a class="heading-anchor" href="#standards" aria-hidden="true">#</a></h2>
<p>This rule contributes to the following standards:</p>
<p><span class="std-tag" data-std="wcag-A">WCAG A</span> <span class="std-tag" data-std="EN-301-549">EN 301 549</span> <span class="std-tag" data-std="section508">Section 508</span> <span class="std-tag" data-std="TTv5">Trusted Tester</span> <span class="std-tag" data-std="ACT">ACT</span></p>
<div class="table-wrap"><table>
<thead>
<tr>
<th>Standard</th>
<th>Criteria</th>
</tr>
</thead>
<tbody><tr>
<td>Section 508</td>
<td>1194.22(a)</td>
</tr>
<tr>
<td>EN 301 549</td>
<td>9.1.1.1</td>
</tr>
<tr>
<td>Trusted Tester v5</td>
<td>7.a</td>
</tr>
<tr>
<td>ACT (WCAG SC)</td>
<td>1.1.1</td>
</tr>
</tbody></table></div>
<h2 id="references">References<a class="heading-anchor" href="#references" aria-hidden="true">#</a></h2>
<ul>
<li><a href="https://www.w3.org/WAI/tutorials/images/">W3C — Accessible SVGs</a></li>
</ul>
</article>
<footer class="md-footer">
<span>Generated from <code>@app/a11y-engine</code> rule metadata.</span>
<a class="back-top" href="#main">Back to top ↑</a>
</footer>
</main>
<aside class="toc" aria-label="On this page"><div class="toc-title">On this page</div><a class="toc-link toc-h2" href="#why-it-matters" data-toc="why-it-matters">Why it matters</a><a class="toc-link toc-h2" href="#how-to-fix" data-toc="how-to-fix">How to fix</a><a class="toc-link toc-h2" href="#example" data-toc="example">Example</a><a class="toc-link toc-h2" href="#example-1" data-toc="example-1">Example</a><a class="toc-link toc-h2" href="#example-2" data-toc="example-2">Example</a><a class="toc-link toc-h2" href="#example-3" data-toc="example-3">Example</a><a class="toc-link toc-h2" href="#wcag-success-criteria" data-toc="wcag-success-criteria">WCAG success criteria</a><a class="toc-link toc-h3" href="#1-1-1-non-text-content-level-a" data-toc="1-1-1-non-text-content-level-a">1.1.1 Non-text Content — Level A</a><a class="toc-link toc-h2" href="#standards" data-toc="standards">Standards</a><a class="toc-link toc-h2" href="#references" data-toc="references">References</a></aside>
</div>
<script src="/wiki/a11y-rules/assets/wiki.9c7b1306b8.js" defer></script>
</body></html>