Why Does My Icon Button Say Nothing to a Screen Reader? Accessible Names Explained for Small Business Websites
If your audit flagged "unlabeled links or buttons," it caught something a sighted visitor will never notice: a control on your page that a screen reader has nothing to say about. Not "click here" - nothing. Just "button." This is a different problem from vague link text, and it usually hides in the parts of a site nobody thinks of as "content" at all - the hamburger menu, the search icon, the little X on a popup.
What an "accessible name" actually is
Every link and button on a page has an accessible name: the text a screen reader announces for it. Most of the time this is trivial - a link that says "Contact us" has the accessible name "Contact us," because the visible words and the announced words are the same thing. The problem shows up on controls that communicate purely through an icon or an image, with no text anywhere in the code for a screen reader to fall back on.
A sighted visitor sees three horizontal lines and instantly understands "that opens the menu." A screen reader has no lines to look at. Unless the underlying code also carries a text label, it announces the control as nothing more specific than "button" - true, but useless. The visitor knows something is there. They have no idea what it does.
<button onclick="toggleMenu()">☰</button> - a screen reader announces: "button"
<button onclick="toggleMenu()" aria-label="Open menu">☰</button> - a screen reader announces: "Open menu, button"
How this is different from "click here" link text
If you've read our post on generic link text, this will sound familiar - and it's related, but it's a step further along the same problem. "Click here" is vague link text that IS present; a screen reader announces something, just not something useful about the destination. An icon-only button or an image used as a link often has no text at all attached to it anywhere in the code. A screen reader isn't choosing between a good label and a vague one - it has nothing to read from, full stop, unless an aria-label or real alt text was added on purpose.
The controls that usually have this problem
The hamburger menu icon
Three stacked lines that open mobile navigation. Almost universally icon-only, almost universally missing a label unless a developer specifically added one.
Search and close (X) icons
A magnifying glass that opens a search box, an X that closes a popup or a mobile menu - both pure icons, both meaningless to a screen reader without a label saying "Search" or "Close."
Social media icons in the footer
Facebook, Instagram, and X/Twitter logos linking out to your profiles. Sighted visitors recognize the logos instantly; a screen reader announces "link, link, link" with no way to tell Facebook from Instagram.
A logo used as the homepage link
If your logo is an image with no alt text (or empty alt text on a link, rather than a decorative image), the link that should say "BitwiseDesigns - go to homepage" announces nothing at all.
Why this is worth fixing even though it seems small
Every one of these is a control a visitor actually needs to use to get anywhere on your site - open the menu, find the search box, close a popup blocking the page, follow you on social media. A missing accessible name doesn't just make the experience less pleasant for a screen reader user; on a mobile site where the menu button IS the entire navigation, it can mean a blind visitor cannot find your services, phone number, or contact form at all. That's also the exact kind of concrete, fixable defect that shows up in real ADA web-accessibility demand letters - see our ADA compliance basics post for the bigger picture.
How to check your own site in under a minute
Right-click any icon-only button or link - the hamburger menu, a social icon, a close button - and choose "Inspect" in your browser. Look at the underlying HTML: if there's no visible text between the opening and closing tags, and no aria-label or aria-labelledby attribute, a screen reader has nothing to announce for that control. If it's an image or SVG used as a link, check for an alt attribute the same way.
How to fix it
Add an aria-label attribute in plain, specific language describing what the control does or where it goes - aria-label="Open menu", aria-label="Close", aria-label="Visit our Facebook page". For an image or logo, real descriptive alt text does the same job. It's a one-attribute change per element, no visual redesign, and it never changes how the page looks to a sighted visitor.
How the free audit catches this
Unlabeled links and buttons are one of the checks in our free audit, run alongside speed, SEO, and the rest of our website audit checklist. It comes back as a medium-impact finding naming how many links or buttons on the page have no accessible name - not a guess, an actual count from the page.
Frequently asked questions
What is an "accessible name"?
An accessible name is the text a screen reader announces for a link or button - separate from how it looks on screen. A sighted visitor reads a hamburger icon and knows it opens the menu; a screen reader has no icon to look at, so unless the code also gives that button a text label, it announces nothing more useful than "button."
Isn't this the same as generic link text like "click here"?
It's a related but different problem. "Click here" link text is present but vague - a screen reader announces something, just not something useful. An unlabeled icon button or image link often has no text at all, so a screen reader announces nothing beyond "link" or "button" - a step worse than a vague label, because there is nothing to even guess from.
Which elements on a typical small business site usually have this problem?
The usual offenders are icon-only controls: the hamburger menu icon, a magnifying-glass search icon, an X close button on a popup or modal, social media icons in the footer, and a logo image used as the homepage link with no descriptive alt text.
How do I fix a missing accessible name?
Add an aria-label attribute describing what the control does, in the visitor's own words: aria-label="Open menu" on the hamburger button, aria-label="Close" on the X button, aria-label="Visit our Facebook page" on the Facebook icon link. If the control is an image, giving it real alt text does the same job. Either way it's a one-attribute fix per element, no redesign required.
How do I check my own site for this?
Right-click any icon-only button or link and choose Inspect. If you see no visible text between the tags and no aria-label or aria-labelledby attribute, a screen reader has nothing to announce for it. Our free audit checks every link and button on the page automatically and lists exactly how many are missing a name.
The cheapest way to find out
Run the free audit below. We check accessible names along with speed, SEO, mobile-friendliness, and the rest of accessibility, using the same tooling Google itself uses, and email you a plain-English report naming exactly how many controls need a label. If something needs fixing, it's a flat $149 for your fixable speed/image/SEO/broken-link issue, or $299 for everything, with before-and-after proof once it's done.