Interactive elements have accessible names

Icon-only buttons — a close X, a hamburger menu, a heart for favorites — read as 'button' or are skipped entirely by screen readers when they carry no accessible name. WCAG 2.2 SC 4.1.2 (Name, Role, Value) requires every UI component to expose a name to assistive technology. SC 2.4.6 (Headings and Labels) requires labels to be descriptive. Section 508 2018 Refresh 502.3.1 mandates that all object information be programmatically determinable. A screen reader user navigating a list of 'View Details' links on a product listing page encounters identical announcements with no way to distinguish which product each link targets — this is a known and documented navigation failure mode. The business consequence is that entire interaction patterns are unusable by an estimated 7.5 million screen reader users in the US alone.

Every interactive element must expose a name through one of: visible text content, aria-label, aria-labelledby, or (rarely) title. In your button and link components:

// Visible text — always preferred
<button>Save Changes</button>

// Icon-only: use aria-label
<button aria-label="Close dialog">
  <XIcon aria-hidden="true" size={20} />
</button>

// Disambiguate duplicate link text with aria-label
{products.map(product => (
  <a
    key={product.id}
    href={`/products/${product.slug}`}
    aria-label={`View details for ${product.name}`}
  >
    View Details
  </a>
))}

// aria-labelledby for names computed from sibling elements
<button aria-labelledby="doc-title-42">
  <DownloadIcon aria-hidden="true" />
</button>
<span id="doc-title-42">Q1 2024 Report</span>

Set aria-hidden="true" on decorative icons inside labeled buttons to prevent double-reading.

• ID: accessibility-basics.semantic-structure-aria.accessible-names

• Severity: high

• What to look for: Enumerate every relevant item. Check all interactive elements (buttons, links, custom controls). Each must have an accessible name visible to screen readers, either from visible text, aria-label, aria-labelledby, or in rare cases, title attribute. Icon-only buttons are particularly common offenders.

• Pass criteria: At least 1 of the following conditions is met. Every interactive element (button, link, input, custom control) has an accessible name perceivable to screen readers.

• Fail criteria: Any interactive element lacks an accessible name, or has only a title attribute with no text content or ARIA label.

• Skip (N/A) when: Never — all interactive elements need accessible names.

• Cross-reference: For user-facing accessibility and compliance, the Accessibility Basics audit covers foundational requirements.

• Detail on fail: Specify which elements lack names. Example: "Menu toggle button has no text or aria-label. Close button uses × icon with no aria-label. Search results 'View Details' links have duplicate text not distinguishable by screen reader."

• Remediation: Provide accessible names for all interactive elements:

  {/* Visible text */}
  <button>Save Changes</button>
  
  {/* Icon-only button with aria-label */}
  <button aria-label="Close menu">
    <X size={20} />
  </button>
  
  {/* Icon-only button with aria-labelledby */}
  <button aria-labelledby="save-icon-label">
    <SaveIcon id="save-icon-label" />
  </button>