Modern CSS Upgrades To Improve Accessibility
Modern CSS Solutions • 2026-04-04 16:12

Modern CSS Upgrades To Improve Accessibility

Accessibility is a critical skill for developers doing work at any point in the stack. For front-end tasks, modern CSS provides capabilities we can leverage to make layouts more accessibly inclusive for users of all abilities across any device. This post will cover a range of topics: Focus Visibility Focus vs. Source Order Desktop Zoom and Reflow Sizing Interactive Targets Respecting Color and Co...

0 0
16m read
Developing For Imperfect: Future Proofing CSS Styles
Modern CSS Solutions • 2026-04-04 16:12

Developing For Imperfect: Future Proofing CSS Styles

How do we plan future-proof styles in a world with an infinite degree of device and user ability variance? Let's explore how things can break and how modern CSS provides solutions. This episode will cover handling for: variable content length and overflow unpredictable media sizes internationalization accessibility-related user settings We'll explore creating a robust comment thread compon...

0 0
16m read
Dataviz accessibility principles, demonstrated by the 2024 presidential election dashboards.
Sarah Fossheim's Blog • 2026-04-04 16:12

Dataviz accessibility principles, demonstrated by the 2024 presidential election dashboards.

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 these...

0 0
21m read
Dataviz accessibility review: what we can learn from the Norwegian 2023 election graphs
Sarah Fossheim's Blog • 2026-04-04 16:12

Dataviz accessibility review: what we can learn from the Norwegian 2023 election graphs

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 ...

0 0
16m read
Sarah Fossheim's Blog • 2026-04-04 16:12

Looking back at the past year (and a half) of accessibility work.

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 fav...

0 0
8m read
Building an accessible theme picker with HTML, CSS and JavaScript.
Sarah Fossheim's Blog • 2026-04-04 16:12

Building an accessible theme picker with HTML, CSS and JavaScript.

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 ...

0 0
10m read
How to create a screen reader accessible graph like Apple's with D3.js
Sarah Fossheim's Blog • 2026-04-04 16:12

How to create a screen reader accessible graph like Apple's with D3.js

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 know...

0 0
9m read
Getting started with trans inclusive design: tools and resources
Sarah Fossheim's Blog • 2026-04-04 16:12

Getting started with trans inclusive design: tools and resources

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 profile...

0 0
8m read
Excluding non-binary people by design: How sign-up forms can lead to discrimination
Sarah Fossheim's Blog • 2026-04-04 16:12

Excluding non-binary people by design: How sign-up forms can lead to discrimination

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 prior...

0 0
4m read
What we can learn from Apple's dataviz accessibility
Sarah Fossheim's Blog • 2026-04-04 16:12

What we can learn from Apple's dataviz accessibility

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 th...

0 0
7m read
I launched a directory with ethical design resources
Sarah Fossheim's Blog • 2026-04-04 16:12

I launched a directory with ethical design resources

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 faili...

0 0
1m read
How (not) to make accessible data visualizations, illustrated by the US presidential election.
Sarah Fossheim's Blog • 2026-04-04 16:12

How (not) to make accessible data visualizations, illustrated by the US presidential election.

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 Guardian ...

0 0
10m read
PQINA • 2026-04-04 16:12

Updating CSS Border Radius When A Container Is Overflowing

In this article we’ll create a container element that dynamically adjusts its border-radius when its contents overflows. This week I learned about corner-shape via nerdy.dev. This led me down the path of adding big squircle corners to code blocks in the FilePond documentation. Great! But unfortunately they looked terrible when the scrollbar was active. I wondered if I could detect (with CSS only) ...

0 0
3m read
PQINA • 2026-04-04 16:12

How To Disable Right Click With JavaScript

In certain situations it might be useful to disable the browser right click context menu functionality. In this article I’ll quickly show you how it’s done. As the context menu is an important user interaction pattern we of course shouldn’t disable it lightly, let’s take a look. In my case I wanted to disable the right click interaction because it creates very strange situations when users drag an...

0 0
2m read
Crop An Image With Canvas
PQINA • 2026-04-04 16:12

Crop An Image With Canvas

Cropping images in the browser can be done with the HTML5 canvas element. In this tutorial we’ll load an image from a local URL, crop the image, and present the result on the same page. Okay, first we need an image. Let’s use the image below, it’s located at the URL: https://pqina.nl/media/test.jpeg Our next goal is to load this image into a canvas element. Loading an image in a canvas element To...

0 0
4m read
PQINA • 2026-04-04 16:12

Using CSS Color-Mix() to lower anchor underline opacity

A tiny code sample showing how to use the CSS color-mix function with currentColor to automatically lower the opacity of anchor underlines. We can use CSS color-mix to mix two colors and get a new color. The currentColor property holds the selected elements color value. Let’s combine them. a { text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); } In this link to the...

0 0
1m read
PQINA • 2026-04-04 16:12

Building A Birthdate Input Custom Element

In this article we look at a <birthdate-input> custom element that automatically orders input fields based on the browser locale. Useful for asking your customers to input their birthdate without presenting them with a datepicker. Why not a datepicker? Because humans remember their birthdate as a string of numbers and the day of the week is not relevant. Entering those numbers is easier than...

0 0
2m read
PQINA • 2026-04-04 16:12

Animating And Transitioning CSS Custom Properties

This code animates a CSS property, and transitions a custom CSS property. The transition property is used in the animation. This combination works on Chrome, but unfortunately fails on Firefox and Safari. See animation below, followed by the code snippet. The Bar element should pulse, but at the start of the animation pulses should start at low opacity (similar to Foo) and slowly fade in, which is...

0 0
1m read
PQINA • 2026-04-04 16:12

Creating CSS Spring Animations With The Linear Easing Function

While developing FilePond I wanted to run a CSS powered spring animation, but the CSS API didn’t support it natively. So I built this tiny tool to generate linear easing functions that simulate spring animations in CSS. The app below uses a Svelte spring to animate a transition from 0 to 1, it then records the spring steps and converts them to a linear() CSS transition. As a bonus it also creates ...

0 0
1m read
Using Web Bluetooth To Read BBQ Temperature Sensor Data
PQINA • 2026-04-04 16:12

Using Web Bluetooth To Read BBQ Temperature Sensor Data

In this short read we’ll explore the Web Bluetooth API. We’ll connect with my Bluetooth BBQ thermometer. Then we’ll try to read out its data and listen to its temperature updates. At the end of the article you’ll have a good idea about what you can do with the Web Bluetooth API. A couple months ago we purchased the Hermanos Grill 5.0 Bluetooth BBQ thermometer. It supports up to 6 temperature senso...

0 0
9m read
Previous Next