Screen Reader

Software reading interface content aloud.

html

<div class="sr-demo" data-content="button" style="--accent:#241430;">
  <div class="sr-demo__el">
    <span class="sr-demo__el--heading">Subscribe</span>
    <button type="button" class="sr-demo__el--button">Subscribe</button>
    <a href="#" class="sr-demo__el--link">Subscribe</a>
    <span class="sr-demo__el--image" role="img" aria-label="Subscribe">&#9633;</span>
  </div>
  <div class="sr-demo__bubble">
    <svg class="sr-demo__wave" viewBox="0 0 40 16" width="28" height="12" aria-hidden="true"><rect x="0" y="4" width="3" height="8" fill="var(--accent)" /><rect x="6" y="0" width="3" height="16" fill="var(--accent)" /><rect x="12" y="5" width="3" height="6" fill="var(--accent)" /><rect x="18" y="2" width="3" height="12" fill="var(--accent)" /><rect x="24" y="6" width="3" height="4" fill="var(--accent)" /></svg>
    <p class="sr-demo__say" data-x="Subscribe"></p>
  </div>
</div>
<style>
.sr-demo { width: 320px; font: 14px system-ui, sans-serif; color: #241430; }
.sr-demo__el--heading, .sr-demo__el--button, .sr-demo__el--link, .sr-demo__el--image { display: none; }
.sr-demo[data-content="heading"] .sr-demo__el--heading { display: block; font-size: 20px; font-weight: 800; }
.sr-demo[data-content="button"] .sr-demo__el--button { display: inline-block; padding: 10px 20px; border-radius: 999px; border: none; background: var(--accent); color: #FAF7F2; font-weight: 600; cursor: pointer; }
.sr-demo[data-content="link"] .sr-demo__el--link { display: inline-block; color: var(--accent); text-decoration: underline; font-weight: 600; }
.sr-demo[data-content="image"] .sr-demo__el--image { display: grid; width: 40px; height: 40px; border-radius: 8px; background: var(--accent); color: #FAF7F2; place-items: center; font-size: 20px; }
.sr-demo__bubble { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #24143010; }
.sr-demo__say { margin: 0; font-size: 13px; font-style: italic; }
.sr-demo[data-content="heading"] .sr-demo__say::after { content: "Heading level 2, \201C" attr(data-x) "\201D"; }
.sr-demo[data-content="button"] .sr-demo__say::after { content: "Button, \201C" attr(data-x) "\201D"; }
.sr-demo[data-content="link"] .sr-demo__say::after { content: "Link, \201C" attr(data-x) "\201D"; }
.sr-demo[data-content="image"] .sr-demo__say::after { content: "Image, \201C" attr(data-x) "\201D"; }
</style>

tailwind

<div class="sr-tw sr-tw--button" style="width:320px;font-family:system-ui,sans-serif;color:#241430">
  <div>
    <span class="sr-tw__heading hidden text-xl font-extrabold">Subscribe</span>
    <button type="button" class="sr-tw__button hidden px-5 py-2.5 rounded-full border-0 font-semibold cursor-pointer" style="background:#241430;color:#FAF7F2">Subscribe</button>
    <a href="#" class="sr-tw__link hidden underline font-semibold" style="color:#241430">Subscribe</a>
    <span role="img" aria-label="Subscribe" class="sr-tw__image hidden w-10 h-10 rounded-lg place-items-center text-xl" style="background:#241430;color:#FAF7F2">&#9633;</span>
  </div>
  <div class="mt-3.5 flex items-center gap-2.5 px-3 py-2.5 rounded-lg bg-[#24143010]">
    <svg width="28" height="12" viewBox="0 0 40 16" aria-hidden="true"><rect x="0" y="4" width="3" height="8" fill="#241430" /><rect x="6" y="0" width="3" height="16" fill="#241430" /><rect x="12" y="5" width="3" height="6" fill="#241430" /><rect x="18" y="2" width="3" height="12" fill="#241430" /><rect x="24" y="6" width="3" height="4" fill="#241430" /></svg>
    <p class="sr-tw__say m-0 text-[13px] italic" data-x="Subscribe"></p>
  </div>
</div>
<style>
.sr-tw--heading .sr-tw__heading { display: block; }
.sr-tw--button .sr-tw__button { display: inline-block; }
.sr-tw--link .sr-tw__link { display: inline-block; }
.sr-tw--image .sr-tw__image { display: grid; }
.sr-tw--heading .sr-tw__say::after { content: "Heading level 2, \201C" attr(data-x) "\201D"; }
.sr-tw--button .sr-tw__say::after { content: "Button, \201C" attr(data-x) "\201D"; }
.sr-tw--link .sr-tw__say::after { content: "Link, \201C" attr(data-x) "\201D"; }
.sr-tw--image .sr-tw__say::after { content: "Image, \201C" attr(data-x) "\201D"; }
</style>

react

export function ScreenReaderDemo({
  customText = "Subscribe",
  content = "button",
  accent = "#241430",
}) {
  const say = {
    heading: "Heading level 2, \u201C" + customText + "\u201D",
    button: "Button, \u201C" + customText + "\u201D",
    link: "Link, \u201C" + customText + "\u201D",
    image: "Image, \u201C" + customText + "\u201D",
  }[content];
  return (
    <div style={{ width: 320, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div>
        {content === "heading" && <span style={{ fontSize: 20, fontWeight: 800 }}>{customText}</span>}
        {content === "button" && <button type="button" style={{ padding: "10px 20px", borderRadius: 999, border: "none", background: accent, color: "#FAF7F2", fontWeight: 600, cursor: "pointer" }}>{customText}</button>}
        {content === "link" && <a href="#" style={{ color: accent, textDecoration: "underline", fontWeight: 600 }}>{customText}</a>}
        {content === "image" && <span role="img" aria-label={customText} style={{ display: "grid", width: 40, height: 40, borderRadius: 8, background: accent, color: "#FAF7F2", placeItems: "center", fontSize: 20 }}>&#9633;</span>}
      </div>
      <div style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderRadius: 10, background: "#24143010" }}>
        <svg width="28" height="12" viewBox="0 0 40 16" aria-hidden="true"><rect x="0" y="4" width="3" height="8" fill={accent} /><rect x="6" y="0" width="3" height="16" fill={accent} /><rect x="12" y="5" width="3" height="6" fill={accent} /><rect x="18" y="2" width="3" height="12" fill={accent} /><rect x="24" y="6" width="3" height="4" fill={accent} /></svg>
        <p style={{ margin: 0, fontSize: 13, fontStyle: "italic" }}>{say}</p>
      </div>
    </div>
  );
}