[Accessibility, UX] New WCAG target size accessibility requirements

[gpeuc]

Hello dear VS Code people!

There's a new WCAG accessibility requirement to make targets have 24px area:

https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

To clarify, this doesn't mean hit area, so it doesn't mean that icons have to be 24×24px big, because margins count as well.

So for example, these icons are OK because it's 20×20 icon, but it has 4px margin on the right, and that makes the whole space actually have 24px "safe" area.

However, there are some places in VS Code that are just a little bit shy of 24px.

For example, this is 23px tall.

File browser is 22px.

---

The question is: are you investing some effort into bumping up these sizes so that they meet the 24px target size requirement?

The main reason I am asking is that we build products inside VS Code, and these products follow strictly what the parent design system is doing (so what VS Code designers are doing). And we have a slight conflict here, because from SAP's side we would like to follow WCAG guidelines in order to be accessibility compliant, however, we would also like that our products feel like they belong into VS Code environment and not look like Frankenstein monster stapled together. 🧟‍♂️

[isidorn]

We are thinking about this. Our understanding that this requirement is still not "active" which gives us more time to tackle it. Having said that, it would still help if you have already identified all the places where we are not respecting this requirement.

fyi @daviddossett

[gpeuc]

Regarding the "active" requirement. The standard itself is live. It's active. It's just a decision by the various companies now how to implement it and on which timeline. From our side (SAP) we have one year to implement the changes brought to us by the WCAG 2.2 standard. Of course, I don't know Microsoft's inner workings and what are your decisions on how to implement the changes or are you even aiming to implement them.

At the moment, the places where I found this 24px standard not met are various line items that are stacked vertically one on top of another. So Command Palette, File Browser, regular Dropdowns, vertical menus, and so on. And those are 1-2 pixels off.