Find empty buttons, links, and headings

SiteCurl checks every button, link, and heading on your pages for accessible text. An element needs at least one of these: visible text content, an aria-label, an aria-labelledby reference, a title attribute, an image with alt text inside it, or an SVG with a label inside it.

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

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

Empty interactive elements are more common than most developers expect. The typical case is an icon button: a button that shows a hamburger menu icon, a close X, a search magnifying glass, or a social media logo. The icon is added via CSS, SVG, or an image tag. The developer sees the icon and assumes the meaning is obvious. 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 multiple empty buttons, the problem gets worse. The user hears 'button, button, button' with no way to distinguish them.

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

Empty headings are a different kind of issue. They disrupt the document outline that screen reader users navigate by. A blank H2 creates a section with no label. Users jumping between headings hear silence where a section title should be.

Screen readers announce interactive elements by their accessible name. When that name is empty, the announcement is useless. Users hear that something exists but not what it is. They cannot use a button they cannot identify, and they cannot follow a link with no destination.

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

Search engines also use link text and heading content as signals. An empty heading adds no information. An empty link provides no anchor text. Both are missed chances to help search engines understand your page.

Sites with icon-only buttons are the most affected. Dashboards, web apps, and mobile navigation patterns that rely on visual icons without text labels create empty elements for every icon that lacks an accessible name.

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

Marketing sites with hero sections sometimes include decorative headings that contain only a background image or a CSS-generated decorative element. These show up as empty headings in the accessibility 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 announce. Use a label that describes the action, not the icon.

Step 2: Add alt text to images inside links. If a link wraps an image with no other text, the image's alt attribute becomes the link's accessible name. Set the alt to describe where the link goes: alt='Visit our Twitter profile'.

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

Step 4: Label SVGs inside buttons. If a button contains an inline SVG icon, add a <title> element 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 correct text. Heading tags exist for document structure, not for spacing or styling.

Relying on CSS content for meaning. Text added via CSS ::before or ::after pseudo-elements is not consistently read by all screen readers. Do not depend on CSS-generated text as the only accessible name for interactive elements.

Adding aria-label to the icon instead of the button. If a button contains an SVG, adding aria-label to the SVG helps, but adding it to the button is more direct. The button is the interactive element. Label the interactive element.

Using title instead of aria-label. The title attribute creates a tooltip on hover, but screen reader support for title is inconsistent. Use aria-label for the primary accessible name. Use title only as a supplement, not a replacement.

Hiding the wrong element. Adding aria-hidden='true' to a button hides the button entirely from screen readers. That fixes the 'empty' announcement but creates a bigger problem: the button is now completely invisible to assistive technology. Only hide decorative elements.

After fixing, run another SiteCurl scan. The empty element count should drop to zero. For a manual check, install the WAVE browser extension and activate it on your page. It highlights elements with missing accessible names.

To test with a screen reader, activate VoiceOver (Cmd+F5 on Mac) or NVDA (free for Windows) and Tab through your interactive elements. Every button and link should be announced with a meaningful name. If you hear 'button' with nothing after it, the label is still missing.

Every button, link, and heading needs text that screen readers can announce. Icon-only elements are the most common source of empty announcements. Add aria-label to icon buttons, alt text to linked images, and remove or fill in empty headings.