[csswg-drafts] [css-forms-1] Checkbox and radio sizing should meet WCAG (#12430)

lukewarlow has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-forms-1] Checkbox and radio sizing should meet WCAG ==
Per guideline 3 in https://drafts.csswg.org/css-forms-1/#basic-appearance-principles "The controls pass 100% of [WCAG 2.2 AA standards](https://www.w3.org/TR/WCAG22/)."

We should ensure controls meet https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

For checkbox, and radio inputs we currently have:

```css
input:is([type=checkbox]:not([switch]), [type=radio]) {
    width: 1em;
    height: 1em;
    ...
}
```

I propose we change this to:

```css
input:is([type=checkbox]:not([switch]), [type=radio]) {
    /* These min-size rules ensure accessibility by following WCAG rules:
    * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
    min-block-size: max(1em, 24px);
    min-inline-size: max(1em, 24px);

    /* This font-size rule ensures the checkmark fills the containing box. */
    font-size: max(1em, 24px);
    ...
}
```

cc @nt1m 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12430 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 1 July 2025 18:05:33 UTC