Respecting User Preferences On The Web

Session Summary:

Starting with reduced motion preferences, websites and apps are becoming increasingly aware of a user’s display preferences. Learn how this affects creating new interfaces.

Description:

Different users have different needs for their web experience. That difference is even greater between different types of disabilities – where one user needs high contrasts, another user might be sensitive to stark contrasts.

CSS gives developers simple, yet powerful tools to address those different needs for different users that are supposed to be supported in browsers and operating systems soon. In addition, some browsers go out of their way to provide even more customization options.

This talk analyzes the different, sometimes conflicting, user needs and shows potential solutions, depending on the user’s preferences. It will cover:

• High contrast mode: How to make sure the content and meaning is transported when high contrast mode is switched on.
• Dark mode: If the user uses dark mode, they expect your site to also conform to it so they are not getting dazzled by a sudden color change. Using the CSS media query prefers-color-scheme, a website can adapt to the settings in browsers or operating systems.
• Reader modes: Distraction free reading experiences are available in more and more browsers. They are an effective way for people with cognitive and visual disabilities to read content.
• Video Auto-Play settings: Autoplaying videos are one of the most distracting pieces of content. Browsers are taking steps to give the control back to users.
• Reduced Motion: Similar but different, allowing users to centrally turn off motion is helpful to avoid reactions to such content. This can be detected using the prefers-reduced-motion media query.
• Inverted colors: Detecting inverted colors can be useful if a color has a certain significance – for example when having swatches of color in a design guide.
• Transparency can make text harder to read. The new CSS feature prefers-reduced-transparency allows websites to take into account when users have indicated that they have issues with transparencies. They can then switch it off or change the layout accordingly.
• Contrast preference: In contrast to high contrast mode, this allows the website to pick a theme depending on the preferences of the user who can specify default, high and low contrast.
• Forcing Colors: When the user is overwriting colors on the website, it can lead to readability problems, especially when elements are displayed on top of each other. This setting lets you chose a different layout in case there is such a potential problem. In addition certain environmental conditions might influence how a website is styled, for example:
• Environment Light level: While normal contrast is totally fine to read indoors, in harsh sunlight, even a slightly higher contrast can make the difference between unreadable and readable. This proposed CSS property will help your website to adapt.
• Blending into the environment: When the content is used in heads-up displays (HUDs) or projected onto walls, the design considerations are different.

The talk will show practical implementations of those features, where available, and how to integrate them into the design of websites. Attendees will be much more aware of different user needs and how to avoid conflicts and respect individual preferences. Implementing preference awareness is not an engineering but a design challenge and the new CSS-related properties will make respecting those preferences much easier than ever before, improving the web experience for everyone.

Practical Skills:

• How media queries work
• What media query properties are available
• Implement the media queries in a useful way

Presentation Materials:

• Link to slide deck as provided by the speaker (external site) (external site) for