Pinch, drag and tilt gestures with no button

A homeware shop shows an enamel mug in a 360-degree view: twelve photos taken round it, one every 30 degrees. Under the photo it says "Drag to turn. Pinch to zoom." Drag sideways and the mug turns. Spread two fingers on a phone and it zooms in, and once zoomed, a drag moves the photo around so you can read the small print on the back. On a phone, the mug also turns as the phone tilts, from the moment the page loads. There are no buttons. With a mouse, the zoom can't be reached at all, and the drag is the only way to see the back of the mug. Lay the phone in a stand or hold it in a shaking hand, and the mug never stops turning.

Each action hangs on a gesture, and none has a control of its own. The pinch is a multipoint gesture, and WCAG 2.5.1 asks for every function that uses one to work with a single pointer and no path, such as a tap on a Zoom in button; failure F105 names the missing alternative. Turning the mug and moving the zoomed photo need the pointer held down while it moves, which is a dragging movement, and 2.5.7 asks for a way to do the same with single clicks or taps (F108). The tilt is device motion, and 2.5.4 asks for two things: a control that does the same, and a way to turn the response to motion off (F106). No browser tells a page about the phone's own setting for motion input, so that switch has to be on the page.

On a phone, the view often fills the width of the screen. With touch-action: none, a finger that lands on the photo can't scroll the page either, so the gestures also trap anyone who only wanted to get past the mug to the price.

4 of 10 groups affected

• No vision (affected)
• Low vision (not affected)
• Colour vision (not affected)
• No hearing (not affected)
• Hard of hearing (not affected)
• No speech (not affected)
• Motor (affected)
• Reach, strength (affected)
• Cognitive (affected)
• Seizures (not affected)

• Limited manipulation People who point with one finger, a stylus, a mouth stick, a head pointer or a mouse have only one pointer, so a pinch is out of reach, and switch and voice control users can't hold and drag either. Nothing on the page turns or zooms the product without those gestures.
• Limited reach and strength A shaking hand turns the mug every time the phone moves, and a phone fixed to a wheelchair mount turns it with every bump. Holding two fingers steady for a pinch, or a drag to the right frame, is hard work for weak or tired hands.
• Without vision With VoiceOver or TalkBack on, a drag or a pinch on the photo goes to the screen reader, not the page, so the product can't be turned or zoomed, and nothing on the page says it could be.
• Limited language, cognitive and learning abilities The instruction mentions dragging and pinching but not tilting, so the product turning by itself while the phone moves is a surprise, and there is no way to make it hold still.

The markup is an image in a figure, with alt text and a caption, and every scanner passes it. A pinch handler, a drag handler and a deviceorientation listener leave nothing in the DOM. The audit asks the browser for the page's listeners and flags a page that listens for device motion or orientation, and a large picture or canvas that takes every touch for itself with touch-action: none and has no button in it or beside it. Both are leads for a person: only someone trying the view can tell whether each gesture has another way in. Asked to fix it, AI tools often make the view focusable and turn it with the arrow keys, which helps keyboard users but still leaves a mouse or one finger to drag and pinch; or add aria-label="Drag to rotate", which tells a screen reader user about a gesture they can't make; or stop the tilt only under prefers-reduced-motion, which is about animation on screen, helps only people who found that setting, and still leaves no button.