csswg-drafts icon indicating copy to clipboard operation
csswg-drafts copied to clipboard

[mediaqueries-4] Add `prefers-handedness` media query for left/right-handed users

Open slafleche opened this issue 2 months ago • 3 comments

I propose adding a new media query to detect user handedness preference, similar to existing prefers-* queries like prefers-reduced-motion and prefers-color-scheme.

Proposed syntax:

@media (prefers-handedness: left) {
  /* Styles for left-handed users */
}

@media (prefers-handedness: right) {
  /* Styles for right-handed users */
}

Use case: Handedness significantly affects UI interaction, particularly on mobile devices where touch targets and navigation controls should ideally be positioned for comfortable thumb reach. Approximately 10% of the population is left-handed, yet most mobile UIs default to right-hand optimization.

Practical applications:

  • Positioning floating action buttons and navigation controls on the appropriate side
  • Mirroring toolbar layouts for thumb accessibility
  • Adapting swipe gesture directions
  • Optimizing one-handed mobile interface layouts

Current situation: Developers currently have no way to detect handedness preferences without building custom in-app settings. This forces users to adapt to right-handed defaults or requires each app to implement individual solutions.

Precedent: This follows the established pattern of existing accessibility and preference media queries (prefers-reduced-motion, prefers-contrast, prefers-color-scheme, etc.) that expose OS-level user preferences to web content.

OS integration: Many mobile operating systems already have handedness settings (particularly for keyboard placement). This media query would expose that existing preference to web applications.

This seems like a straightforward accessibility improvement that would benefit a significant portion of users with minimal implementation burden.

slafleche avatar Dec 13 '25 16:12 slafleche

This seems like a straightforward accessibility improvement that would benefit a significant portion of users with minimal implementation burden.

Main concern here would be how much the accessibility improvement is vs the extra fingerprinting vector that we expose, fwiw.

emilio avatar Dec 14 '25 18:12 emilio

Main concern here would be how much the accessibility improvement is vs the extra fingerprinting vector that we expose, fwiw.

It's a reasonable point, but I'm skeptical it's any worse than light/dark mode in isolation, and I feel more concerned about "slippery slope" arguments against accessibility attributes than in favor of them.

linc avatar Dec 14 '25 19:12 linc

Sure sure, not particularly against this feature tbh, just pointing out that it's never so straight-forward as it seems :)

emilio avatar Dec 14 '25 19:12 emilio

On desktop, left-handed users can flip buttons or use a left-handed mouse, so the issue largely disappears. On mobile, there’s no equivalent. Handedness directly affects reach and accuracy, yet the web exposes zero signal for it. We already expose more detailed device and interaction signals (safe-area insets, pointer types). For a single boolean, the accessibility benefit vs added fingerprinting risk is unusually favorable for ~10% of users.

slafleche avatar Dec 19 '25 18:12 slafleche