Alt Text

html

<div class="alt-demo">
  <div class="alt-demo__frame" style="width:220px;">
    <img class="alt-demo__img" src="does-not-exist.jpg" style="width:220px;"{{unless decorative}} alt="Golden retriever catching a frisbee mid-air"

tailwind

<div style="width:340px;font-family:system-ui,sans-serif;color:#241430">
  <div class="border-2 border-dashed rounded-lg grid place-items-center p-2.5 box-content" style="min-height:90px;border-color:#24143033;background:#FAF7F2;width:220px">
    <img src="does-not-exist.jpg" class="block" style="width:220px"{{unless decorative}} alt="Golden retriever catching a frisbee mid-air"

react

export function AltText({
  altText = "Golden retriever catching a frisbee mid-air",
  decorative = false,
  width = 220,
  showCaption = true,
}) {
  return (
    <div style={{ width: 340, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <div style={{ minHeight: 90, border: "2px dashed #24143033", borderRadius: 10, background: "#FAF7F2", display: "grid", placeItems: "center", padding: 10, boxSizing: "content-box", width }}>
        <img src="does-not-exist.jpg" alt={decorative ? "" : altText} role={decorative ? "presentation" : undefined} style={{ display: "block", width }} />
      </div>
      {showCaption && <p style={{ marginTop: 10, fontSize: 12, fontFamily: "ui-monospace, monospace", color: "#241430aa", wordBreak: "break-word" }}>
        {decorative ? 'alt="" \u2014 image ignored by screen readers' : 'alt="' + altText + '"'}
      </p>}
    </div>
  );
}