All icons and SVG graphics have meaningful text alternatives via aria-label, title, or nested text

Icon-only buttons and SVG graphics convey meaning entirely through visual shape—a trash can means delete, a gear means settings, an X means close. Without a text alternative, screen readers announce only "button" or the SVG element name, leaving users with no indication of the action they are about to take. WCAG 2.2 SC 1.1.1 (Level A) requires all non-text content to have a text alternative; SC 4.1.2 (Level A) requires that UI components expose name, role, and value to AT. Section 508 2018 Refresh 502.3.1 mirrors this. Toolbar rows of unlabeled icon buttons are one of the most common Section 508 failure patterns in web applications.

Add accessible labels to every icon used as a control or to convey information. Use aria-label on the button, or aria-hidden="true" on the icon with a visually hidden text sibling:

{/* Method 1: aria-label on the button */}
<button aria-label="Delete record">
  <TrashIcon aria-hidden="true" />
</button>

{/* Method 2: visually hidden text (preferred for complex icons) */}
<button>
  <GearIcon aria-hidden="true" />
  <span className="sr-only">Settings</span>
</button>

{/* Method 3: SVG title element */}
<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Download file</title>
  <path d="..." />
</svg>

Add sr-only to globals.css if not already present:

.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;
}