Skip to content

Accessible close buttons

Last updated on 25 May 2020.

How to design accessible close buttons

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