ARIA Role

Semantic role exposed to assistive technology.

html

<div class="role-demo" data-role="button" style="--accent:#BFD9F2;">
  <span class="role-demo__el" role="button" tabindex="0" style="font-size:16px;">View details</span>
  <p class="role-demo__sr">Announced as: &ldquo;View details, button&rdquo;</p>
</div>
<style>
.role-demo { width: 320px; font: 15px system-ui, sans-serif; color: #241430; }
.role-demo__el { display: inline-block; cursor: pointer; }
.role-demo[data-role="button"] .role-demo__el { padding: 10px 18px; background: var(--accent); border-radius: 999px; font-weight: 600; }
.role-demo[data-role="link"] .role-demo__el { color: var(--accent); text-decoration: underline; font-weight: 500; }
.role-demo[data-role="heading"] .role-demo__el { font-weight: 800; font-size: 1.4em !important; border-bottom: 3px solid var(--accent); padding-bottom: 4px; }
.role-demo__el:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.role-demo__sr { margin-top: 12px; font-size: 13px; background: #24143010; border-left: 3px solid var(--accent); padding: 8px 10px; }
</style>

tailwind

<div class="role-tw role-tw--button flex flex-col" style="width:320px;font-family:system-ui,sans-serif;color:#241430">
  <span role="button" tabindex="0" class="role-tw__el inline-block cursor-pointer w-fit" style="font-size:16px">View details</span>
  <p class="text-[13px] mt-3 p-2 border-l-[3px] bg-[#24143010]" style="border-color:#BFD9F2">Announced as: &ldquo;View details, button&rdquo;</p>
</div>
<style>
.role-tw--button .role-tw__el { padding: 10px 18px; background: #BFD9F2; border-radius: 999px; font-weight: 600; }
.role-tw--link .role-tw__el { color: #BFD9F2; text-decoration: underline; font-weight: 500; }
.role-tw--heading .role-tw__el { font-weight: 800; font-size: 1.4em !important; border-bottom: 3px solid #BFD9F2; padding-bottom: 4px; }
</style>

react

export function AriaRoleDemo({
  text = "View details",
  role = "button",
  accent = "#BFD9F2",
  fontSize = 16,
  announce = true,
}) {
  const styles = {
    button: { padding: "10px 18px", background: accent, borderRadius: 999, fontWeight: 600 },
    link: { color: accent, textDecoration: "underline", fontWeight: 500 },
    heading: { fontWeight: 800, fontSize: fontSize * 1.4, borderBottom: "3px solid " + accent, paddingBottom: 4 },
  }[role];
  return (
    <div style={{ width: 320, fontFamily: "system-ui, sans-serif", fontSize: 15, color: "#241430" }}>
      <span role={role} tabIndex={0} style={{ display: "inline-block", cursor: "pointer", fontSize, ...styles }}>{text}</span>
      {announce && <p style={{ marginTop: 12, fontSize: 13, background: "#24143010", borderLeft: "3px solid " + accent, padding: "8px 10px" }}>Announced as: &ldquo;{text}, {role}&rdquo;</p>}
    </div>
  );
}