Skip to content

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

@slafleche

Description

@slafleche

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions