Screen readers — the software used by visually impaired users to navigate websites — don't see images. They read text. When they encounter an SVG without text descriptions, they either skip it silently or announce it as "image" — providing no useful information to the user.
For decorative elements this is acceptable. For a logo — the primary brand identifier on every page — it's not. The logo tells a screen reader user which website they're on. Without accessibility attributes, it tells them nothing.
This is a five-minute fix with clear implementation patterns. There's no reason not to do it.
The Accessibility Problem with SVG
SVGs are different from <img> tags in one critical way: the browser doesn't automatically apply accessible behaviour. An <img src="logo.png" alt="Evoke Studio"> has an alt attribute that screen readers read as the image description. An inline <svg> has no equivalent automatic behaviour — it requires explicit markup.
The common patterns developers use, and what screen readers actually do with them:
<svg> with no attributes: Screen readers may announce the SVG's title if present, or announce the file name, or skip it entirely. Behaviour is inconsistent across screen readers and browsers.
<svg aria-hidden="true">: Completely hides the SVG from accessibility tree. Correct for decorative SVGs; wrong for logos.
<img src="logo.svg" alt="Evoke Studio">: The alt attribute is read correctly. However, when SVG is used as <img src>, CSS cannot target the internal paths — you lose the ability to change colours programmatically and the SVG is essentially a raster in terms of styling.
Inline SVG with correct accessibility markup: The right approach for logos that need both accessibility and CSS styling capability.
The Correct Accessibility Pattern
The current recommended pattern (based on current ARIA specification and screen reader compatibility):
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 60"
role="img"
aria-labelledby="logo-title logo-desc"
>
<title id="logo-title">Evoke Studio</title>
<desc id="logo-desc">
Evoke Studio logo — AI logo vectorization and brand identity design
</desc>
<!-- SVG paths here -->
<path d="..." fill="#0a0a0a" />
</svg>
Breaking down each attribute:
role="img" — tells assistive technology to treat the SVG as an image, not as a group of shapes. Without this, some screen readers try to navigate into the SVG's individual path elements, which is meaningless for a logo.
aria-labelledby="logo-title logo-desc" — references both the title and description by their IDs. ARIA labelledby takes precedence over other naming mechanisms. By referencing both, screen readers that support desc read the full description; those that only read the first reference get the title.
<title> — the primary text description. Screen readers announce this as the accessible name of the image. Keep it concise: the brand name.
<desc> — an optional longer description. Useful for SEO context and for screen readers that support it. Can describe what the brand does or the visual character of the mark for users who want that context.
If the SVG is purely decorative (used as a background texture, a decorative divider, not the logo):
<svg aria-hidden="true" focusable="false">
<!-- decorative paths -->
</svg>
aria-hidden="true" removes it from the accessibility tree entirely. focusable="false" prevents IE11 from placing focus on the SVG element (a legacy but still-relevant fix).
Screen Reader Testing
After implementing, test with actual screen reader software:
macOS/iOS: VoiceOver (built-in). Enable with Cmd+F5 on Mac, triple-click Home button on iOS. Navigate to the logo element — it should announce "Evoke Studio, image" or similar.
Windows: NVDA (free download) or JAWS (paid, industry standard). Navigate to the logo element with NVDA running and verify the announcement.
Android: TalkBack (built-in). Enable in Settings → Accessibility → TalkBack.
Browser DevTools check: In Chrome DevTools, right-click the SVG element → Inspect → Accessibility tab. The computed accessible name should show your <title> content.
A common mistake: the SVG works correctly in one browser/screen reader combination but not others. The pattern above (role="img" + aria-labelledby + title + desc) has the broadest compatibility across combinations. Test in at least two screen reader/browser combinations before considering it complete.
SVG Focus and Keyboard Navigation
For SVGs used as interactive elements (a clickable logo that links to the home page), the parent <a> element should carry the accessible label, not the SVG:
<a href="/" aria-label="Evoke Studio — go to homepage">
<svg aria-hidden="true" focusable="false" viewBox="0 0 200 60">
<!-- paths -->
</svg>
</a>
Here the <a> tag provides the accessible name and the keyboard focusable element. The SVG is hidden from the accessibility tree because the link handles the description. focusable="false" prevents the SVG itself from receiving focus in IE11.
If the logo is not interactive (just a visual identifier, not a link), use the full role="img" pattern above.
SEO Benefits of Accessible SVG
Search engine crawlers — particularly Google — increasingly read SVG content. An SVG logo with a <title> element that contains your brand name is a small but real contribution to brand signals in search.
More importantly: accessible markup signals to Google that the site is well-maintained and follows web standards, which is a minor positive quality signal for crawling and indexing.
For the complete SVG optimisation workflow (which should be completed before accessibility attributes are added), see SVG optimization for web. For the complete digital asset system that includes accessible SVG logos, see the brand identity checklist. Our SVG conversion service produces properly structured SVGs ready for these accessibility additions.
Need a properly structured, accessible SVG logo?
We produce SVG logos with clean path structure, optimised file size, and accessibility-ready markup — built for developers who care about the details.
Add role='img' to the SVG element, include a <title> element with the brand name, add an id to the title, and reference it with aria-labelledby on the SVG. For example: <svg role='img' aria-labelledby='logo-title'><title id='logo-title'>Your Brand Name</title>...</svg>. This tells screen readers to treat the SVG as an image and use the title as its accessible name.
An HTML img tag uses the alt attribute for its accessible name. An inline SVG uses a <title> child element combined with aria-labelledby for the same purpose. They serve the same function — providing a text description that screen readers announce — but the implementation differs because inline SVG is not an img element.
Both work, but aria-labelledby (referencing a <title> element by ID) is generally preferred because it also provides the text to search engine crawlers through the visible SVG <title> element. aria-label puts the description only in the accessibility tree. For logos, the pattern aria-labelledby referencing a <title> id is the most broadly supported approach.
If the SVG is inside an <a> tag with an aria-label, set aria-hidden='true' and focusable='false' on the SVG — the link element handles the accessible name. If the SVG is not inside a link and stands alone as a brand identifier, use the full role='img' pattern with a <title> element.
Modestly. Search engine crawlers can read SVG <title> elements, so including your brand name there is a small positive signal. The main SEO benefit is that well-structured, accessible code is a quality signal that can slightly improve crawlability and perceived site quality. The primary reason to add accessibility markup is for users with disabilities — SEO is a secondary benefit.
Use a screen reader: VoiceOver on Mac/iOS (Cmd+F5), NVDA on Windows (free download), or TalkBack on Android. Navigate to the logo and verify it announces the brand name. Also check via Chrome DevTools: right-click the SVG, Inspect, then check the Accessibility panel for the computed accessible name. It should show your brand name, not 'image' or blank.