Building Inclusive Experiences with CSS and SVG

Tuesday, 23rd – 10:40

Just like their range of skills, the front-end developer's responsibilities may vary across teams, but one things remains the same: a front-end developer can either make or break a user's experience. We build the interface that users interact with, and how we do it has a direct impact on how the user feels when they do, and most importantly, whether or not they can use it properly.

CSS is one of the most powerful UI tools in our arsenal. In this talk, Sara will show a wide range of possibilities that CSS offers to improve the overall user experience of your UI. She’ll talk about theming and optimizing your UI for foreign and uncontrollable environments. We'll cover how we can use css variables in combination with the HSL color format to create performant live themes that are also maintainable and dev- and designer-friendly. We'll talk about some very simple things you can (and should) do in your CSS, markup, and using SVG, to optimize your product for Windows High Contrast Mode (WHCM) and other foreign environments, and what we can learn from the latter about making our UIs generally more inclusive.

We’ll be talking about a few fairly new CSS media queries as we go, and how we can make our interface respond to system user queries. You’ll learn how to take advantage of the full power of CSS Variables to offer your users a way to customize your product's interface to their needs. All this within the context of accessibility and UX best practices.