Do / Don't compare

A side-by-side do/don't comparison that pairs colour with a word and an icon.

Do / Don't comparison

Do

Give every control a visible text label, so its purpose is clear without relying on an icon or color alone.

Don't

Don't ship an icon-only button with no accessible name — screen-reader users hear only "button" with no idea what it does.

Using the do / don’t comparison accessibly

Use this pattern to contrast a recommended approach against a mistake side by side, so people can quickly tell the two apart.

Do

  • Label each column with the word “Do” or “Don’t” alongside its icon.
  • Use real headings so screen readers announce the structure.
  • Keep both columns reachable by keyboard and screen reader.

Don't

  • Don’t rely on red and green alone to tell the columns apart (1.4.1).
  • Don’t put the only explanation of a point in colour.
  • Don’t style headings as plain bold text instead of real headings.

Build it right

  • Pair every colour cue with a text label and an icon — never colour alone (1.4.1).
  • Use real <h3> headings for each column so the structure is announced.
  • Ensure both columns are reachable and operable by keyboard and screen reader.
  • Keep heading order logical, with column headings nested under this section.
  • Give icons aria-hidden="true" so the word carries the meaning.

The source CSS for this component lives in assets/css/components/compare.css.