Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An inclusive web: using preference media queries to make your sites for everyone

UX Y'all
September 28, 2021

An inclusive web: using preference media queries to make your sites for everyone

UX Y'all 2021 Session with Kilian Valkhof

UX Y'all

September 28, 2021
Tweet

More Decks by UX Y'all

Other Decks in Design

Transcript

  1. An inclusive web - UX Ya’ll 2021 Kilian Valkhof An

    inclusive web: Using preference media queries to make your sites for everyone Kilian Valkhof
  2. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Responsive

    design The way a website adapts to screen sizes by reflowing and repositioning content as the available space allows
  3. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Responsive

    websites The way a website adapts to screen sizes by reflowing and repositioning content as the available space allows The way a websites adapts to user preferences, providing a better experience for each individual user
  4. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences forced-colors prefers-color-scheme prefers-reduced-motion prefers-reduced-transparancy prefers-contrast inverted-colors
  5. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-color-scheme
  6. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-color-scheme
  7. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-color-scheme
  8. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-color-scheme
  9. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-reduced-motion
  10. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-reduced-motion
  11. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-reduced-motion
  12. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-reduced-motion
  13. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Here

    be dragons 🐉
  14. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Network

    conditions: prefers-reduced-data
  15. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Network

    conditions: prefers-reduced-data
  16. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-contrast
  17. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-reduced-transparency
  18. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: prefers-reduced-transparency
  19. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Inverted

    colors and forced colors
  20. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: inverted-colors https://a11yproject.com/posts/operating-system-and-browser-accessibility-display-modes/
  21. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: inverted-colors
  22. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: forced-colors https://adrianroselli.com/2017/11/os-high-contrast-versus-inverted-colors.html
  23. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: forced-colors
  24. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences: forced-colors CanvasText Canvas HighlightText Highlight ButtonText ButtonFace LinkText GrayText text content background selected text selected text background button’s text button background link text color disabled text
  25. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User

    preferences forced-colors prefers-contrast inverted-colors
  26. An inclusive web - UX Ya’ll 2021 Kilian Valkhof polypane.com

  27. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Kilian

    Valkhof kilianvalkhof.com - @kilianvalkhof - polypane.com 👋 more: bit.ly/all-media-queries