Nausikaä, CSS building blocks for accessible websites
Nausikaä is one stylesheet that makes plain HTML look good and work for everyone: with a keyboard or a screen reader, on a phone or a wide monitor, in light or in dark. And accessible does not have to mean boring.
It uses CSS classes as little as possible. There are a few for color and style, and hardly any for layout. Nausikaä does have opinions about how you structure your HTML, but hopefully not too strong.
- One stylesheet, 47 kB gzipped
- No JavaScript
- Light, dark and e-ink
- Free for everyone
Write HTML, Nausikaä does the rest
A button looks like a button, a table like a table and a dialog like a dialog, without a single class. Classes only come in where HTML has no word for something: a color, a size, or a pattern such as a navbar or a product card. The styling needs no JavaScript and no build step: getting started takes one line in your page.
<link rel="stylesheet" href="/styles/nausikaa.min.css">Underneath sit the things that are easy to forget: text with enough contrast, a focus style you can see, a light and a dark theme that follow the visitor’s settings, less motion for those who ask for it, and layouts that hold up on a phone and when zoomed in. There is a third theme for e-ink screens as well. Read what Nausikaä takes care of, and what is still up to you, under Accessibility.
See Nausikaä at work
The documentation starts with the foundations and goes on to elements, components, collections and utilities. Every part comes with a description, samples and the HTML to copy.
The examples put the parts together in the kind of pages people work in all day: an order overview, an invoice, a work list with a form, a calendar and a page of statistics. They all belong to one made-up company that supplies books to libraries.
Plain HTML in, a finished page out
On the left is all the markup there is, without a single class. On the right is what Nausikaä makes of it.
<h3>Reserve a book</h3>
<p>
We keep it at the desk for
<strong>three days</strong>.
</p>
<p>
<label for="reserve-title">Title</label>
<input type="text" id="reserve-title"
value="The Gardens of Alcinous">
</p>
<p>
<label for="reserve-place">Pick up at</label>
<select id="reserve-place">
<option>Northwest</option>
<option>Southeast</option>
</select>
</p>
<p><button>Reserve</button></p>
<table>
<tr>
<th>Copies</th> <th>On loan</th> <th>Free</th>
</tr>
<tr>
<td>4</td> <td>3</td> <td>1</td>
</tr>
</table>
<progress value="3" max="4">3 of 4</progress>Reserve a book
We keep it at the desk for three days.
| Copies | On loan | Free |
|---|---|---|
| 4 | 3 | 1 |
Good to know
Where it comes from
Nausikaä grew out of the daily tools of a bookseller: long lists, detailed records and large forms that people work in all day. The e-ink theme began with a family calendar on an e-reader.
What it does not do
A stylesheet can only do part of the job: headings in order, labels and alt texts stay up to you. And Nausikaä does not get everything right yet. The known limitations list where it still falls short.
Where it works
In every browser released since early 2021: Chrome and Edge from 89, Firefox from 75, Safari from 12.1. Older browsers skip a few details; nothing breaks. See browser support.