Build a toggle button with a clear state

A toggle button is a button whose pressed state can stay on or off. Use aria-pressed to expose that state, and keep the button’s accessible label stable. A form choice is often better represented by a native checkbox.

Working example

<button type="button" aria-pressed="false">Bold</button>
<p class="sample">Preview text</p>
<script>
  const button = document.querySelector("button");
  button.addEventListener("click", () => {
    const pressed = button.getAttribute("aria-pressed") !== "true";
    button.setAttribute("aria-pressed", String(pressed));
    document.querySelector(".sample").classList.toggle("bold", pressed);
  });
</script>

button {
  font: inherit;
  padding: 0.7rem;
  border: 2px solid #2563eb;
  background: white;
}
button[aria-pressed="true"] {
  background: #dbeafe;
}
.sample.bold {
  font-weight: 700;
}

<label
  ><input type="checkbox" name="email-updates" /> Email me project
  updates</label
>

label {
  display: block;
  padding: 0.7rem 0;
}

Try the keyboard

Tab to Bold and press Space or Enter. A native button provides those activation keys; JavaScript updates both the state and the actual formatting. The label stays “Bold” while aria-pressed changes.

A native checkbox uses Space to change its checked state. Its name and checked value can participate in form submission. Do not add aria-pressed to it: native checked semantics already describe the choice.

An action whose label changes between “Show” and “Hide” may instead use aria-expanded to describe a disclosure. Choose the state that matches the behavior; visual resemblance alone does not make every two-state control a switch. See the button reference and form learning path.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.