Check your SVGs for accessible names

SiteCurl finds every inline SVG on your pages and checks whether it has an accessible name. It looks for three things: a <title> element inside the SVG, an aria-label attribute on the SVG, or an aria-labelledby attribute pointing to a visible label.

SVGs that are marked as decorative (aria-hidden='true', role='presentation', or role='none') are skipped. These are intentionally hidden from screen readers and do not need names.

The check reports how many non-decorative SVGs are on the page and how many are missing names. This tells you the scope of the problem before you start fixing.

SVG is the standard format for icons, logos, charts, and illustrations on the web. Unlike raster images (PNG, JPEG), SVGs are drawn with code. A screen reader encounters the SVG element and tries to announce it. If there is no accessible name, the result depends on the reader.

Some screen readers skip the SVG entirely. The user does not know it exists. If the SVG is a logo that links to the home page, the link has no label. If the SVG is an icon inside a button, the button has no description.

Other screen readers try to read the SVG markup itself: path data, group labels, class names. The user hears something like 'group, path, M12 2C6.48 2 2 6.48 2 12...' which is meaningless. This is worse than silence because it takes time and provides no information.

The fix is straightforward. Every SVG that carries meaning needs a name. Decorative SVGs (a background pattern, a divider line, an icon next to text that already says the same thing) should be hidden with aria-hidden='true'. The distinction is simple: if the SVG were removed, would any information be lost? If yes, it needs a name. If no, hide it.

SVGs are everywhere on modern websites. Navigation icons, social media logos, feature illustrations, chart graphics, and decorative elements are all commonly SVG. Any SVG that carries meaning needs a name so screen reader users know what it represents.

This is especially important for icon-only elements. A hamburger menu icon, a search magnifying glass, or a social media logo inside a link all depend on the SVG having a name. Without it, the interactive element is blank.

There is also a usability cost for voice control users. When an SVG inside a button has no name, the button has no name, and voice control users cannot say its name to activate it.

Sites with icon-based navigation are the most affected. Dashboards, admin panels, and mobile-first designs that replace text labels with icons depend entirely on SVG accessible names for screen reader support.

Marketing sites with illustration sections (feature icons, process step graphics, hero illustrations) often have SVGs that carry meaning but lack names. The illustration shows a concept that the surrounding text may not fully describe.

E-commerce sites that use SVG icons for product features (waterproof, recyclable, free shipping) need names on those icons. Without them, screen reader users miss the product attributes the icons represent.

Step 1: Add a title element to meaningful SVGs. Place a <title> element as the first child of the SVG. Example: <svg><title>Search</title><path .../></svg>. The title text should describe what the SVG represents, not what it looks like.

Step 2: Or use aria-label. Add aria-label='Search' directly to the SVG element. This is simpler than adding a child element and works in all modern screen readers.

Step 3: Add role='img' to SVGs with titles. Some screen readers need role='img' on the SVG element to properly associate the title. Add it alongside the title for the best support: <svg role='img'><title>Search</title>...</svg>.

Step 4: Hide decorative SVGs. Icons next to text labels (where the text already says the same thing), background patterns, and decorative dividers should have aria-hidden='true'. This tells screen readers to skip them entirely. A search icon next to the text 'Search' does not need its own name because the text provides the label.

Step 5: Check SVGs inside interactive elements. If an SVG is inside a button or link that has no other text, the SVG's accessible name becomes the interactive element's name. Make sure the name describes the action, not the icon: 'Open menu' is better than 'Hamburger icon.'

Describing the shape instead of the meaning. 'Three horizontal lines' is what the icon looks like. 'Open navigation menu' is what it means. Screen reader users need the meaning, not a visual description.

Adding a title but no role='img'. Some screen readers (especially older versions of Safari with VoiceOver) do not announce the SVG title without role='img'. Adding the role improves support.

Labeling decorative SVGs. A checkmark icon next to the text 'Complete' does not need a name. Adding one would make the screen reader say 'checkmark, Complete,' which is redundant. Use aria-hidden='true' on decorative icons.

Using the file name as the title. 'icon-search-24px' is not a useful label. Write a human-readable description: 'Search' or 'Search this site.'

After adding names, run another SiteCurl scan. The missing SVG name count should drop to zero. For a manual check, open your browser's accessibility tree (Chrome DevTools > Elements > Accessibility pane) and inspect each SVG. It should show an accessible name matching the title or aria-label you set.

To test with a screen reader, navigate through your page and listen for SVG announcements. Named SVGs should be read aloud with their title. Decorative SVGs should be skipped entirely with no announcement.

Every SVG that carries meaning needs a name: a title element, aria-label, or aria-labelledby. Decorative SVGs should be hidden with aria-hidden='true'. The distinction is simple: if removing the SVG would lose information, name it. If not, hide it.