Re: [mediaqueries] CSS "prefers-" media features (from TPAC discussion)

It's almost a year since our initial discussion at TPAC 2014, but since TPAC 2015 is coming up, I'm re-raising several visual design accessibility-related media features we discussed last year.

Please don't let this thread derail into what designers "should" and "should not" do. Visual design is subjective, and we take a realist approach to accessibility: allow designers to design the primary user interface, while allowing end users to adjust the interface to fit their needs.

> On Oct 30, 2014, at 4:34 PM, James Craig wrote:
> 
> Thanks for discussing this topic during the CSS WG meeting at TPAC. I think it's important to raise the new distinction of a "prefers-" media feature as opposed to an applied one. For example, some of the iOS 7+ and OS X Yosemite (10.10) settings might be exposed as:
> 
> • prefers-reduced-motion
>  Allows certain views to remove or tone down animations. For example, launching an app
>  on iOS 7 and iOS 8 changes to a subtle dissolve animation rather than a full-screen zoom.

Platform preference is shipping on iOS, watchOS, and tvOS.

Customers regularly mention to us that common web site patterns (e.g. horizontal carousels) cause vestibular issues such as dizziness or vertigo. Web developers ought to be able to achieve a similar solution that app developers can achieve natively.

Some background.
http://simplyaccessible.com/article/balance-awareness/

> • prefers-reduced-transparency
>  Allows certain translucent views to switch to an opaque rendering.

Platform preference is shipping on iOS, OS X, watchOS, and tvOS. This increases readability for certain individuals with vision impairments.

> • prefers-differentiation-without-color (this media feature name needs work)
>  Allows certain views to change from color-dependent renderings. Messages app on OS X changes 
>  status icons from red/green/orange circles to red squares, green circles, and orange triangles.

Platform preference is shipping on OS X, with some similar app-specific settings on iOS. For example, change this setting on OS X, and the Messages status icons change from colored circles to colored shapes. Mail on iOS has a preference for flag shapes. 

This can increase general usability and is obviously useful for people with color-blindness, estimated at about 4% of the world's population.

> Changing these user settings don't change the rendering of anything. It just conveys a user preference that allows the frameworks, native apps, or web apps to adjust for this user preference/desire/need.
> 
> I should also note these proposed names don't fit well within the "none or truthy" pattern of some existing media features. It'd be awkward to specify that "prefers-reduced-motion: none" means "user is okay with animation." The none value here may be open to misinterpretation, so please consider a "default" or "no-preference" value that behaves like "none" for boolean comparisons.
> 
>  prefers-reduced-motion: [ default | reduce ];
>  prefers-reduced-motion: [ no-preference | reduce ];
> 
> Thanks for considering,
> James