ARIA Label

html

<div class="al-demo" data-icon="trash" style="--accent:#241430;">
  <button type="button" class="al-demo__btn" style="width:44px;height:44px;" aria-label="Delete item">
    <svg class="al-demo__icon al-demo__icon--trash" viewBox="0 0 24 24" fill="none" stroke="#FAF7F2" stroke-width="2" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" /></svg>
    <svg class="al-demo__icon al-demo__icon--search" viewBox="0 0 24 24" fill="none" stroke="#FAF7F2" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.5-4.5" /></svg>
    <svg class="al-demo__icon al-demo__icon--close" viewBox="0 0 24 24" fill="none" stroke="#FAF7F2" stroke-width="2" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19" /></svg>
  </button>
  <p class="al-demo__sr">Screen reader announces: &ldquo;Delete item, button&rdquo;{{unless hasLabel}}&ldquo;button&rdquo; &mdash; name missing

tailwind

<div class="flex flex-col" data-icon="trash" style="--accent:#241430;width:340px;font-family:system-ui,sans-serif;color:#241430">
  <button type="button" class="al-tw-btn rounded-xl grid place-items-center cursor-pointer" style="width:44px;height:44px;background:#241430" aria-label="Delete item">
    <svg class="al-tw-icon al-tw-icon--trash w-[22px] h-[22px]" viewBox="0 0 24 24" fill="none" stroke="#FAF7F2" stroke-width="2" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" /></svg>
    <svg class="al-tw-icon al-tw-icon--search w-[22px] h-[22px]" viewBox="0 0 24 24" fill="none" stroke="#FAF7F2" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.5-4.5" /></svg>
    <svg class="al-tw-icon al-tw-icon--close w-[22px] h-[22px]" viewBox="0 0 24 24" fill="none" stroke="#FAF7F2" stroke-width="2" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19" /></svg>
  </button>
  <p class="text-[13px] mt-2.5 p-2 border-l-[3px]" style="background:#A8E6C133;border-color:#241430">Screen reader announces: &ldquo;Delete item, button&rdquo;{{unless hasLabel}}&ldquo;button&rdquo; &mdash; name missing

react

export function AriaLabelDemo({
  label = "Delete item",
  icon = "trash",
  hasLabel = true,
  accent = "#241430",
  size = 44,
}) {
  const paths = {
    trash: "M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13",
    search: "M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM20 20l-4.5-4.5",
    close: "M5 5l14 14M19 5L5 19",
  };
  return (
    <div style={{ width: 340, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <button type="button" aria-label={hasLabel ? label : undefined}
        style={{ width: size, height: size, border: "none", borderRadius: 10, display: "grid", placeItems: "center", cursor: "pointer", background: accent }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FAF7F2" strokeWidth="2" aria-hidden="true">
          <path d={paths[icon]} />
        </svg>
      </button>
      <p style={{ marginTop: 10, fontSize: 13, background: "#A8E6C133", borderLeft: "3px solid " + accent, padding: "8px 10px" }}>
        Screen reader announces: {hasLabel ? "\u201c" + label + ", button\u201d" : "\u201cbutton\u201d \u2014 name missing"}
      </p>
    </div>
  );
}