Check your SVGs for accessible names

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

SVGs marked as just for show (aria-hidden='true', role='presentation', or role='none') are skipped. These are hidden from screen readers on purpose and do not need names.

The check shows how many non-decorative SVGs are on the page and how many lack names. This tells you the scope before you start fixing.

SVG is the standard format for icons, logos, charts, and art on the web. Unlike raster files (PNG, JPEG), SVGs are drawn with code. A screen reader hits the SVG tag and tries to read it. If there is no name, the result depends on the reader.

Some screen readers skip the SVG fully. 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 label.

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

The fix is clear. Each SVG that carries meaning needs a name. SVGs that are just for show (a pattern, a divider line, an icon next to text that says the same thing) should be hidden with aria-hidden='true'. The rule is simple: if the SVG were gone, would any info be lost? If yes, name it. If no, hide it.

SVGs are found on most modern sites. Nav icons, social logos, feature art, chart graphics, and decorative items are all often SVG. Any SVG that carries meaning needs a name so screen reader users know what it shows.

This matters most for icon-only items. A hamburger menu icon, a search lens, or a social logo inside a link all depend on the SVG having a name. Without it, the clickable item is blank.

Voice control users also pay a cost. When an SVG inside a button has no name, the button has no name. Voice control users cannot say its name to press it.

Sites with icon-based nav are most affected. Dashboards, admin panels, and mobile-first designs that swap text labels for icons depend fully on SVG names for screen reader support.

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

Online stores that use SVG icons for product traits (waterproof, recyclable, free shipping) need names on those icons. Without them, screen reader users miss the product traits the icons show.

Step 1: Add a title tag to SVGs that carry meaning. Place a <title> tag as the first child of the SVG. Example: <svg><title>Search</title><path .../></svg>. The title text should say what the SVG means, not what it looks like.

Step 2: Or use aria-label. Add aria-label='Search' right on the SVG tag. This is simpler than adding a child tag 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 tag to link the title. Add it next to the title for the best support: <svg role='img'><title>Search</title>...</svg>.

Step 4: Hide SVGs that are just for show. Icons next to text labels (where the text says the same thing), patterns, and dividers should have aria-hidden='true'. This tells screen readers to skip them fully. A search icon next to the word 'Search' does not need its own name since the text gives the label.

Step 5: Check SVGs inside buttons and links. If an SVG is inside a button or link with no other text, the SVG's name becomes the button's name. Make sure the name says the action, not the icon: 'Open menu' is better than 'Hamburger icon.'

Writing the shape instead of the meaning. 'Three flat lines' is what the icon looks like. 'Open nav menu' is what it means. Screen reader users need the meaning, not a visual blurb.

Adding a title but no role='img'. Some screen readers (mainly older Safari with VoiceOver) do not read the SVG title without role='img'. Adding the role helps support.

Naming SVGs that are just for show. 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 extra. Use aria-hidden='true' on decorative icons.

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

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

To test with a screen reader, move through your page and listen for SVG reads. Named SVGs should be read aloud with their title. SVGs that are just for show should be skipped with no sound.

Each SVG that carries meaning needs a name: a title tag, aria-label, or aria-labelledby. SVGs that are just for show should be hidden with aria-hidden='true'. The rule is simple: if removing the SVG would lose info, name it. If not, hide it.