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.