In this tutorial, we’ll use HTML, CSS, and vanilla JavaScript to add an accessible theme picker component to a website.

After previously writing about the accessibility of Apple Health’s data visualizations, I felt inspired to recreate one of them with D3.js.

Apple’s design is an inspiration to many, but are their data visualizations screen reader accessible?

Data visualizations can be great to communicate complex data in an easy way, but only if they're made to be accessible.

Accessibility should always be a focus when designing products, and the same goes when working with data visualizations and graphs.

In this tutorial we'll use the box-shadow property to create a layered card component, and animate it on hover.

Earlier I remade the design of an old calculator entirely in CSS.

It's important for me that everything I design is both accessible, ethical and user friendly.