design-system icon indicating copy to clipboard operation
design-system copied to clipboard

Published 20 hours ago • verified publisher icon CMSgov

Add to the radio and checkbox inputs to meet WCAG 2.1 target size standards

Open danbivins opened this issue 4 years ago • 2 comments

Description

  • Currently the checkbox and radio input components have a touch target of 32px (height) (see attached screenshot)
  • Per the WCAG 2.1 standards, we should provide a touch target size of 44x44px. This will benefit our mouse (and other pointer type) users as well as those on mobile who may struggle with fine motor control.

Check out the documentation here https://www.w3.org/WAI/WCAG21/Understanding/target-size.html

checkbox

danbivins avatar Nov 16 '20 20:11 danbivins

Tracked in Jira here - https://jira.cms.gov/browse/WNMGDS-702

line47 avatar Nov 17 '20 18:11 line47

There are a few ways I'm thinking we could tackle this

  • Increase the padding around the radio/checkbox to meet the 44px min height
  • Increase the checkbox itself to meet the 44px min height
  • Some combination of making the checkbox larger and adding padding around the radio/checkbox

line47 avatar Apr 19 '21 20:04 line47

Closing this as we are fine for AA standards and the standard I listed above is AAA.

danbivins avatar Nov 28 '23 18:11 danbivins