Accessible close buttons
- Author Benjy Stanton
- Date (updated 4 February 2024)
- Categories
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>
oraria-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 witharia-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
- #20 HTMHell special: close buttons from HTMHell
aria-label
from MDN web docs- ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used from W3C
- Accessible Modal Dialogs from Scott O'Hara
- Target Size and 2.5.5 from Adrian Roselli
- Modal dialogues from GOV.UK design system's backlog
- Accessible Icon Buttons from Sara Soueidan
- aria-label Does Not Translate from Adrian Roselli