Code block

A code example with a filename bar and an accessible copy-to-clipboard button.

Code block

accessible-button.html Copied 
<button class="ewa-btn ewa-btn--primary" type="button">
  Save changes
</button>

Using the code block accessibly

Use it whenever you show copyable code, so people can read, select, and copy it with or without a mouse.

Do

  • Give the copy button a real accessible name, such as "Copy code".
  • Announce success through a polite live region that says "Copied" without moving focus.
  • Keep the code text selectable so it can be copied even when JavaScript is off.

Don't

  • Don't copy the code automatically or move focus to the button on its own.
  • Don't trap keyboard focus inside the block.
  • Don't rely on an icon-only button with no text name.

Build it right

  • Mark up the code with <pre><code>.
  • Wire the copy button's "Copied" message to a polite aria-live region.
  • Let long lines wrap, or make the scroll region keyboard-focusable.
  • Keep the rendered code selectable as a no-JavaScript fallback.

The source CSS for this component lives in assets/css/components/code-block.css.