-
Notifications
You must be signed in to change notification settings - Fork 759
Description
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.