Skip to content

Search

Start typing to search.

Show all pages

Documentation

Accessibility

What the core guarantees, what a skin must keep, and what you add in your markup. The target is WCAG 2.2 AA.

What the core guarantees

These hold under every skin, because they live in the core:

  • Every interactive component shows a 2 pixel focus ring with an offset when it gets keyboard focus, and only then.
  • On touch screens a button reaches at least 44 by 44 pixels, whatever height the skin gives it. The extra area is invisible.
  • Disabled buttons, real (disabled) or announced (aria-disabled="true"), ignore pointer input.
  • A dialog is a <dialog> opened as a modal: the browser keeps focus inside, closes it on Escape, makes the page behind it inert and returns focus to the button that opened it.
  • Components use logical properties, so they mirror correctly in right-to-left languages with dir="rtl".

What a skin must keep

A skin changes the look, so it carries the contrast:

  • Text: at least 4.5:1 against its own background, 3:1 for large text.
  • Focus ring, input borders and other parts you need to see to use a control: at least 3:1 against what is next to them.
  • Motion only behind motion-safe:, so visitors who ask for reduced motion get none.
  • No information in color alone: a status badge also says its status in words.

The built-in skins meet these in light and dark. The calaca skin, for example, draws its focus ring in ink in light mode because its marigold accent reaches only 2.3:1 on paper.

What you add in your markup

Classes cannot name things or describe errors. Your markup does that:

  • A label for every field: <label for> with the field’s id.
  • An aria-label on a button that shows only an icon.
  • On an invalid field: aria-invalid="true" and aria-describedby pointing to the error message.
  • Button text that starts with a verb and names the object: “Delete project”, not “OK”.
  • A title in every dialog, linked with aria-labelledby.

Each component page has an accessibility section with the details.

How Calaca is tested

  • axe checks every component in every skin, in light and dark, for WCAG 2.2 AA, in Chromium, Firefox and WebKit.
  • Keyboard tests open and close dialogs and check where focus goes.
  • Pages render with forced colors and right to left.
  • A test rejects physical properties such as margin-left in the core and the skins.