Accessible close buttons

A short post about designing close buttons with SVG icons and accessible mark-up.

How to design accessible close buttons

  • Mark it up as a button, for example <button type="button">…</button>
  • Include accessible text, for example<button>Close</button> or aria-label="Close"
  • The overall size should be at least 44 pixels in height and width
  • Add styles for keyboard focus and mouse hover
  • Consider adding an <svg> icon
  • If you use the multiplication/times character (×), be sure to hide it from screen readers with aria-hidden="true" (so it's not read out as "times")

Example mark-up

<button type="button" aria-label="Close">
<svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
<path d="M0.549989 4.44999L4.44999 0.549988L43.45 39.55L39.55 43.45L0.549989 4.44999Z" />
<path d="M39.55 0.549988L43.45 4.44999L4.44999 43.45L0.549988 39.55L39.55 0.549988Z" />
</svg>
</button>

Update 11 May 2020

Adam Silver suggested that using a visible text label with the icon (or even just visible text, with no icon) would improve accessibility for voice dictation software users.

Update 25 May 2020

Manuel Matuzović has written a great round up of close button bad practices and a range of solutions on HTMHell.

Further reading