Accessibility
Real controls, and no badge.
This site has a theme switch, four text sizes, a high contrast mode, a reduce-motion switch that genuinely stops things, and keyboard-operable panels. It has not been audited by anybody, so it claims no conformance with anything. Both halves of that sentence are on this page on purpose.
Plinth Home Lending · a design demonstration by Quarry
The position, stated plainly
This site makes no claim of conformance with the Web Content Accessibility Guidelines, at level A, AA or AAA, and displays no accessibility badge. A conformance claim is a statement about the outcome of testing. No testing of that kind has been carried out here, so making one would be a guess dressed as a guarantee.
What follows is the honest alternative: a list of what is actually implemented, a list of what has not been checked, and a way to tell us when something is wrong. The reading controls on this site are working controls rather than a widget bolted on to look compliant, which is the more common arrangement and the less useful one.
The controls, and where they are
Four widgets live on four different edges of the screen, so that none of them sits on top of another at any width. Every one of them is reachable by keyboard.
| Control | Where it is | What it does |
|---|---|---|
| Theme | The switch in the page header | Light, dark, or follow whatever your system asks for. The dark theme was designed rather than inverted, and it is applied before the first paint so the page never flashes. |
| Text size | The reading controls on the left edge | Four sizes. They scale a single multiplier that the whole type scale is built from, so headings, body and small print move together rather than one of them overflowing. |
| High contrast | The reading controls | Pushes the ground and the ink apart, with a separate set of values for the light theme and for the dark one. |
| Reduce motion | The reading controls | Starts on if your system asks for it, and can be switched on independently. It stops the sediment canvas, the reveal animations, the accordion openings and the scroll-driven depth gauge. |
| Underline links | The reading controls | Underlines every link in the body of the page and in the footer, for anyone who does not want to rely on colour or position to find them. |
| Palette | The seam picker in the footer | Four colour schemes for the five strata. Each was measured against the page grounds in both themes before it was offered. |
| Back to the defaults | The reading controls | Clears every preference this site can store and returns the page to its starting state. |
Your choices are only written to this browser’s storage if you accept in the storage sheet. If you decline, the controls still work for as long as the page is open; they simply do not persist. The privacy page lists every key.
What is implemented
- A skip link. The first focusable element on every page jumps straight to the main content and becomes visible when it takes focus.
- Visible focus. Every focusable element gets a three-pixel outline plus a soft ring, drawn with
:focus-visibleso it appears for keyboard users without following a mouse around. - Keyboard-operable panels. The section panel in the header and the reading controls are dialogs: focus moves into them when they open, Escape closes them, focus returns to the control that opened them, and Tab is trapped inside while they are open.
- Arrow keys in radio groups. The theme switch, the palette picker and the text-size group behave like real radio groups rather than rows of buttons.
- One heading structure per page. Exactly one
h1, headings in order, and real landmarks: a header, a main, a footer and named navigation regions. - Real labels. Every input on the calculator pages has a visible, associated label. Nothing depends on placeholder text.
- Tap targets. Interactive elements are at least forty-four pixels in the smaller dimension, including the accordion rows and the footer links.
- Accordions without JavaScript. The questions page is built from
detailsandsummary, so it opens, deep-links and prints whether or not any script runs. - Tables that scroll on their own. Wide tables scroll inside their own focusable container rather than making the page scroll sideways, and each has header cells with a scope.
- Never colour alone. Chart series carry a dash pattern or a marker as well as a colour, every chart is accompanied by a table of the same numbers, and the labels in the disclosures table are written out in words.
- Measured colour. The five band colours, in all four palettes, were measured against the page grounds in both themes when they were chosen rather than picked by eye.
- Decorative things are hidden. The sediment canvas is marked decorative and carries a visually hidden description of what it draws, so nothing depends on seeing it.
- Text that scales. Type is set in relative units from a single multiplier, so browser zoom and the text-size control both work, and nothing is pinned in pixels.
What reduce motion actually stops
A reduce-motion switch that only shortens a fade is not a reduce-motion switch. This one is wired to the two pieces of animation that would actually be a problem, as well as to everything else.
- The sediment canvas. The falling grains behind the hero and the closing panel are not started at all. There is no loop running in the background waiting to be re-enabled.
- The scroll-driven depth gauge. The gauge along the top of the window is driven by scroll position. Under reduce motion it stops tracking and settles to a static state.
- Every reveal. Elements that would animate into view are simply placed there, immediately, with no delay chain.
- Pointer effects. The pointer-tracked lighting on the hero panels is not wired up at all, rather than being wired up and then hidden.
- Transitions and smooth scrolling. Durations collapse and anchor jumps become instant.
It follows your operating system’s prefers-reduced-motion setting by default, and the switch in the reading controls can turn it on even when your system has not asked for it, or leave the motion on when it has.
What has not been verified
This is the half of an accessibility statement that is usually missing. None of the following has been done, and until it has, no claim rests on it.
- No audit. No conformance review against WCAG has been carried out, by us or by anybody else. There is no VPAT and no accessibility conformance report.
- No screen reader testing. The site has not been walked through with JAWS, NVDA, VoiceOver or TalkBack. Correct markup makes a good outcome likely. It does not make it certain.
- No voice control or switch access testing. Neither Voice Control, Voice Access nor a switch device has been used on these pages.
- Reflow and zoom not checked page by page. The layout is built to reflow and was checked at the narrow end, but 400% zoom has not been walked through on every page and every widget.
- Forced colours not verified. Windows High Contrast Mode and the
forced-colorsmedia feature have not been tested, and the canvas artwork in particular has not been checked in that mode. - Composited contrast not exhaustively measured. The palette tokens were measured. Every hover, disabled and focused state over every surface was not.
- No cognitive or plain-language review. The writing is deliberately plain, but no readability testing has been done with actual readers.
- Print styles unverified. There are print rules, and nobody has printed every page to check them.
Known rough edges
- Elements that animate into view start hidden. If scripting is blocked entirely they are placed and shown by the reduce-motion path, but a browser with scripting off and no reduce-motion preference is a combination that has not been walked through.
- The reading controls, the storage sheet and the section panel are three separate overlays on three edges. At very small window heights, with the largest text size, they have not been checked together.
- Wide tables scroll horizontally inside a focusable region. That is announced, but a long table still takes a lot of arrow keys to cross.
- Preferences are stored per browser and per device. There is no account, so a choice made on a phone does not follow you to a laptop.
Reporting a problem
If something on this site does not work for you, the useful details are the page address, what you were trying to do, the browser and any assistive technology you were using, and what happened instead.
On a real site this section would name a person, give a response time, and offer a second channel for anyone the first channel does not suit. This is a demonstration, so the addresses below are invented and nobody is on the other end of them. That is worth saying rather than leaving a form that quietly goes nowhere.
- Email. hello@plinthlending.example, an invented address on an invented domain.
- Telephone. (816) 555-0147, a number inside the block reserved for fiction.
- Text telephone. (816) 555-0148, listed because a real lender should list one.
Plinth Home Lending is a design demonstration. The company, the address, the phone number and the email domain are invented. No licence, NMLS identifier, rate, approval or timeline on this site is real, and no form on it transmits or stores anything.