Legal · L·02 · Issued 2026·09
Accessibility
What this site does for keyboard, screen-reader, low-vision and motion-sensitive visitors — stated as it is built, with the gaps named rather than smoothed over.
Status
Targeting WCAG 2.1 AA. Not certified.
No third-party accessibility audit has been performed on this site, and no conformance certificate exists. Every claim below points at something you can find in the markup, the stylesheet or the site's own build audit. Known limitations are listed in § 03, and work not yet done in § 04.
Contents
- A·01What is built inten things, each verifiable
- A·02Colour and contrastdesigned ratios per pair
- A·03Known limitationsstated candidly
- A·04Not yet donewhat has not been tested
- A·05Report a problemthrough the enquiry form
Working rule
Colour is never the only carrier of meaning.
Every finish chip is accompanied by its code in text; every state is written into an attribute a screen reader can read.
What is built in
Ten measures are present on every sheet. Each is named with the markup or the rule that carries it, so it can be checked rather than taken on trust.
The script is small, dependency-free and does no networking. Where it is the only thing carrying a behaviour, that is said below rather than glossed — see the reveal limitation at L·07.
-
Semantic landmarks
Every page is built from
header,nav(labelled Primary),main,footerandsectionelements. Each section names its own heading witharia-labelledby, so a landmark or heading list reads as the sheet's actual structure. -
Exactly one h1 per page
Enforced by the site's own build audit (
tools/build.py --check), which fails the build on any page with a different count. The same audit checks that every image carries alternative text and explicit dimensions, that every internal link resolves, that JSON-LD parses, and that the social and icon meta described on this sheet is present. -
Skip links
Two, as the first focus stops on every page: Skip to content (
#main) and Skip to specification board (#board). They sit off-screen until focused, then appear at the top-left over the running head. -
Visible focus
A global
:focus-visiblerule draws a 2px oxide outline offset 3px from every focusable element — links, buttons, disclosure triggers and swatch chips alike. Form fields are the one exception, and it is listed as a limitation at L·04: their focus is shown by the field underline turning oxide instead of by an outline ring. -
Disclosures are native buttons
The Collections and Categories menus in the running head are real
buttonelements carryingaria-expandedand pointing at their panel witharia-controls. The Esc key closes an open panel, and so does a click outside it. The mobile menu button works the same way. -
Board state is exposed
Every Add to board control carries
aria-pressed, updated the moment the board changes, and on the collection pages the visible label switches between Add to board and On the board. The tray itself is labelled Specification board, reports a live item count in text, and each chip's remove button is labelled with the item it removes. -
Form errors are text, in place
Each field is labelled with
aria-labelledbypointing at its own label. Required fields carryrequired, and every field holds an adjacent.errparagraph that stays hidden until a submit finds that field empty — then it is revealed beside the field, without a page reload. -
Reduced motion is honoured
Under
prefers-reduced-motion: reduceevery transition and animation collapses to 0.01 ms, smooth scrolling is switched off, the plate wipe is cancelled outright and the display line masks are removed, so headings and images simply appear. The script also skips its scroll-reveal observer entirely on that setting and marks the content visible immediately. -
No scroll-jacking
Scrolling is never taken over: no hijacked wheel, no forced horizontal traversal, no cursor followers, no particles, no autoplaying video or audio. Reveals fire once, on the visitor's own scroll, and stop.
-
No layout shift
Every image plate carries an explicit aspect ratio, the running head has a reserved height, and the board tray overlays the foot of the viewport instead of pushing content up. Nothing jumps as images or fonts arrive.
Colour and contrast
One locked palette of five working colours, each with a measured job. The ratios below are measured from the published colour tokens, not estimated.
AA body text needs 4.5:1; large text — 24px and above — needs 3:1.
AaInk on paper
16.6:1
Body text, display headings and interface type on the paper ground.
AaSmoke on paper
5.4:1
Secondary text only: kickers, captions, notes and the smaller body measure. Above the AA body threshold.
AaSmoke on bone
4.8:1
The same secondary text on the bone ground, which every second section uses. Measured, not assumed: this pair was darkened to clear the AA body threshold on both grounds.
AaOxide on paper
5.5:1
The single accent: section numbers, links inside prose, the focus outline and filled call-to-action buttons.
AaPaper on ink
16.6:1
The same pair reversed, so the same ratio: ink sections, the footer and the board tray.
AaSecondary on ink
6.5:1
Secondary text inside the ink sections — kickers, notes and the smaller body measure — set as paper at 60% so it clears the threshold on the dark ground.
AaBronze on paper
3.5:1
Structure, not copy: plate hairlines, registration crosshairs and the large stage numerals beside each step. It is set at display size, above the 3:1 large-text threshold, and is never used for body text.
AaBronze text on paper
5.3:1
A darkened bronze for the two places where the metal tone carries small copy — the materials-bank family labels and the floorplate kicker. The lighter bronze above was measured too low for text at these sizes, so the copy uses this pair and the lighter tone stays on rules, hairlines and display numerals.
The working elements carry no radius — swatch chips, buttons and image plates are rectangles — so no meaning depends on telling one shape apart from a near-neighbour. Colour is likewise never the only carrier of meaning; the finish hall is the hardest case and is set out at L·02.
Known limitations
Stated candidlyThe title block and margin rail are decorative
The architect's title block fixed at the bottom-right and the vertical running label in the left margin are both marked aria-hidden="true", so neither is announced. Both are also removed on narrow viewports — the rail below 1180px, the title block below 860px. Consequence: the sheet number the title block tracks is not available to a screen reader. The plate bar under the running head carries the same page reference as real, announced text on every page.
The finish hall conveys colour as data
178 chips whose entire subject is a colour. Each chip is a button whose text carries the finish code and its family — PWMK2180 · Matt / glossy lacquer — so the code is never dependent on seeing the colour, and selection is exposed as aria-pressed rather than by hue alone. The chip image itself is a CSS background with no text alternative. A visitor who cannot perceive the colour can still specify exactly by code, but cannot judge the colour from this page; that is what the physical sample at stage four of the method is for.
Catalogue renders cannot always be fully described
Images on this site are manufacturer renders of catalogue series, not photographs of installed work. Alternative text describes what can be read in the frame — the room, the joinery, the material and the finish family — but these are composed images, and material, light and staging carry meaning a sentence does not fully transfer. Where a series publishes no still, the sheet is set in type as a paper plate rather than filled with an empty image.
Form focus and errors are weaker than the rest of the page
Two related gaps on the enquiry form. Focus: the stylesheet removes the outline ring from inputs, selects and textareas and shows focus by turning the field's underline oxide — a colour-only change, on a hairline. Errors: the form suppresses the browser's own validation messages and reveals the site's .err paragraph inside the same field block. That message is real text in the document, but it is not linked to its input with aria-describedby, and focus is not moved to the first field that failed — a keyboard visitor tabs forward to find it. Field order and labels are correct; the association and the focus indicator are the gaps. Two parts have since been strengthened: a field that fails validation now carries a 2px oxide underline (the focus colour, at weight), and its error text is an aria-live="polite" region; the aria-describedby link and moving focus to the first failed field remain open.
The board tray overlays the foot of the page
When items are on the board, the tray is fixed across the bottom of the viewport. It is reachable by the skip link and every control in it is focusable, but on a short viewport it can cover the last line of a section while it is open. It is off-screen entirely when the board is empty.
The paper-plate arc is CSS only
The circle that sits behind the typeset paper plates is a stylesheet pseudo-element: no image, no content, nothing in the accessibility tree and nothing to describe. It is decoration by construction, and it is noted here only so the inventory of visual elements is complete.
The scroll reveals depend on the script
Display headings are line-masked and plate images are clipped, and both are released by a class the script adds on scroll-in. With scripting blocked, the copy is still in the document and readable by a screen reader, but the masked headings and the plate images stay in their pre-reveal state and do not appear visually. There is no no-script fallback stylesheet. Under prefers-reduced-motion: reduce the script releases everything immediately, so reduced-motion visitors are not affected — the gap is scripting-disabled only.
Not yet done
The status line above says not certified. This is the specific work behind that word.
No independent audit. No third party has tested this site against WCAG 2.1 AA, and no conformance report exists. Nothing on this sheet should be read as a certificate.
Assistive-technology passes are scheduled, not completed. A keyboard-only walkthrough and a screen-reader pass across 390, 768, 1100 and 1440 pixel viewports are on the launch-hardening list for this build. They have not been signed off, so the measures in § 01 are described as built rather than as tested end to end with assistive technology.
Contrast is measured on the tokens, not on every state. The ratios in § 02 are computed from the published palette. Hover, pressed and disabled states have not each been separately measured against every background they can appear on.
What does run on every build: the site's own audit (python3 tools/build.py --check), which fails the export on a broken internal link, an image without alternative text or explicit dimensions, or a page whose heading count is not exactly one h1 — and also on invalid JSON-LD, missing social or icon meta, a page still loading Google Fonts, or an inline protection block. That is a structural gate, and it is not a substitute for the testing above.
Report a problem
Write to dionainteriors@gmail.com, call the telephone printed in the footer and on Enquire, or compose a note in the enquiry form there. Say in the message field that the note concerns accessibility. When you press Send, the form sends the brief via Formspree to the studio inbox. The studio will respond at the mailbox, by the telephone or address you give, or through the channel your project was set up with.
The most useful report names four things: the page, what you were using (keyboard only, a screen reader and its version, a zoom level, a magnifier), what you expected, and what happened instead. The brief you type is the brief that is sent, so nothing has to be retyped.
Reported problems get fixed in the pages and recorded here: this sheet is the standing list, and its issue date moves when the list changes.
Issued
2026·09
Targeting WCAG 2.1 AA — not certified, no third-party audit performed.
Nothing on this sheet is a legal statement of conformance. It is a description of the build and of the work outstanding.