Access
Accessibility statement
1. Colour and contrast
The palette is two warm neutrals, which is the hardest case for contrast, so we measured rather than guessed:
| Use | Combination | Ratio | Requirement |
|---|---|---|---|
| Body text | Dark brown-black on linen | 14.2:1 | 4.5:1 |
| Secondary text and labels | Mid rattan on linen | 6.6:1 | 4.5:1 |
| Primary buttons | White on deep rattan | 9.2:1 | 4.5:1, and we set ourselves 7:1 |
| Vertical rail | White on deep rattan | 9.2:1 | 4.5:1 |
| Header over photography | White on a darkened gradient over the image | Above 4.5:1 in both the transparent and the frosted state | 4.5:1 |
The pale mid-brown that draws our 1px rules is used for lines and large display type only, never for body copy, because it does not reach 4.5:1 at text size.
2. Numbers are never only in a picture
Every tested load, inner diameter, height, tolerance and shedding grade is in text on the page. The diagrams illustrate; they do not carry information that is not also written down. If you cannot see the images at all, no product fact is lost.
3. The vertical type
The fibre name on the home page and the section name on content pages are set with the CSS writing-mode property, not a rotation. That means a screen reader reads it in the normal order and text selection works. On the home page the rail is also announced as an equivalent sentence — “Fibre 1 of 6: Seagrass, Cyperus malaccensis” — through a live region, and the rail itself is marked decorative on content pages where the same words appear as a heading.
4. Motion
The home page changes fibre as you scroll, and images cross-fade. Every animation and transition on the site is disabled when your system is set to reduce motion; the content is then swapped without movement. Nothing auto-plays, nothing flashes and nothing moves without you scrolling.
5. Keyboard and focus
- Everything interactive can be reached and operated by keyboard.
- A visible focus outline is drawn in deep rattan with a 3px offset, on every control, in both light backgrounds and over photography.
- A skip link to the main content is the first thing in the tab order.
- The Fit Finder is built from real buttons with
aria-pressed, so its state is announced. - The cookie banner can be dismissed by keyboard and does not trap focus.
6. Forms
- Every field has a visible label, not a placeholder standing in for one.
- Errors appear next to the field they belong to, in text, announced by role
alert, and never by colour alone. - Required fields are marked in the label as well as in the markup.
- Autocomplete hints are set so browser autofill works.
7. Images
Product photographs have alt text describing the piece and that it is shown empty. Macro texture images describe the weave — “flat straw-green blades coiled in tight rows” — because that is the information the image carries. Purely decorative images have empty alt text so they are skipped.
8. Where we know we fall short
- The home page hero uses four screens of scroll to move through six fibres. That is fine with a mouse or a keyboard, but it is a long scroll on a phone. Every fibre is also reachable directly from the materials page, which needs no scrolling mechanic.
- Some specification tables are wide. They scroll horizontally inside their own container rather than shrinking the text below a readable size.
- We have tested with keyboard, with a screen reader and with browser zoom at 200 %, but we have not yet had the site reviewed by an external accessibility auditor.
9. Tell us about a barrier
If something here stops you doing what you came to do, write to support@studiohafnia.mom or call +45 42 71 93 68. Tell us the page and what happened. We will reply within two working days and tell you either when it will be fixed or how to get what you needed in the meantime — including, if it is easier, one of us reading the specifications to you over the phone and taking the order that way.