I'm an experienced independent developer, designer and educator. I specialize in building accessible and inclusive products, and have a particular focus on dataviz accessibility.
In 2020 I reviewed the dataviz accessibility of the US presidential election results (spoiler: it was bad), and in 2023 I did the same with the dashboards used for the Norwegian government elections . So naturally, I had to inspect the accessibility of this year's US election graphs as well. Just like in 2020, I discovered quite a lot of accessibility issues for all of the dashboards. Most of…
During the 2020 presidential election night in the United States, I reviewed the data visualizations used by the major US news networks , and used it to illustrate some dataviz accessibility dos and don’ts. Now that Norway had its local elections (we were voting for a new regional and city government), it's time for a repeat of the concept and take a closer look at the dataviz accessibility of the…
It's the end of the year, which means time to look back at what has been and write a year in review blog post about it. Because it's been silent on my blog for a while, I decided to combine it with another post that's long overdue: a recap of my first year (and a half) of freelancing. In 2021, after roughly 7 years of working in tech, I decided to quit my job as a senior front-end developer in…
In the recent refresh of my website’s design I implemented different theming options. It’s now possible to choose between six different color schemes when reading my blog. The need for more than just a light theme and dark theme came from the fact that personally, when I get bad migraines and headaches, low contrasting colors feel easier on my eyes, so I wanted to at least add a dark low-contrast…
After previously writing about the accessibility of Apple Health’s data visualizations , I felt inspired to recreate one of them with D3.js. I already covered some of the basics in the form of a bar chart , so this time I decided to go for a different type of graph: the activity rings. Before we start While we will build the graph together step by step, this tutorial does require some previous…
As I pointed out in my previous article about Google’s discrimination against non-binary people , tech doesn’t exist in a vacuum. What we create has an impact on people’s lives and affects even entire communities. There’s a lot that can go wrong, and as a non-binary person I experience a lot of it on a daily basis ( and wrote an entire article about it a while back ). Having my pronouns in my…
What happens when we don’t include trans and non-binary people in our products? How do our products cause harm? Why is education so important and change so hard? The Markup’s discovery that Google allowed advertisers to exclude non-binary people from job and housing ads , while blocking them from excluding men or women for those ads, is a great example of what happens when we don’t include or…
Ever since getting the Apple Watch in November, I’ve been looking at my Apple Health & Activity data on a daily basis. After being disappointed by all the inaccessible graphs around the US Presidential Elections, I wanted to find out how Apple’s visualizations are handled by VoiceOver. They’re an inspiration to many when it comes to visual design, so I was especially wondering if we can use them…
Tech is all around us, developing fast, and not going away. Which is why ethics should be a part of the design and engineering curriculum, and a focus for everyone working in the industry. Earlier this year I wrote about what it's like navigating the internet as a non-binary person and the harm transphobic AI can cause . There were also stories about social media apps using facial recognition…
In the days around the 2020 US presidential elections a lot of people have been following predictions, results and exit polls quite closely. The majority of news sources published plenty of visualizations, but very few of them in an accessible format. Let’s take a look at some important aspects of accessible data visualizations, based on what The New York Times , CNN , FiveThirtyEight , The…
Earlier this week Genderify, an AI-driven platform that “identifies” users’ gender based on their name, launched and listed themselves on ProductHunt. They received a lot of very valid criticism both on ProductHunt and other social media, but I think they’re worthy of some more criticism from me on here as well. Let’s start by taking a closer look at what Genderify really does. This is what they…
Earlier I wrote a twitter thread about small things designers can do to make their products more inclusive for trans and non-binary people. It’s a topic quite close to my heart, since I am non-binary myself, so I want to address some of the points in a proper post as well. As I mentioned in the tweets, there’s more to trans/non-binary inclusive design than what will be discussed in this post, and…
Data visualizations can be great to communicate complex data in an easy way. Unfortunately, there's a lot that can go wrong when it comes to accessibility. A few weeks ago I decided to navigate one of the highest listed COVID-19 dashboards with VoiceOver, and I barely could make it past the first graph before closing my browser in frustration. Your browser does not support the audio element. But…
You might have seen my CSS Polaroid camera and a calculator already, and now I re-created another iconic product: Apple's Macintosh, released in 1984. See the Pen macintosh.css by Sarah Fossheim ( @fossheim ) on CodePen . The process I followed to recreate it is pretty much the same as described in the polaroid tutorial , so I suggest reading that one as well to get a full overview. Identifying…
Weapons of Math Destruction by Cathy O'Neil I've always had a strong interest in both UX and everything data science related, but reading this book in 2017 helped me realize I really wanted to work at the intersection of the two, and it has been a great motivation to read more on the subject of ethical AI. The book illustrates how algorithms can, intentionally or unintentionally, harm minoritized…
When updating my portfolio design, I wanted to create a component that automatically displays similar posts at the bottom of each blog post. Because I couldn't find any tutorials on how to achieve that, I thought it would be a good idea to share my solution. There's different ways of defining similar posts, but I decided to go for a simple first version: posts are considered similar to each other…
In this tutorial we'll use the box-shadow property to create a layered card component, and animate it on hover. See the Pen Rainbow stacked cards 2 by Sarah Fossheim ( @fossheim ) on CodePen . The box-shadow property explained To add shadows to a box we'll need to specify several things in the box-shadow property: x-offset : Position on the x-axis. A positive value moves the shadow to the right, a…
Domain experts aren't always expert users It's not because someone is an expert in their field, that they are (or will become) expert users of your product. In fact, they might not even be confident with technology at all. But often people seem to assume the opposite. They probably know a lot about what they'll be working with and understand the core functionality quite well. But that doesn't…
Earlier I remade the design of an old calculator entirely in CSS. I had a lot of fun making it, so I decided to do the same with a Polaroid camera this time. In this tutorial I'll guide you through my process, and explain how to replicate a physical product in CSS yourself. Since this is a rather large project I won't go through every component individually, but the full code is available on…
Recently I came across the design of the Abatron 803 , a calculator from 1975. I thought it looked really good, so I decided to recreate the design in HTML/CSS. See the Pen Abatron 803 replica in CSS by Sarah ( @fossheim ) on CodePen . I only used fonts from Google Fonts, so the type is not an exact match, and I also simplified the design a bit. The bars on top are made with gradients as part of…
To add a gradient overlay to a text element, we need to set three different CSS properties to the text we want to style: background-image: <gradient> background-clip: text text-fill-color: transparent Step 1: Add the gradient as a background In this example we'll use a linear gradient, which can be drawn this way: .gradient-text { background-image: linear-gradient(45deg, #f3ec78, #af4261); } To…
Accessibility should always be a focus when designing products, and the same goes when working with data visualizations and graphs. First and foremost because the full product should be accessible, but also because data visualizations often contain important information that users have to act upon. Accessible graphs also translate into better understandable graphs for everyone. Currently I'm…
It's important for me that everything I design is both accessible, ethical and user friendly. And to be fair, the three really go hand-in-hand. A product cannot be friendly if it's harmful or inaccessible. Interfaces can be aesthetically pleasing, while also remaining accessible. And luckily, these days there are a lot of tools out there to help us achieve that! Figma plugin: Color Blind Color…
Earlier I wrote a tutorial on how to split text and render the letters or words as separate spans in React. We will build further on that code to style and animate characters in a string with CSS. First, we'll look at how to give letters different colors, then we will animate them. The result will be an animation like this: See the Pen React text splitting: animated random colors by Sarah (…
Recently I needed to animate the individual characters in a heading element. I was hoping there would be a convenient css-only solution, similar to :nth-child(i) , but unfortunately that doesn't exist. So I decided to research how to achieve something similar, and accessible, nonetheless. HTML My first idea was to wrap each character in a separate <span> element manually. <h1>…
Earlier we solved the first day of the Advent of Code 2019 challenge. Now, let's take a look at how to solve the second puzzle. The problem is pretty straight-forward. We get a list of numbers, that we split up in groups of four. In a sequence of four, the first number refers to which operation we have to perform. 1 = addition 2 = multiplication 99 = substraction The next two numbers give the…
I've been really excited to work on the advent of code challenges this year again. If you don't know the concept, it's basically an advent calendar with programming puzzles that gradually get more difficult. Each day has two challenges that are related to each other, and they can be solved using any coding language or software. While I'm not planning to compete for points in any leaderboard, my…