 Courses from Kayla Sween

Bite-size video tutorials for badass web developers.

egghead

In this talk, Kayla will address some common unintentionally exclusive web design and development practices and how to fix those problems to avoid being another website that SUX. Kayla will also present some resources to help developers create more inclusive websites.

This talk seems to interest people by just explaining to them accessibility and why we need to worry about it. It offers some simple ways to start thinking about designing and developing websites more inclusively. Accessibility is a large, sometimes complex, topic. I try to make it seem less daunting!

Designing for Inclusive User Experience

Cascading Style Sheets bring order and beauty to our applications.

We'll use flex to take two elements that have a default display value of "block" (each renders in its own line) and display them in columns.

Show Paragraphs in Columns with Flex

Kayla shows how to use the prefers-color-scheme media query in CSS to use system preferences to determine whether we need to display a website in light mode or in dark mode. This lesson starts in light mode and adds additional styles for dark mode (prefers-color-scheme: dark). However, this also applies when going from dark mode to light mode (prefers-color-scheme: light). The example only uses HTML and CSS, but you can use whatever front-end development method or framework you want as long as you can write media queries.

The first thing to do is to add the prefers-color-scheme media query for the color scheme you're responding to. Then, add CSS selectors for the corresponding HTML elements that need to change colors to your media query section. In this example, the elements that needed to change colors were the body, anchor tags, active navigation list item, and button. 

Use Media Queries to Adapt to a User's Preferred Color Scheme

We have three animating sections: one in the header and one for each of the two images. To honor the system preferences of the user, we can use the prefers-reduced-motion media query to turn off those animations. In this example, we'll change the animation-duration of the stretch, spin, and bounce classes to 0.01ms. This will allow us to effectively remove the animations without disrupting any JavaScript events that are watching for animationend. If you use the transition property, you could add transition-duration: 0.01ms to ensure the transitionend event isn't disrupted as well.

You can certainly stop there, but today, I don't want to completely remove all animation from the page. To add a less-obtrusive animation, we can rename the animation. In this example, we'll rename the stretch animation to pulse and allow that to move from half opacity to full opacity over 1.5 seconds.

It's worth noting that the prefers-reduced-motion media query is not compatible with Internet Explorer. If you support Internet Explorer, please consider removing animations that are prone to disrupt those with vestibular disorders and learning disabilities. If you're not sure if an animation would be distressing to someone, it's best option may be to remove it entirely.

Search Results

Designing for Inclusive User Experience

Show Paragraphs in Columns with Flex

Use Media Queries to Adapt to a User's Preferred Color Scheme

Use Media Queries to Adapt to a User's Motion Preferences