Find empty buttons, links, and headings

SiteCurl checks each button, link, and heading on your pages for readable text. A tag needs at least one of these: visible text, an aria-label, an aria-labelledby link, a title field, an image with alt text inside it, or an SVG with a label inside it.

Tags with none of these are flagged. A button with just an icon and no label, a link that wraps only an image with no alt text, or a heading tag with no content inside it all count as empty. Screen readers read these as blank, leaving users with no idea what the tag does.

The check skips tags marked with aria-hidden='true' or role='presentation' since those are hidden from screen readers on purpose.

Empty clickable tags are more common than most devs expect. The typical case is an icon button: a button that shows a hamburger menu icon, a close X, a search lens, or a social logo. The icon is added via CSS, SVG, or an image tag. The dev sees the icon and assumes the meaning is clear. But screen readers do not see CSS backgrounds. If the SVG has no title and no aria-label, the button is blank.

The screen reader says 'button' and nothing else. The user hears a button exists but has no way to know what it does. Is it a menu toggle? A close button? A delete button? They cannot tell. If the page has many empty buttons, the issue gets worse. The user hears 'button, button, button' with no way to tell them apart.

Empty links have the same issue. A social icon wrapped in a link tag with no text and no alt text is read as 'link' with no target. The user may have 10 links on the page and no way to tell which one goes to Twitter.

Empty headings are a new kind of issue. They break the page outline that screen reader users move through. A blank H2 makes a section with no label. Users jumping between headings hear silence where a section title should be.

Screen readers read clickable tags by their name. When that name is empty, the read is useless. Users hear that something exists but not what it is. They cannot use a button they cannot name, and they cannot follow a link with no target.

This is also a problem for voice control users. Tools like Dragon and Voice Control on Mac let users say the name of a button to click it. If the button has no name, there is nothing to say.

Google also uses link text and heading content as signals. An empty heading adds no info. An empty link gives no anchor text. Both are missed chances to help Google grasp your page.

Sites with icon-only buttons are most affected. Dashboards, web apps, and mobile nav patterns that rely on visual icons without text labels make empty tags for each icon that lacks a name.

WordPress and Shopify themes often include social icon links in the footer that use CSS or SVG icons with no alt text or aria-label. Each site using that theme ships with the same empty links.

Marketing sites with hero blocks sometimes include headings that hold only a background image or a CSS-made decorative item. These show up as empty headings in the access tree.

Step 1: Add aria-label to icon-only buttons. If a button shows only an icon, add aria-label='Close' or aria-label='Open menu' so screen readers have something to read. Use a label that says the action, not the icon.

Step 2: Add alt text to shots inside links. If a link wraps an image with no other text, the image's alt field becomes the link's name. Set the alt to say where the link goes: alt='Visit our Twitter page'.

Step 3: Add visible text when you can. A button that says 'Close' next to the X icon is better than an icon-only button with aria-label. Visible text helps all users, not just screen reader users. If space is tight, use a hidden text class (like sr-only in Tailwind) to keep text for screen readers while hiding it on screen.

Step 4: Label SVGs inside buttons. If a button holds an inline SVG icon, add a <title> tag inside the SVG, or add aria-label to the SVG, or add aria-label to the button itself.

Step 5: Remove empty headings. If a heading tag has no content, it should not be a heading. Remove the tag or add the right text. Heading tags exist for page structure, not for spacing or styling.

Relying on CSS content for meaning. Text added via CSS ::before or ::after is not read the same way by all screen readers. Do not depend on CSS-made text as the only name for clickable tags.

Adding aria-label to the icon, not the button. If a button holds an SVG, adding aria-label to the SVG helps, but adding it to the button is more direct. The button is the clickable tag. Label the clickable tag.

Using title instead of aria-label. The title field makes a tooltip on hover, but screen reader support for title is spotty. Use aria-label for the main name. Use title only as an add-on, not a stand-in.

Hiding the wrong tag. Adding aria-hidden='true' to a button hides the button fully from screen readers. That fixes the 'empty' read but makes a bigger issue: the button is now fully hidden from assistive tools. Only hide decorative items.

After fixing, run a new SiteCurl scan. The empty tag count should drop to zero. For a manual check, install the WAVE browser plugin and run it on your page. It marks tags with missing names.

To test with a screen reader, turn on VoiceOver (Cmd+F5 on Mac) or NVDA (free for Windows) and Tab through your clickable tags. Each button and link should be read with a clear name. If you hear 'button' with nothing after it, the label is still missing.

Each button, link, and heading needs text that screen readers can read. Icon-only tags are the most common source of empty reads. Add aria-label to icon buttons, alt text to linked shots, and remove or fill in empty headings.