Last updated on 25 May 2020.
How to design accessible close buttons
- Mark it up as a button, e.g.
- Include accessible text, for example
- The overall size should be at least 44px
- Add styles for keyboard focus and mouse hover
- Consider adding an
- 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”)
<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
- #20 HTMHell special: close buttons from HTMHell
- Using the aria-label attribute 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
- Modals dialogues from Bulb Energy’s design system
- Modal dialogues from GOV.UK design system’s backlog
- Accessible Icon Buttons from Sara Soueidan
- aria-label Does Not Translate from Adrian Roselli