WCAG 2.2 target size on Shopify: where small buttons hide and who fixes them

Why might your checks miss it?

This rule is newer than many checks. It arrived with WCAG 2.2, first published October 5, 2023. A check set up for WCAG 2.1 or earlier has no test for it.

W3C’s own working group recommends that sites aim for WCAG 2.2, even if formal obligations mention earlier versions. So ask whoever checks your store one thing. Do your checks include WCAG 2.2’s target size rule?

Where do small targets hide on a Shopify store?

Here are three kinds to look for.

• Chat buttons. Two chat apps can put their buttons in the same corner. One can sit over the other, leaving only a sliver of the lower one to tap.
• Close buttons on pop-ups. Think of a chat app’s “How can we help?” bubble, or a sign-up teaser. These close buttons can be small and sit close to other things. Then room can’t save them.
• Little icons in checkout. These are the small question marks beside fields that tell you more when you tap them.

Whose fix is each one?

Chat buttons are yours to move. Each chat app keeps its position in its own settings. For Shopify Inbox, that’s the theme editor, under App embeds. Chatty lets you pick its corner, nudge its margins and choose a button size. Other chat apps may offer the same, so look in yours.

A chat app’s close button is its maker’s. Its size is set in the app’s own code. Tell them it’s hard to tap.

Checkout icons are Shopify’s. The checkout’s code belongs to Shopify, and no store can change it. Shopify’s own report on its checkout says some of these icons have “small touch target size”. Write to Shopify at accessibility@shopify.com.

Anything in the theme itself goes to your developer, or to whoever made the theme.

What if one button covers another?

When two buttons overlap, W3C doesn’t count the covered part. So a half-hidden button only counts for the part you can still tap.

W3C does let a button off while something like a cookie banner briefly covers it. But the button on top still has to pass.

Here’s the catch. W3C’s examples all come and go: a list of suggestions, a pop-up, a cookie banner, a survey. A chat button loads with the page and stays. We can’t say for sure how W3C would count the one underneath.

The simple way out: one chat button per corner. Then there’s nothing to decide.

Why did a report fill up overnight?

When someone starts checking a rule they didn’t check before, a report can fill up in a day. Nothing on your store has to change for that to happen. Most likely, what the new check found was there all along.

So ask one question first. Did the store change, or did the checks?