Accessible Name

Name exposed to assistive technology.

html

<div class="name-demo" data-source="visible-text" style="--accent:#D9C8F0;">
  <p class="name-demo__ref">Confirm order <strong id="name-demo-ext">Submit order</strong></p>
  <button type="button" class="name-demo__btn name-demo__btn--visible-text">Submit order</button>
  <button type="button" class="name-demo__btn name-demo__btn--aria-label" aria-label="Submit order">&#10003;</button>
  <button type="button" class="name-demo__btn name-demo__btn--aria-labelledby" aria-labelledby="name-demo-ext">&#10003;</button>
  <p class="name-demo__sr">Computed accessible name: &ldquo;Submit order&rdquo; (from visible-text)</p>
</div>
<style>
.name-demo { width: 340px; font: 14px/1.5 system-ui, sans-serif; color: #241430; }
.name-demo__ref { font-size: 12px; color: #241430aa; margin: 0 0 10px; }
.name-demo__btn { display: none; padding: 10px 18px; border-radius: 8px; border: none; background: var(--accent); font-weight: 600; cursor: pointer; }
.name-demo[data-source="visible-text"] .name-demo__btn--visible-text { display: inline-block; }
.name-demo[data-source="aria-label"] .name-demo__btn--aria-label { display: inline-block; }
.name-demo[data-source="aria-labelledby"] .name-demo__btn--aria-labelledby { display: inline-block; }
.name-demo__sr { margin-top: 10px; font-size: 13px; background: #24143010; border-left: 3px solid var(--accent); padding: 8px 10px; }
</style>

tailwind

<div class="flex flex-col" data-source="visible-text" style="width:340px;font-family:system-ui,sans-serif;color:#241430">
  <p class="text-xs text-[#241430aa] m-0 mb-2.5">Confirm order <strong id="name-demo-ext-tw">Submit order</strong></p>
  <button type="button" class="name-tw-btn name-tw-btn--visible-text px-4.5 py-2.5 rounded-lg border-0 font-semibold cursor-pointer" style="background:#D9C8F0">Submit order</button>
  <button type="button" class="name-tw-btn name-tw-btn--aria-label px-4.5 py-2.5 rounded-lg border-0 font-semibold cursor-pointer" style="background:#D9C8F0" aria-label="Submit order">&#10003;</button>
  <button type="button" class="name-tw-btn name-tw-btn--aria-labelledby px-4.5 py-2.5 rounded-lg border-0 font-semibold cursor-pointer" style="background:#D9C8F0" aria-labelledby="name-demo-ext-tw">&#10003;</button>
  <p class="mt-2.5 text-[13px] p-2 border-l-[3px] bg-[#24143010]" style="border-color:#D9C8F0">Computed accessible name: &ldquo;Submit order&rdquo; (from visible-text)</p>
</div>
<style>
.name-tw-btn { display: none; }
[data-source="visible-text"] .name-tw-btn--visible-text { display: inline-block; }
[data-source="aria-label"] .name-tw-btn--aria-label { display: inline-block; }
[data-source="aria-labelledby"] .name-tw-btn--aria-labelledby { display: inline-block; }
</style>

react

export function AccessibleName({
  name = "Submit order",
  source = "visible-text",
  accent = "#D9C8F0",
  announce = true,
}) {
  const btnStyle = { padding: "10px 18px", borderRadius: 8, border: "none", background: accent, fontWeight: 600, cursor: "pointer" };
  return (
    <div style={{ width: 340, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <p style={{ fontSize: 12, color: "#241430aa", margin: "0 0 10px" }}>Confirm order <strong id="name-demo-ext-r">{name}</strong></p>
      {source === "visible-text" && <button type="button" style={btnStyle}>{name}</button>}
      {source === "aria-label" && <button type="button" aria-label={name} style={btnStyle}>&#10003;</button>}
      {source === "aria-labelledby" && <button type="button" aria-labelledby="name-demo-ext-r" style={btnStyle}>&#10003;</button>}
      {announce && <p style={{ marginTop: 10, fontSize: 13, background: "#24143010", borderLeft: "3px solid " + accent, padding: "8px 10px" }}>Computed accessible name: &ldquo;{name}&rdquo; (from {source})</p>}
    </div>
  );
}