Accessibility

Designing software usable by people with different abilities.

□

alt="Mountain sunset"

Body copy people can actually read

button has aria-label="Close"

html

<div class="a11y-demo" style="--accent:#A8E6C1;">
  <div class="a11y-demo__row">
    <span class="a11y-demo__img" role="img" aria-label="Mountain sunset">&#9633;</span>
    <p class="a11y-demo__note">alt="Mountain sunset"</p>
  </div>
  <p class="a11y-demo__text">Body copy people can actually read</p>
  <button type="button" class="a11y-demo__icon-btn" aria-label="Close">&times;</button>
  <p class="a11y-demo__note">button has aria-label="Close"</p>
</div>
<style>
.a11y-demo { width: 340px; font: 14px/1.5 system-ui, sans-serif; color: #241430; display: flex; flex-direction: column; gap: 10px; }
.a11y-demo__row { display: flex; align-items: center; gap: 10px; }
.a11y-demo__img { width: 40px; height: 40px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; font-weight: 700; }
.a11y-demo__text { color: #241430; }
.a11y-demo__text--low { color: #FAF7F2; background: #FAF7F2; text-shadow: 0 0 0 #d8d2c8; }
.a11y-demo__icon-btn { width: 32px; height: 32px; border: none; border-radius: 8px; background: var(--accent); cursor: pointer; font-size: 16px; }
.a11y-demo__note { margin: 0; font-size: 12px; color: #241430aa; font-family: ui-monospace, monospace; }
</style>

tailwind

<div class="flex flex-col gap-2.5" style="width:340px;font-family:system-ui,sans-serif;color:#241430">
  <div class="flex items-center gap-2.5">
    <span role="img" aria-label="Mountain sunset" class="w-10 h-10 rounded-lg grid place-items-center font-bold" style="background:#A8E6C1">&#9633;</span>
    <p class="text-xs font-mono m-0 text-[#241430aa]">alt="Mountain sunset"</p>
  </div>
  <p class="a11y-tw-text">Body copy people can actually read</p>
  <button type="button" class="w-8 h-8 border-0 rounded-lg cursor-pointer text-base" style="background:#A8E6C1" aria-label="Close">&times;</button>
  <p class="text-xs font-mono m-0 text-[#241430aa]">button has aria-label="Close"</p>
</div>
<style>
.a11y-tw-text--low { color: #FAF7F2; background: #FAF7F2; text-shadow: 0 0 0 #d8d2c8; }
</style>

react

export function AccessibilityDemo({
  altOn = true,
  contrastOn = true,
  labelOn = true,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ width: 340, display: "flex", flexDirection: "column", gap: 10, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span role="img" aria-label={altOn ? "Mountain sunset" : undefined}
          style={{ width: 40, height: 40, borderRadius: 8, background: accent, display: "grid", placeItems: "center", fontWeight: 700 }}>{altOn ? "\u25A1" : "?"}</span>
        <p style={{ margin: 0, fontSize: 12, fontFamily: "ui-monospace, monospace", color: "#241430aa" }}>{altOn ? 'alt="Mountain sunset"' : "alt missing"}</p>
      </div>
      <p style={contrastOn ? {} : { color: "#FAF7F2", background: "#FAF7F2", textShadow: "0 0 0 #d8d2c8" }}>Body copy people can actually read</p>
      <button type="button" aria-label={labelOn ? "Close" : undefined}
        style={{ width: 32, height: 32, border: "none", borderRadius: 8, background: accent, cursor: "pointer", fontSize: 16 }}>&times;</button>
      <p style={{ margin: 0, fontSize: 12, fontFamily: "ui-monospace, monospace", color: "#241430aa" }}>{labelOn ? 'button has aria-label="Close"' : "button has no accessible name"}</p>
    </div>
  );
}