Accessibility

A website is accessible when everyone can use it: people who navigate with a keyboard, people who rely on a screen reader or magnification, people with low vision or color blindness, and people on a slow connection or a small screen. Nausikaä is built to make that the default outcome rather than extra work.

A stylesheet can only do part of the job, though. This page describes what Nausikaä takes care of, what remains up to you, and where Nausikaä still falls short. The guidelines referred to are the Web Content Accessibility Guidelines (WCAG), level AA.

What Nausikaä does

Native elements Nausikaä styles the HTML elements themselves instead of replacing them with look-alikes. A styled <button>, <select> or <dialog> keeps all the keyboard behavior and screen reader support the browser gives it.
Readable contrast Text colors are chosen to reach a contrast ratio of at least 4.5:1 against their background in the light and the dark theme, the WCAG AA level for normal text. The e-ink theme goes further: black on white, and no text on a mid-grey. Colored components such as panels, tags and notifications pick dark or light text depending on their background. Every page of this documentation is checked for this automatically. The exceptions are listed under Known limitations.
Visible focus Links, buttons, knobs and form fields show a clear focus style, so keyboard users always see where they are. On range sliders and color pickers, the focus ring appears for keyboard use and stays hidden after a mouse click.
Light and dark The theme follows the visitor’s system setting, and built-in controls such as scrollbars and checkboxes follow the theme. A third theme, for e-ink displays, has to be chosen: such a display doesn’t tell the browser what it is. See Theming.
Reduced motion When the visitor has asked their system to reduce motion, the moving stripes of progress bars stand still and spinners turn slowly. In the e-ink theme nothing moves at all.
Zoom Layouts adapt to the available width, so pages stay usable when zoomed in to 200% or more. See Responsive design.

Your part

Most of accessibility is in the HTML itself. The examples in this documentation follow these practices; use them as a starting point.

  • Set the language of the page with <html lang="en">, so screen readers pronounce the text correctly.
  • Use headings in order. One <h1> per page, and no skipped levels: many screen reader users navigate by headings. Choose a heading for its level, not for its size.
  • Label every form field with a <label>. A placeholder is not a label: it disappears as soon as someone starts typing. Group related radio buttons and checkboxes in a fieldset with a legend.
  • Describe images with an alt text, or use an empty alt="" for decorative images. See Images.
  • Write link texts that make sense on their own. “Read the installation guide” helps; “click here” doesn’t, especially in a list of links.
  • Don’t rely on color alone. A red border on a field isn’t enough to explain an error: add a text that says what is wrong and how to fix it. The e-ink theme is a good test: there a red and a blue tag look the same.
  • Use buttons for actions and links for navigation. A <button> works with the keyboard out of the box; a clickable <div> does not.
  • Add ARIA only where HTML falls short. Native elements already tell assistive technology what they are. ARIA is for custom widgets, for example aria-expanded on a button that opens a menu.

Test it yourself: put the mouse aside and use the page with only the keyboard (Tab, Shift+Tab, Enter, Space), zoom in to 200%, and try a screen reader such as NVDA on Windows or VoiceOver on macOS and iOS. Automated checkers like WAVE catch many common problems, but not all of them.

Known limitations

Nausikaä doesn’t get everything right yet. These are the known issues; keep them in mind when you use the affected parts.

Contrast of some colors White text on primary buttons reaches a contrast of 4.1:1, and on positive buttons 2.7:1, below the 4.5:1 guideline. The Maroon, Orange and Teal tags and active knobs reach between 3.8:1 and 4.3:1: at these brightnesses neither white nor dark text is quite enough. Prefer other colors for small text, or use these for large text only.
Dropdowns Dropdown panels open when their trigger has focus and close when focus moves away. They work without JavaScript, but they don’t close with Escape and don’t announce whether they are open. Add aria-expanded with a few lines of JavaScript where that matters.
Menu toggles The navbar menu on small screens and the sidebar toggle are built with a hidden checkbox. Screen readers announce them as a checkbox rather than as a menu button.
Text size The base text size is set in pixels. Zooming in works, but a larger default font size chosen in the browser settings has no effect.
Reduced motion Only progress bars and spinners respond to the reduced motion setting so far. The short transitions of dialogs, dropdowns and loading buttons still play. The e-ink theme switches all of them off.