How to Label Buttons Accessibly: Complete Guide (2026)

Why Button Labels Matter for Real Users

Every assistive-tech path through a page touches the button's accessible name. When that name is missing or vague, the failure mode is immediate and total:

• Screen readers (NVDA, JAWS, VoiceOver):Without a name, the user hears only "button." They have no way to know which control deletes their account and which one cancels the dialog.
• Voice control (Voice Control on macOS/iOS, Dragon, Voice Access):Users say "click [button name]" to activate controls. A button with no name is unreachable by voice.
• Switch and keyboard users: Tab focus lands on the button, but speech output gives no clue what activating it will do — many users simply skip it.
• AI agents and scrapers:AI-driven browsing agents (and Google's rendering pipeline) parse button text to plan actions. An anonymous button cannot be invoked, summarized, or indexed.
• SEO:Buttons with descriptive text contribute to page intent signals. Generic "Click here" buttons add nothing semantic; specific text ("Download pricing PDF") reinforces topical relevance.
• Conversion:Specific button copy consistently beats vague copy in A/B tests. "Start free trial" outperforms "Submit"; "Add to cart" outperforms "Add."

The Four Ways to Give a Button an Accessible Name

WCAG and the WAI-ARIA Authoring Practices recognize four techniques for naming a button. Use them in this order of preference — visible text first, hidden text last.

<!-- 1. Visible text inside the button (best) -->
<button type="submit">Save changes</button>

<!-- 2. aria-label for icon-only buttons -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false" width="16" height="16">
    <path d="M2 2 L14 14 M14 2 L2 14" stroke="currentColor" />
  </svg>
</button>

<!-- 3. aria-labelledby when the label exists elsewhere -->
<span id="cart-label">Add wireless headphones to cart</span>
<button type="button" aria-labelledby="cart-label">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<!-- 4. Visually hidden text inside the button -->
<button type="button">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="sr-only">Search products</span>
</button>

<!-- The .sr-only utility class -->
<style>
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
</style>

How to Check Your Buttons

Accessible-name failures are easy to introduce and easy to detect. A combination of automated and manual checks catches almost all of them.

• Greadme deep scan — flags every button with an empty or generic accessible name, points to the offending element, and pairs each issue with an AI-generated fix or one-click GitHub PR.
• Greadme crawler scan — runs the same checks across every indexable page on your site, so you can find the button-naming failure that's repeated on every product card or every modal template.
• Greadme AI visibility analyzer — checks whether AI agents can identify and reason about your CTAs based on their accessible names, not just their visual design.
• axe-core (browser extension or CI) — open-source rules engine that flags button-name violations directly. Free and reliable for the "empty name" case.
• Screen reader walk-through — tab through your page with NVDA (Windows), JAWS (Windows), or VoiceOver (macOS/iOS). Every button should announce a name plus the word "button."
• Chrome DevTools > Accessibility pane — selects any element and shows its computed accessible name, role, and ARIA properties in real time.

8 Patterns for Specific Button Types

<!-- Wrong: icon with no name -->
<button><svg>...</svg></button>

<!-- Right: aria-label describes the action -->
<button type="button" aria-label="Delete item">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<button type="button" aria-pressed="false" onclick="toggleMute(this)">
  Mute
</button>

<button type="button" aria-expanded="false" aria-controls="details">
  Show shipping details
</button>
<div id="details" hidden>...</div>

<!-- Wrong: empty alt = no name -->
<button><img src="/print.png" alt=""></button>

<!-- Right: alt describes the action -->
<button><img src="/print.png" alt="Print invoice"></button>

Common Button-Labeling Failures and Fixes

aria-label vs Visible Text vs Hidden Text — Which to Use

All three give a button an accessible name, but they differ in how they affect sighted users, search engines, and AI extraction. Pick the technique that matches the design constraint.

FAQ

What WCAG criterion covers button labels?

The primary criterion is WCAG 2.2 SC 4.1.2 Name, Role, Value (Level A), which requires every interactive control to have a programmatically determinable name and role. SC 2.4.4 Link Purpose (Level A) applies when buttons act like links, and SC 2.5.3 Label in Name (Level A) applies when visible text and the accessible name disagree. Failing any of these is a Level A violation — the strictest tier.

Is aria-label or visible text better for buttons?

Visible text. It is announced by every screen reader, indexed by search engines, parseable by AI agents, targetable by voice control without extra attributes, and useful to sighted users. aria-labelis appropriate only when visible text genuinely won't fit — the canonical case is an icon-only button.

Why does my icon button fail axe-core or the Greadme deep scan?

Almost always because the button has no accessible name. The <svg> or icon font inside it is not text, and without an aria-label, hidden text, or alt attribute on a contained image, the computed accessible name is empty. Add aria-label="Action description" to the button and aria-hidden="true" to the icon and re-run the scan.

Should I use aria-pressed or change the button text for toggles?

Use aria-pressed. Keeping a stable label ("Mute") and toggling aria-pressed="true|false"means screen readers announce the state explicitly ("Mute, toggle button, pressed") and sighted users always see the same control in the same place. Swapping text between "Mute" and "Unmute" on every click moves the visual landmark and confuses keyboard users.

Does the "×" character in a close button count as a name?

Inconsistently. The multiplication sign (×) is announced as "multiplication" by some screen readers, "times" by others, and skipped by some. Always pair it with aria-label="Close dialog" (or similar) on the button. If you want the visible × to remain decorative, set aria-hidden="true" on it and let the aria-label carry the name.

Do AI search engines like ChatGPT, Perplexity, and Google AI Overviews use button labels?

Yes. Agentic AI systems and rendering pipelines parse button text to understand page intent and (for agents) to plan actions. A button with no accessible name cannot be invoked by an AI agent and contributes no semantic signal to indexing. Specific, descriptive button text helps both human users and AI systems understand what your CTAs do.

How does button labeling affect SEO and conversion?

SEO: descriptive button text contributes to topical relevance signals and feeds in-page interaction crawls. "Download pricing PDF" tells Google what the page is about; "Click here" tells it nothing. Conversion: A/B tests consistently show specific CTAs ("Start free trial", "Buy now") outperform generic ones ("Submit", "Continue") — clear button copy is one of the highest-ROI accessibility improvements you can ship.