LamGig Cafe

How this site is built to be used

What we commit to, how it is checked, and where it stops. Written about the website itself — every claim below is something the code can be held to.

Contrast is computed, not chosen

The colours on this site arrive from its owner and are different for every business using this template, so no text colour here was picked by eye. Every foreground is derived from the relative luminance of the surface behind it and checked against the 4.5:1 ratio the WCAG AA guideline sets for body text.

Where a published colour would not clear that bar, the derived colour steps away from it until it does, rather than the text being left hard to read.

That check is run separately for the light and the dark theme, against every surface text can land on in each. Neither theme is a lesser version of the other.

Light and dark

This site opens in the theme its owner published, and the control at the end of the header switches to the other one. Your choice is remembered on this device and applied before the page is drawn, so changing it does not cost you a flash of the theme you did not want.

The switch works from the keyboard like any other button, and it says which theme it will change to rather than which one you are in.

Keyboard and focus

Every link, button and control can be reached and operated from the keyboard, in the order the page reads. The focus ring is never removed and never restyled per control, so it looks the same wherever you land.

The navigation sheet on small screens closes with Escape and returns focus to the button that opened it.

Motion

Two things move on their own: the opening block of the home page settles into place once when it loads, and sections fade in as you scroll to them. Nothing moves without you, and nothing repeats.

If your system asks for reduced motion, neither happens — every section is shown in its finished state from the first frame. Changing the theme cross-fades normally and changes instantly under that setting.

Small screens and long words

The layout is built and tested down to 360 pixels wide. Names and descriptions come from the owner and can be far longer than anything shown here, so headings break inside words where they have to rather than pushing the page sideways.

Where this falls short

The map is a third-party embed and its interface is not ours to fix; the address above it is plain text for exactly that reason, and there is a link that opens the map in its own app.

This statement describes the website. It does not describe the building — see the getting-here notes on the visit page for what we can say about the door.

Ordering and paying

Every step of ordering works from the keyboard. Choices are real radio buttons and checkboxes, so the arrow keys move between sizes the way they do anywhere else; quantities are ordinary buttons that say what they change.

When something needs fixing — a missing detail, a declined card, an item that has sold out since you chose it — it is said in words, next to what it is about, and announced to screen readers. The first field to fix takes focus, and moving on to payment moves focus to the payment step.

Whether we are open, paused or need a minimum order is said at the top of the ordering page, before you choose anything.

Where ordering depends on others

The card form and the Apple Pay and Google Pay buttons are drawn by Stripe, our payment processor, inside its own secure frame; how they behave with assistive technology is Stripe’s to fix rather than ours, and we use them as Stripe ships them.

Before an order is placed, Cloudflare runs a quick check that it comes from a person. It is almost always invisible; when it does ask for a click, that box is Cloudflare’s own.