The support of CSS Grid in modern browsers has opened up layout possibilities like never before. We can create more complex designs with fewer elements than we could with Flexbox alone. But when you think of CSS Grid, you generally think of a boxy layout, right?
Last week I got the opportunity to work on a side project that has no plans to include IE11 in the support matrix and let me tell you; what a wonderful feeling! This opens the door to a lot of fun CSS, namely Custom Properties. Adding a proper “Dark Theme” to the application has been on the backlog for awhile… I settled on a solution where I can layer in the ability to theme my application but also maintain some of the power of Sass in the process.
I’m not going to lie: this is all tricky and time-consuming to do. However, focus management and a sensible, usable focus order is a Web Content Accessibility Guideline. It’s important enough that it’s considered part of an international, legally-binding standard about usability.
What’s the first thing that comes to your mind when you think of “CSS and accessibility”? Maybe text size, color contrast, or DOM order. Important topics, without question, but there’s a lot more to consider when writing inclusive CSS. This talk aims to help you create better interfaces by adapting to your users’ needs. You’ll learn how to debug and test with CSS, how attribute selectors can improve accessibility, and when CSS affects the semantics of your HTML.